/* ==========================================================================
   HERO — Marine Inspection AI
   Layers (bottom → top):
     1. ocean background photo (stage)  — hero-bg.webp (5098×2904, all sizes)
     2. tagline + MARINE + INSPECTION AI (stage) ← behind the ship
     4. ship cutout PNG (stage)    ← on top, aligned over the bg ship (desktop only)
     5. glass CTA                  ← positioned against the hero (sky), not the photo
   All three ".mia-hero__stage" wrappers share identical geometry (the bg
   photo drawn like "object-fit: cover"), so the ship cutout sits pixel-
   perfect over the ship in the photo AND the lettering keeps its place
   relative to the ship on every screen shape — the whole scene scales as
   one picture; only the crop at the edges changes with the aspect ratio.
   Text positions are % of the stage, text sizes are % of the stage width
   (--mia-stage-w), never % of the viewport.
   Background image : 5098 × 2904
   Ship cutout PNG  : 1945 × 571, top-left at (1645, 1659) in the bg
                      → left 32.267%  top 57.128%  width 38.152%
   ========================================================================== */

.mia-hero {
  position: relative;
  width: 100%;
  height: 100vh;   /* fallback */
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #073763; /* deep ocean while the image loads */
  isolation: isolate;
  /* stage width = the bg photo shown as "cover" of the hero box
     (5098/2904 = 1.7555). Fallback uses the viewport; the container-unit
     version below measures the hero box itself (matters when min-height
     kicks in on very short windows). */
  --mia-stage-w: max(100vw, 175.55vh);
  --mia-stage-w: max(100vw, 175.55svh);
  container-type: size;
}

@supports (width: 1cqw) {
  .mia-hero { --mia-stage-w: max(100cqw, 175.55cqh); }
}

/* ---------------- stages (shared geometry) ---------------- */

/* sized exactly like the bg photo shown as "cover".
   Anchored at 60% (not dead centre): on wide/short windows the photo is
   taller than the hero and gets cropped — biasing the crop toward the sky
   keeps the INSPECTION AI line (low in the picture) in view. */
.mia-hero__stage {
  position: absolute;
  top: 60%;
  left: 50%;
  width: var(--mia-stage-w);
  aspect-ratio: 5098 / 2904;
  transform: translate(-50%, -60%);
  pointer-events: none;
  will-change: transform;
}

/* scroll parallax (vars set by hero.js, 0 when idle / reduced motion):
   the photo and the ship cutout share --mia-par-scene so they never drift
   apart; the lettering runs on its own slower var, so it slides relative
   to the ship and gives the scene depth */
.mia-hero__stage--bg,
.mia-hero__stage--ship {
  transform: translate(-50%, -60%) translateY(var(--mia-par-scene, 0px));
}

.mia-hero__stage--text {
  transform: translate(-50%, -60%) translateY(var(--mia-par-text, 0px));
}

.mia-hero__stage--bg   { z-index: 1; }
.mia-hero__stage--text { z-index: 2; }
.mia-hero__stage--ship { z-index: 4; }

.mia-hero__bg,
.mia-hero__ship { max-width: none; }   /* cancel the global img cap */

.mia-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  animation: mia-hero-fade 3s ease both;
}

.mia-hero__ship {
  position: absolute;
  left: 32.267%;
  top: 57.128%;
  width: 38.152%;
  height: auto;
  display: block;
  user-select: none;
  animation: mia-hero-fade 3s ease both;
}

/* ---------------- glass CTA (in the sky, above the tagline) ---------------- */

.mia-hero__cta-wrap {
  position: absolute;
  z-index: 5;                      /* above both stages so it stays clickable */
  left: 0;
  right: 0;
  top: 19%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 1.6vw, 26px);
  pointer-events: none;            /* only the buttons themselves take clicks */
  animation: mia-hero-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 4.3s both;
}

/* light one-liner above the buttons */
.mia-hero__cta-lead {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 24px);
  letter-spacing: 0.02em;
  display: none;                   /* desktop shows the headline sentence instead */
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: rgba(7, 55, 99, 0.78);
}

/* desktop (header breakpoint and up): the sign-up / log-in pills live in the
   header bar, so the whole CTA block — sentence + buttons — leaves the hero */
@media (min-width: 881px) {
  .mia-hero__cta-wrap { display: none; }
}

/* headline sentence (phone tweaks sizes below) */
.mia-hero__cta-title {
  display: block;
  margin: 0;
  max-width: none;
  white-space: nowrap;             /* single line on desktop */
  /* same type treatment as the old "Inspect smarter. Sail safer." lead */
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(7, 55, 99, 0.78);
  text-shadow: none;
}
.mia-hero__cta-title strong { font-weight: 600; color: inherit; }

.mia-hero__cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
}

.mia-hero__cta {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 2.1em;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.01em;
  color: #073763;
  /* frosted glass */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 55%,
    rgba(255, 255, 255, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              background 0.35s ease;
}

/* sheen that sweeps across on hover */
.mia-hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.mia-hero__cta:hover,
.mia-hero__cta:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.55) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.mia-hero__cta:hover::before,
.mia-hero__cta:focus-visible::before {
  transform: translateX(110%);
}

.mia-hero__cta:active { transform: translateY(0); }

.mia-hero__cta-text { position: relative; }

/* ----- Sign Up: solid ocean-gradient pill — same recipe as the "Book Now"
   button in the customize section (.mia-custom__btn) ----- */

.mia-hero__cta--signup {
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(120deg, #2b5f8f 0%, #4a90c2 60%, #56b6e8 100%);
  /* solid fill — no frosted blur or glass border on this one */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow:
    0 12px 30px rgba(43, 95, 143, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mia-hero__cta--signup::before {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
}

.mia-hero__cta--signup:hover,
.mia-hero__cta--signup:focus-visible {
  background: linear-gradient(120deg, #2b5f8f 0%, #4a90c2 60%, #56b6e8 100%);
  box-shadow:
    0 18px 40px rgba(43, 95, 143, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mia-hero__cta--signup:active {
  box-shadow:
    0 8px 22px rgba(43, 95, 143, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------------- tagline (above MARINE) — inside the text stage ---------------- */

.mia-hero__tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 47.5%;
  transform: translateY(-100%);
  margin: 0;
  text-align: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  /* 1.6% of the stage width; the vw cap only bites on tall/narrow windows
     where the stage is wider than the screen */
  font-size: max(11px, min(calc(var(--mia-stage-w) * 0.016), 2vw));
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* balances letter-spacing so the line stays centred */
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 22px rgba(2, 24, 48, 0.4);
  pointer-events: none;
  animation: mia-hero-fade 1.1s ease 3.4s both;
}

/* ---------------- MARINE (behind the ship) — inside the text stage ---------------- */

.mia-hero__marine {
  position: absolute;
  left: 0;
  right: 0;
  /* letters' lower edge sits just above the ship's waterline
     (ship cutout spans 57.1% → 76.8% of the stage) */
  top: 73%;
  transform: translateY(-100%);
  margin: 0;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

/* the whole word flies in from deep inside the scene (small, faint,
   slightly blurred) and decelerates smoothly into place */
.mia-hero__marine-text {
  display: inline-block;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  /* 13% of the stage width — scales with the ship, not the window */
  font-size: max(48px, min(calc(var(--mia-stage-w) * 0.13), 16vw));
  white-space: nowrap;
  animation: mia-hero-zoom 3s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
  will-change: transform, opacity, filter;
}

/* each letter carries its own gradient.
   Explicit margins (not letter-spacing) separate the letter boxes —
   browsers don't apply letter-spacing across inline-block boundaries
   consistently, and margins keep the word exactly centred */
.mia-hero__marine-letter {
  display: inline-block;
  margin-right: 0.2em;
  /* white at the top, fading out toward the bottom, like the design */
  background: linear-gradient(
    180deg,
    #ffffff 18%,
    rgba(255, 255, 255, 0.72) 58%,
    rgba(255, 255, 255, 0.28) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mia-hero__marine-letter:last-child { margin-right: 0; }

/* ---------------- INSPECTION AI (below the ship) — inside the text stage ---------------- */

.mia-hero__lower {
  position: absolute;
  left: 0;
  right: 0;
  top: 79.5%;
  display: flex;
  justify-content: center;
  gap: 2em;
  pointer-events: none;
}

.mia-hero__inspection {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: max(14px, min(calc(var(--mia-stage-w) * 0.024), 3vw));
  letter-spacing: 0.5em;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 26px rgba(2, 24, 48, 0.45);
  animation: mia-hero-fade 1.1s ease 3.7s both;
}

/* AI fades in a beat after INSPECTION */
.mia-hero__inspection--ai {
  animation-delay: 4s;
}

/* ---------------- entrance animations ---------------- */

/* MARINE flies in from behind the viewer — it appears huge, right in the
   user's face, then recedes and gently stops in front, on the scene */
@keyframes mia-hero-zoom {
  0%   { opacity: 0; transform: scale(3.4);  filter: blur(14px); }
  30%  { opacity: 1;                         filter: blur(3px); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@keyframes mia-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* glass CTA drifts up into place after the headline settles */
@keyframes mia-hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mia-hero__bg,
  .mia-hero__ship,
  .mia-hero__marine-text,
  .mia-hero__tagline,
  .mia-hero__cta-wrap,
  .mia-hero__inspection { animation: none; }

  .mia-hero__cta,
  .mia-hero__cta::before { transition: none; }
}

/* ==========================================================================
   MOBILE / PORTRAIT — the bg photo covers the viewport (the ship sits at its
   centre, so the portrait crop keeps it in view); the cutout layer is hidden.
   Also applies to portrait tablets, where the desktop stage geometry would
   zoom the photo far too large.
   ========================================================================== */

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {

  .mia-hero {
    min-height: 640px;
    /* sky matched to the phone photo's top edge — a fallback for the sliver
       that can show while the photo loads */
    background: linear-gradient(90deg, #5b90b4 0%, #51a5cf 100%);
  }

  /* background (and the text stage): plain full-size boxes — on phones the
     lettering is laid out against the screen, not the photo */
  .mia-hero__stage--bg,
  .mia-hero__stage--text {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  /* parallax still applies — same vars, minus the desktop centring shift */
  .mia-hero__stage--bg   { transform: translateY(var(--mia-par-scene, 0px)); }
  .mia-hero__stage--text { transform: translateY(var(--mia-par-text, 0px)); }

  /* the phone photo is a portrait aerial of the ship — it fills the whole
     hero edge-to-edge, anchored to the bottom so the ship stays in frame */
  .mia-hero__bg {
    object-fit: cover;
    object-position: center bottom;
  }

  /* soft shade over the lower third so the white MARINE / INSPECTION AI
     lettering stays crisp over the ship's containers */
  .mia-hero__stage--bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(3, 18, 38, 0.62) 0%,
      rgba(3, 18, 38, 0.3) 22%,
      rgba(3, 18, 38, 0) 46%
    );
  }

  /* the bg photo already shows the ship — no cutout layer */
  .mia-hero__stage--ship { display: none; }

  /* tagline — not part of the phone design */
  .mia-hero__tagline { display: none; }

  /* CTA block — sits in the sky, clear of the header; nudged down so the
     headline + buttons breathe below the bar */
  .mia-hero__cta-wrap {
    top: 20%;
    gap: 10px;
    padding: 0 24px;
  }

  .mia-hero__cta-lead {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(2, 24, 48, 0.45);
  }

  /* white, compact headline — two short lines, buttons tucked right under */
  .mia-hero__cta-title {
    display: block;
    margin: 0;
    max-width: 26ch;
    white-space: normal;           /* wraps again on phones */
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(2, 24, 48, 0.5), 0 2px 14px rgba(2, 24, 48, 0.35);
  }

  .mia-hero__cta-title strong {
    font-weight: 700;
    color: #ffffff;
  }

  .mia-hero__cta-row { margin-top: 2px; }

  .mia-hero__cta {
    font-size: 15px;
    padding: 0.85em 1.9em;
  }

  /* MARINE — big, wide tracking, sits on the water below the ship */
  .mia-hero__marine {
    top: 82.5%;
    transform: translateY(-100%);
  }

  .mia-hero__marine-text {
    font-size: 14.8vw;
  }

  .mia-hero__marine-letter { margin-right: 0.3em; }
  .mia-hero__marine-letter:last-child { margin-right: 0; }

  /* INSPECTION AI — one centred line under MARINE */
  .mia-hero__lower {
    top: 86%;
    gap: 1.2em;
  }

  .mia-hero__inspection {
    font-size: 5.2vw;
    letter-spacing: 0.24em;
  }

  .mia-hero__inspection--ai { animation-delay: 4s; }
}