/* ============================================
   Other Pages Styles - Services, Projects, About
   Hero Section with Different Mask
   ============================================ */

/* Hero Container - Inset from viewport edges with margins */
.hero-container {
  display: block;
  position: relative;
  top: 0;
  width: calc(100vw - 40px);
  height: 963px;
  margin: 20px auto 0;
  padding: 0;
  padding-top: 0 !important;
  overflow: visible;
  background-color: transparent;
  z-index: 10;
}

/* 1440px breakpoint */
@media (max-width: 1440px) {
  .hero-container {
    width: calc(100vw - 40px);
    height: 722px;
    overflow: visible;
  }
}

/* 1441-1535px – smooth transition from 1440px */
@media (min-width: 1441px) and (max-width: 1535px) {
  .hero-container {
    height: 820px;
    overflow: visible;
  }
}

/* 1536-1919px – intermediate height */
@media (min-width: 1536px) and (max-width: 1919px) {
  .hero-container {
    height: 890px;
    overflow: visible;
  }
}

/* Tablet breakpoint – 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-container {
    width: calc(100vw - 32px);
    margin: 16px auto 0;
    height: clamp(480px, 55vw, 600px);
    overflow: visible;
  }
}

/* 768px breakpoint */
@media (max-width: 768px) {
  .hero-container {
    width: calc(100vw - 24px);
    margin: 12px auto 0;
    height: min(130vw, 600px);
    min-height: 400px;
    overflow: hidden;
    position: relative;
  }
}

/* 480px breakpoint */
@media (max-width: 480px) {
  .hero-container {
    width: calc(100vw - 20px);
    margin: 10px auto 0;
    height: min(120vw, 520px);
    min-height: 360px;
    overflow: visible;
  }
}

/* 425px breakpoint */
@media (max-width: 425px) {
  .hero-container {
    width: calc(100vw - 16px);
    margin: 8px auto 0;
    height: min(107.9vw, 500px);
    min-height: 380px;
    overflow: visible;
    background-color: transparent;
  }
}

/* Masked Background - Fills container with border-radius */
.hero-masked-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;

  /* Default background - will be overridden by page-specific classes */
  /* Page-specific backgrounds use cover sizing for width expansion */
  background-size: cover;
  /* Stick to top center - image expands horizontally as needed */
  background-position: center top;
  background-repeat: no-repeat;

  /* CSS Masking - White areas in mask show image, black areas show white background */
  /* This mask is different from home page - simpler shape without bottom cutout */
  /* The top notch will show white background through the mask */
  /* Default: 1920px mask */
  -webkit-mask-image: url('../../images/hero/other/1920/hero-mask-other.svg');
  -webkit-mask-size: cover;
  /* Match background-size for consistent scaling */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-mode: luminance;

  mask-image: url('../../images/hero/other/1920/hero-mask-other.svg');
  mask-size: cover;
  /* Match background-size for consistent scaling */
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-mode: luminance;

  z-index: 1;
}

/* 1440px breakpoint - use 1440px mask */
@media (max-width: 1440px) {
  .hero-masked-bg {
    /* Same background image, cover sizing for width expansion */
    background-size: cover;
    background-position: center top;

    /* Use 1440px mask, scales to fill container */
    -webkit-mask-image: url('../../images/hero/other/1440/hero-mask-other.svg');
    -webkit-mask-size: cover;
    -webkit-mask-position: center top;

    mask-image: url('../../images/hero/other/1440/hero-mask-other.svg');
    mask-size: cover;
    mask-position: center top;
  }
}

/* 768px breakpoint - use 768px mask with stretch sizing */
@media (max-width: 768px) {
  .hero-masked-bg {
    border-radius: 20px;
    background-size: cover;
    background-position: center top;

    -webkit-mask-image: url('../../images/hero/other/768/hero-mask-other.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-mode: luminance;

    mask-image: url('../../images/hero/other/768/hero-mask-other.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-mode: luminance;
  }

  .hero-overlay {
    border-radius: 20px;
  }
}

/* 425px breakpoint - use other/375 mask */
@media (max-width: 425px) {
  .hero-masked-bg {
    border-radius: 14px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    -webkit-mask-image: url('../../images/hero/other/375/hero-mask-other.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-mode: luminance;

    mask-image: url('../../images/hero/other/375/hero-mask-other.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-mode: luminance;
  }

  .hero-overlay {
    border-radius: 14px;
  }
}

/* Page-specific background images - loaded via JS data-bg for performance */
/* The hero GIFs (34-82 MB) are loaded asynchronously via JavaScript
   using data-bg attributes on the .hero-masked-bg elements.
   This prevents them from blocking the initial page render.
   Once loaded via JS, the background-image is set inline. */
.page-services .hero-masked-bg,
.page-projects .hero-masked-bg,
.page-about .hero-masked-bg {
  background-color: #0A0E1A; /* Dark fallback while GIF loads */
}

/* Overlay - applies color with different opacity per page */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background-color: var(--color-overlay);
  z-index: 2;
  pointer-events: none;
  display: none;
}

/* Home page overlay - 50% opacity */
body:not(.page-services):not(.page-projects):not(.page-about) .hero-overlay {
  display: block;
  opacity: 0.50;
}

/* Services page overlay - 35% opacity */
.page-services .hero-overlay {
  display: block;
  opacity: 0.35;
}

/* Projects page overlay - 75% opacity */
.page-projects .hero-overlay {
  display: block;
  opacity: 0.75;
}

/* About page overlay - 75% opacity */
.page-about .hero-overlay {
  display: block;
  opacity: 0.75;
}

/* Hero Content - Contains navigation and logo */
.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Navigation styles now centralized in components/navigation.css */
/* Page-specific navigation overrides (if needed) can go here */