/* ============================================================
   HERO V3 — full-bleed bolid → centered mockup scroll morph
   GSAP ScrollTrigger pin+scrub. Loaded after hero-v2.css.
   Class names scoped to .morph / .mock-* — no conflict with .hero.
   ============================================================ */

/* Hero gives scroll distance for the morph. Stage pins for ~70vh. */
.morph {
  position: relative;
  height: 170vh;
  background: #000;
}
.morph::before { content: none !important; display: none !important; }

.morph__stage {
  position: sticky;
  top: 0;
  width: 100vw;
  /* dvh = dynamic viewport height — matches visible area on iOS Safari
     so mockup centred at top:50% lines up with visible centre instead
     of getting pushed below by browser chrome (causing a black gap at
     top above the nav). Falls back to 100vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* Mockup container — centered, content width in FINAL state.
   box-shadow set via JS only at end of morph (scale ~4× would
   create a giant blurred halo otherwise). will-change + backface
   hint better GPU compositing during the scale animation. */
.morph__mockup {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1200px, 90vw);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
  z-index: 1;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.morph__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Browser chrome — overlays viewport top, hidden initially */
.morph__chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #121212;
  border-bottom: 1px solid rgba(244, 244, 237, 0.08);
}
.morph__dots { display: flex; gap: 6px; }
.morph__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(244, 244, 237, 0.18);
}
.morph__url {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(244, 244, 237, 0.45);
  background: rgba(244, 244, 237, 0.05);
  padding: 6px 12px;
  border-radius: 6px;
}
.morph__url-mark { color: var(--accent); margin-right: 6px; }

/* Two bolid images cross-fade during morph.
   top: 1px to avoid a 1px hairline artifact where the bolid edge
   meets the chrome bar bottom border. */
.morph__bolid {
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 1px);
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.morph__bolid--final { opacity: 0; }

/* Stage-level flashlight: dims viewport, cursor mask cuts a transparent
   hole. Sibling of mockup, no transform — coords map 1:1 with viewport. */
.morph__flashlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 340px at var(--cursor-x, 50%) var(--cursor-y, 50%),
    transparent 0%, transparent 28%, black 78%, black 100%);
          mask-image: radial-gradient(circle 340px at var(--cursor-x, 50%) var(--cursor-y, 50%),
    transparent 0%, transparent 28%, black 78%, black 100%);
}
.morph__stage:not(.has-cursor) .morph__flashlight {
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
  -webkit-mask-image: none;
          mask-image: none;
}

/* Mock content lives over the LIGHT studio bg of the final bolid.
   Palette flips to dark text; lime accents pop on light. */
.morph__mock-content {
  position: absolute;
  inset: 44px 0 0 0;
  z-index: 4;
  padding: clamp(18px, 3vw, 36px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(12px, 2vw, 20px);
  color: var(--bg-dark);
}
.mock-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-dark);
}
.mock-nav__brand { white-space: nowrap; }
.mock-nav__menu {
  display: flex;
  gap: clamp(12px, 2.2vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(10, 10, 10, 0.9);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mock-nav__menu li { white-space: nowrap; }
.mock-nav__cta {
  background: var(--accent);
  color: var(--bg-dark);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  white-space: nowrap;
}
.mock-hero { align-self: center; max-width: 65%; }
.mock-hero__h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.5vw, 2.85rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
  color: var(--bg-dark);
}
.mock-hero__h1-em { color: var(--accent); }
.mock-hero__sub {
  font-size: clamp(0.65rem, 1vw, 0.9rem);
  color: rgba(10, 10, 10, 0.8);
  font-weight: 500;
  max-width: 42%;
  margin: 0 0 18px;
  line-height: 1.5;
  text-wrap: balance;
}
.mock-hero__btn {
  display: inline-block;
  background: var(--bg-dark);
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  padding: 9px 16px;
  border-radius: 6px;
}
.mock-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.5vw, 16px);
  padding-top: 12px;
  border-top: 1px solid rgba(10, 10, 10, 0.18);
}
.mock-metric { display: flex; flex-direction: column; }
.mock-metric__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  color: var(--bg-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.mock-metric__label {
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  color: rgba(10, 10, 10, 0.9);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

/* ---- Hero text overlay (initial state) ---- */
.morph__text {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(80px, 12vh, 140px) var(--space-6) clamp(40px, 6vh, 80px);
  text-align: center;
  pointer-events: none;
}
.morph__text-top,
.morph__text-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.morph__text > * > * { pointer-events: auto; }

.morph__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(244, 244, 237, 0.18);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: var(--text-sm);
  color: rgba(244, 244, 237, 0.85);
  text-decoration: none;
}
.morph__pill-tag {
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.morph__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.morph__title-accent {
  background: linear-gradient(120deg, var(--accent) 0%, #e9ff66 50%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.morph__sub {
  font-size: var(--text-lg);
  color: rgba(244, 244, 237, 0.85);
  max-width: 50ch;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  text-wrap: balance;
}

/* Counter inside trust line (was a standalone proof badge — now folded
   into the trust line as the first item, just before "Faktura VAT") */
.morph__trust .morph__proof-num {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

/* Strikethrough on the anchor price in the promo pill */
.morph__pill-strike {
  color: rgba(244, 244, 237, 0.45);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-right: 4px;
  font-weight: 500;
}

.morph__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}
.morph .btn--primary {
  background: linear-gradient(110deg, var(--accent) 0%, #e9ff66 50%, var(--accent) 100%);
  background-size: 200% auto;
  animation: hv2-cta-shift 3.5s var(--ease-lando) infinite;
}
.morph .btn--primary svg {
  transition: transform var(--duration-fast) var(--ease-lando);
}
.morph .btn--primary:hover svg { transform: translateX(4px); }

/* Warm-light "flashlight" cursor (mix-blend screen = additive) */
.morph__cursor {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 235, 200, 0.07) 0%,
    rgba(255, 220, 160, 0.025) 35%,
    transparent 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  z-index: 10;
  mix-blend-mode: screen;
}

.morph__trust {
  font-size: var(--text-sm);
  color: rgba(244, 244, 237, 0.55);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Float card — appears at end of morph. z-index 10 so it sits ABOVE
   chrome (5), mock-content (4), flashlight (4). Anchored at 40%
   from mockup top, right edge — overlay on the bolid image. */
.morph__float-card {
  position: absolute;
  top: 40%;
  right: 8%;
  z-index: 10;
  background: rgba(20, 24, 26, 0.92);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 244, 237, 0.14);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: rotate(3deg);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.morph__float-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  display: grid; place-items: center;
  font-weight: 900;
}
.morph__float-text {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--text-on-dark);
}
.morph__float-text strong {
  color: var(--accent);
  display: block;
}

/* ============================================================
   MOBILE / REDUCED-MOTION FALLBACK — static stacked layout
   ============================================================ */
/* ============================================================
   Make subsequent section seamless with the black morph hero —
   who-strip flips to #000 (no visible cut), mechanism glow goes
   warm cream/amber (not lime) and is allowed to bleed upward into
   who-strip (overflow visible).
   ============================================================ */
.who-strip {
  background: #000 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  position: relative;
  /* align-items: center removed for now — content sits at natural
     padding-top position. Vertical centering can come back later
     if needed. */
}

/* mechanism overflow + warm glow color now set directly in hero-v2.css */

/* ============================================================
   MOBILE — morph animation RUNS, but chrome/mock content/float
   card / cursor / flashlight are hidden (would be cramped at
   ~375px). Mockup proportions tightened (4:3 instead of 16:9)
   so the bolid car body fits the portrait viewport better.
   ============================================================ */
@media (max-width: 720px) {
  /* iOS Safari: dvh recalculates when address bar hides mid-scroll,
     causing pin offset to shift and a one-frame "klatka" jump in the
     scrub timeline. svh = small viewport (address bar visible) and
     stays constant during scroll. Slightly more vertical space when
     address bar collapses, but smooth scrub. */
  .morph__stage { height: 100svh; }

  /* Hide cursor + flashlight (touch device, no fine pointer).
     Float card stays visible — repositioned below to bottom band. */
  .morph__cursor,
  .morph__flashlight { display: none !important; }
  /* Mobile float card: float-card is INSIDE mockup, and JS scales mockup
     by ~1.7x (cover-fit) initially, then 1x at end. bottom: 16% × 1.7x
     ≈ 27% from viewport bottom at initial state — clears trust line
     (~10-15% from bottom) and sits under bolid car. */
  .morph__float-card {
    top: auto;
    right: var(--space-5);
    bottom: 16%;
    left: auto;
  }

  /* Mobile mockup uses 4:5 portrait — matches the bolid-portrait-*
     image pair (3712×4608). Bolid fits without aggressive side-crop. */
  .morph__mockup {
    width: min(540px, 88vw);
    aspect-ratio: 4 / 5;
  }
  /* Pull trust line further below CTAs */
  .morph__trust { margin-top: var(--space-4); }
  /* Override the desktop 1px-hairline fix — on mobile it leaves a
     visible gap; bolid fills full mockup height. */
  .morph__bolid { top: 0; height: 100%; object-position: center center; }
  /* picture wrapper: invisible in layout, img inside positions itself */
  .morph__viewport picture { display: contents; }
  .morph__bolid { object-position: center 60%; }
  .morph__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .morph__sub { font-size: var(--text-base); }
  .morph__pill { font-size: 0.7rem; }
  .morph__text {
    /* Tight top padding + smaller internal gap so H1 + sub clear the bolid.
       Mobile bolid sits in lower ~50% of viewport — text-top must fit above. */
    padding: clamp(48px, 8vh, 88px) var(--space-5) clamp(32px, 6vh, 64px);
  }
  /* Main page only: fixed nav (v2.css .nav) covers ~80px on mobile, push
     pill below so it doesn't overlap logo/hamburger. Oferta has position:
     relative nav so its pill already clears nav naturally. */
  body:not(.oferta-body) .morph__text {
    padding-top: clamp(80px, 13vh, 116px);
  }
  .morph__text-top { gap: var(--space-4); }
  .morph__title { margin-bottom: 0; }
  .morph__sub { margin: 0; }
  /* Push the bolid slightly lower in the mockup so its hood doesn't
     reach up into the sub line. */
  .morph__bolid { object-position: center 75%; }

  /* Smaller chrome bar on mobile */
  .morph__chrome { height: 36px; padding: 0 12px; }
  .morph__url { font-size: 0.6rem; padding: 4px 8px; }

  /* Mock content fits in ~344×220 box: drop menu items, sub, btn —
     keep brand + CTA, h1, metrics. */
  .morph__mock-content {
    inset: 36px 0 0 0;
    padding: clamp(10px, 2.5vw, 16px);
    gap: clamp(6px, 1.5vw, 12px);
  }
  .mock-nav {
    font-size: 0.6rem;
    gap: 8px;
  }
  .mock-nav__menu { display: none !important; }
  .mock-nav__cta { padding: 4px 8px; font-size: 0.55rem; }
  /* h1 anchored to TOP of mock-hero row (not vertically centred) */
  .mock-hero {
    align-self: start !important;
    padding-top: 6px;
  }
  .mock-hero__h1 {
    font-size: clamp(0.95rem, 4vw, 1.25rem) !important;
    max-width: 100%;
    margin-bottom: 8px;
  }
  /* Subheading: visible on mobile too, full width to fit in 1-2 lines
     (was max-width 42% from base rule = 4 lines on iPhone-sized mockup). */
  .mock-hero__sub {
    display: block !important;
    max-width: 92%;
    margin: 0 auto 6px;
    font-size: 0.65rem !important;
  }
  /* CTA button stays visible — small and tucked under h1 */
  .mock-hero__btn {
    font-size: 0.6rem;
    padding: 6px 10px;
  }
  .mock-metrics {
    gap: 4px;
    padding-top: 6px;
  }
  .mock-metric__num { font-size: 0.85rem !important; }
  .mock-metric__label {
    font-size: 0.5rem !important;
    margin-top: 2px;
    letter-spacing: 0.05em;
  }
}

/* ============================================================
   REDUCED-MOTION — full static stack (animation skipped via JS):
   text-top → bolid image → text-bottom.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .morph { height: auto; }
  .morph__stage {
    position: relative;
    height: auto;
    min-height: auto;
    width: 100%;
    padding: var(--space-12) var(--space-4) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    overflow: visible;
    isolation: auto;
  }
  .morph__text {
    position: relative;
    inset: auto;
    padding: 0;
    order: 1;
    justify-content: flex-start;
    gap: var(--space-8);
    text-align: center;
  }
  .morph__text-top,
  .morph__text-bottom { width: 100%; gap: var(--space-5); }
  .morph__mockup {
    position: relative;
    top: auto; left: auto;
    transform: none !important;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    opacity: 1 !important;
    order: 2;
    aspect-ratio: 16 / 10;
  }
  /* Mobile: portrait aspect — 16:10 was way too horizontal on iPhone-sized
     viewports (375px wide → only ~234px tall, looked like a thin band).
     Float-card stays inside mockup (HTML), so position:absolute targets
     mockup, not stage. bottom: 20% places it in the lower quarter of the
     mockup (~3/4 down the image). */
  @media (max-width: 720px) {
    .morph__mockup { aspect-ratio: 4 / 5; }
    .morph__float-card {
      position: absolute;
      top: auto; right: auto; bottom: 20%; left: 50%;
      transform: translateX(-50%) rotate(-3deg);
      align-self: auto;
      margin-top: 0;
      order: unset;
    }
  }
  /* Decorative cursor + flashlight: hidden (no animation = no purpose).
     Chrome + mock-content + float-card stay VISIBLE so reduce-motion
     users see the full website preview with the trust badge. */
  .morph__flashlight,
  .morph__cursor { display: none !important; }
  /* Float card default opacity is 0 (animated to 1 by GSAP). For reduce-
     motion show statically. */
  .morph__float-card { opacity: 1 !important; }
  .morph__bolid--initial { opacity: 0 !important; }
  .morph__bolid--final { opacity: 1 !important; }
  .morph__pill { margin: 0 auto; }
}