/* ============================================================
   INTRO SHUTTER — rolling steel shutter over the hero
   ------------------------------------------------------------
   Visible only when <html> has .shutter-on (set by an inline head
   script when JS + GSAP are available), so no-JS visitors and CDN
   failures never get trapped behind it. Motion lives in
   assets/shutter.js; this file is purely the material + light.

   Runtime custom properties (written by shutter.js on .shutter):
     --gap   px height of the light gap under the curtain
     --glow  0…1.8 light intensity derived from the gap
   ============================================================ */

.shutter {
  display: none;
}

.shutter-on .shutter {
  display: block;
}

.shutter {
  --gap: 0px;
  --glow: 0;
  --slat: 46px;
  --rail-w: clamp(10px, 1.3vw, 22px);
  --housing-h: clamp(58px, 9vh, 96px);
  --bar-h: clamp(36px, 5.2vh, 58px);
  --light-core: #eaf7ff;
  --light-halo: 0, 170, 255;

  position: fixed;
  inset: 0;
  z-index: 1000; /* above nav (100), mobile menu (99), wash-fx (90) */
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

@media (max-width: 767px) {
  .shutter {
    --slat: 30px;
  }
}

/* --- Curtain (the moving steel sheet) ------------------------ */
.shutter__curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  will-change: transform;
  background:
    /* brushed-metal micro striations */
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
    /* side falloff — curtain curves away into the rails */
    linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0) 16%,
        rgba(255, 255, 255, 0.025) 50%,
        rgba(0, 0, 0, 0) 84%,
        rgba(0, 0, 0, 0.6) 100%
      ),
    /* vertical falloff — darker under the housing */
    linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 80%,
        rgba(0, 0, 0, 0.25) 100%
      ),
    /* corrugated slats */
    repeating-linear-gradient(
        180deg,
        #07080a 0,
        #2b3038 2px,
        #1e2229 7px,
        #171a1f 45%,
        #1c2027 calc(var(--slat) - 9px),
        #0b0c0f calc(var(--slat) - 3px),
        #040405 var(--slat)
      );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Light spilling up the lowest slats from the gap */
.shutter__curtain::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 100% at 50% 100%,
    rgba(var(--light-halo), 0.28) 0%,
    rgba(var(--light-halo), 0.08) 45%,
    transparent 75%
  );
  opacity: calc(var(--glow) * 0.75);
  mix-blend-mode: screen;
}

/* Groove shading drawn OVER the paint so the branding reads as
   painted onto corrugated steel rather than floating above it. */
.shutter__curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0 1px,
    transparent 1px calc(var(--slat) - 7px),
    rgba(0, 0, 0, 0.35) calc(var(--slat) - 5px),
    rgba(0, 0, 0, 0.7) var(--slat)
  );
}

/* Slow specular sweep across the steel */
.shutter__sheen {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(200, 230, 255, 0.05) 42%,
    rgba(230, 245, 255, 0.09) 50%,
    rgba(200, 230, 255, 0.05) 58%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform: translateX(-120%);
  will-change: transform;
}

/* --- Branding painted on the curtain ------------------------- */
.shutter__brand {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: min(92vw, 1320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* Weathered paint: grain layered into the text fill */
.shutter__paint {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f4f7fa 0%, #dfe6ec 55%, #aebccb 100%);
  background-size:
    180px,
    100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.shutter__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(190, 215, 235, 0.55);
  margin-right: -0.42em;
  margin-bottom: clamp(1.25rem, 3.2vh, 2.25rem);
}

/* Header logo shape used as an alpha mask, filled with the brand
   blue gradient — no background, no frame, just the mark. */
.shutter__mark {
  display: block;
  width: clamp(80px, 8.5vw, 124px);
  aspect-ratio: 980 / 679;
  margin-bottom: clamp(0.4rem, 1.2vh, 0.9rem);
  /* on the wrapper: filters run before masks, so glow must sit outside */
  filter: drop-shadow(0 0 12px rgba(0, 170, 255, 0.45)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.8));
}

.shutter__mark-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #7dd6ff 0%, var(--electric-blue) 55%, #0080cc 100%);
  -webkit-mask: url(images/infinity-logo-mark.png) center / contain no-repeat;
  mask: url(images/infinity-logo-mark.png) center / contain no-repeat;
}

.shutter__wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 11.5rem);
  line-height: 0.9;
  letter-spacing: 0.12em;
  margin-right: -0.12em; /* optically re-center tracked text */
  text-transform: uppercase;
  /* embossed-into-steel edge */
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
}

.shutter__tagline {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2.6vh, 1.75rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.9vw, 1.35rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #cfd9e2;
  white-space: nowrap;
}

.shutter__tagline-text {
  margin-right: -0.34em;
}

.shutter__tagline i {
  display: block;
  width: clamp(24px, 6vw, 88px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--electric-blue));
}

.shutter__tagline i:last-child {
  background: linear-gradient(90deg, var(--electric-blue), transparent);
}

/* Small stencil markings near the rails */
.shutter__stencil {
  position: absolute;
  top: 50%;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(170, 195, 215, 0.34);
  white-space: nowrap;
  pointer-events: none;
}

.shutter__stencil--left {
  left: calc(var(--rail-w) + clamp(0.75rem, 2.5vw, 2.5rem));
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.shutter__stencil--right {
  right: calc(var(--rail-w) + clamp(0.75rem, 2.5vw, 2.5rem));
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .shutter__stencil {
    display: none;
  }
}

/* --- Bottom rail: heavy steel bar, handles, lock, LED edge --- */
.shutter__bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline: 12%;
  background: linear-gradient(
    180deg,
    #4a515b 0%,
    #2a2f36 10%,
    #1d2127 45%,
    #121418 80%,
    #08090b 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.8),
    0 -10px 24px rgba(0, 0, 0, 0.45);
}

/* LED strip + light rim on the underside of the bar */
.shutter__bottom-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--light-halo), 0.9) 18%,
    var(--light-core) 50%,
    rgba(var(--light-halo), 0.9) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 12px rgba(var(--light-halo), 0.9),
    0 0 36px rgba(var(--light-halo), 0.5);
  opacity: calc(0.35 + var(--glow) * 0.5);
}

.shutter__handle {
  width: clamp(54px, 8vw, 120px);
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, #0a0b0d 0%, #1b1f25 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.1);
}

.shutter__lock {
  position: relative;
  width: clamp(38px, 4vw, 56px);
  height: 58%;
  border-radius: 6px;
  background: linear-gradient(180deg, #5b636e 0%, #30353d 55%, #1a1d22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

/* status LED on the lock plate */
.shutter__lock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--electric-blue);
  box-shadow: 0 0 8px 2px rgba(var(--light-halo), 0.8);
  animation: shutter-led 2.4s ease-in-out infinite;
}

.shutter.is-unlocked .shutter__lock::after {
  animation: none;
  background: var(--light-core);
  box-shadow: 0 0 14px 4px rgba(var(--light-halo), 1);
}

/* --- Side guide rails ---------------------------------------- */
.shutter__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 4;
  background: linear-gradient(90deg, #050506 0%, #22262c 35%, #121418 65%, #030304 100%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
}

.shutter__rail--left {
  left: 0;
}

.shutter__rail--right {
  right: 0;
  transform: scaleX(-1);
}

/* --- Top roller housing -------------------------------------- */
.shutter__housing {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--housing-h);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--rail-w) + clamp(1rem, 3vw, 3rem));
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2a2f36 0%, #1a1d22 50%, #0e1013 88%, #3a4049 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.75);
  will-change: transform;
}

/* corner bolts */
.shutter__housing::before,
.shutter__housing::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #8c96a3 0%, #3b4149 45%, #121418 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.shutter__housing::before {
  left: calc(var(--rail-w) + 0.5rem);
}

.shutter__housing::after {
  right: calc(var(--rail-w) + 0.5rem);
}

.shutter__plate {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.85vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(200, 215, 230, 0.6);
  white-space: nowrap;
}

.shutter__plate img {
  width: clamp(22px, 2.4vw, 30px);
  height: clamp(22px, 2.4vw, 30px);
  object-fit: contain;
  /* same treatment as .nav__brand-logo: white mark, black drops out */
  filter: invert(1) brightness(2);
  mix-blend-mode: screen;
  clip-path: inset(3%);
  opacity: 0.9;
}

.shutter__plate strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: 0.28em;
  color: #e6edf3;
}

.shutter__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--electric-blue);
  box-shadow: 0 0 10px 2px rgba(0, 170, 255, 0.7);
  animation: shutter-led 1.8s ease-in-out infinite;
}

@media (max-width: 520px) {
  .shutter__plate-extra {
    display: none;
  }

  .shutter__housing {
    padding-inline: calc(var(--rail-w) + 1.5rem);
  }

  .shutter__tagline {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .shutter__tagline-text {
    margin-right: -0.22em;
  }

  .shutter__tagline i {
    display: none;
  }

  .shutter__eyebrow {
    letter-spacing: 0.3em;
    margin-right: -0.3em;
  }
}

/* --- Light passing through the gap --------------------------- */
/* Confined to the opening between the guide rails: light only
   escapes where the curtain is, never over the steel frame. */
.shutter__lights {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-w);
  right: var(--rail-w);
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

/* The lit strip visible under the curtain edge — brightest right at
   the edge, fading into the tunnel. Capped so a wide-open gap never
   paints a solid slab of light over the hero. */
.shutter__gap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--gap) - min(var(--gap), 9vh));
  height: min(var(--gap), 9vh);
  background: linear-gradient(
    180deg,
    rgba(234, 247, 255, 0.95) 0%,
    rgba(140, 215, 255, 0.55) 18%,
    rgba(var(--light-halo), 0.18) 60%,
    rgba(var(--light-halo), 0.05) 100%
  );
  mix-blend-mode: screen;
}

/* Wide bloom centred on the curtain edge */
.shutter__bloom {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 46vh;
  bottom: calc(var(--gap) - 23vh);
  background:
    radial-gradient(
      ellipse 38% 7% at 50% 50%,
      rgba(234, 247, 255, 0.85) 0%,
      rgba(234, 247, 255, 0) 100%
    ),
    radial-gradient(
      ellipse 60% 30% at 50% 50%,
      rgba(var(--light-halo), 0.42) 0%,
      rgba(var(--light-halo), 0.12) 45%,
      rgba(var(--light-halo), 0) 100%
    );
  opacity: min(1, calc(var(--glow) * 0.8));
  mix-blend-mode: screen;
}

/* Faint volumetric rays fanning out of the gap into the dusty air */
.shutter__haze {
  position: absolute;
  left: 0;
  right: 0;
  height: 60vh;
  bottom: var(--gap);
  background: repeating-conic-gradient(
    from 270deg at 50% 100%,
    rgba(var(--light-halo), 0) 0deg,
    rgba(var(--light-halo), 0.07) 3deg,
    rgba(var(--light-halo), 0) 7deg,
    rgba(var(--light-halo), 0) 11deg
  );
  -webkit-mask-image: radial-gradient(
    ellipse 55% 100% at 50% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 55% 100% at 50% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 75%
  );
  opacity: min(0.9, calc(var(--glow) * 0.55));
  mix-blend-mode: screen;
  filter: blur(6px);
}

.shutter__dust {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
}

/* --- "Scroll to open" prompt --------------------------------- */
.shutter__hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bar-h) + clamp(1.25rem, 5vh, 3rem));
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(220, 235, 248, 0.78);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

.shutter__hint:focus-visible {
  outline: 1px solid var(--electric-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.shutter__hint-text {
  margin-right: -0.4em;
}

.shutter__hint-mouse {
  position: relative;
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(220, 235, 248, 0.55);
  border-radius: 12px;
}

.shutter__hint-mouse::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--electric-blue);
  box-shadow: 0 0 6px rgba(0, 170, 255, 0.9);
  animation: shutter-wheel 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.shutter__hint-text--touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .shutter__hint-text--pointer {
    display: none;
  }

  .shutter__hint-text--touch {
    display: inline;
  }

  .shutter__hint-mouse {
    border-radius: 50%;
    width: 28px;
    height: 28px;
  }

  .shutter__hint-mouse::after {
    top: auto;
    bottom: 5px;
    animation-name: shutter-swipe;
  }
}

/* Visually hidden label for assistive tech */
.shutter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes shutter-led {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes shutter-wheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes shutter-swipe {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(-12px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shutter__lock::after,
  .shutter__status-dot,
  .shutter__hint-mouse::after {
    animation: none;
  }

  .shutter__sheen,
  .shutter__dust {
    display: none;
  }
}