/* ==========================================================================
   Home & Away: Apple-style effects layer.
   Numbers (#1–#28) match the idea list. Logic lives in effects.js.
   html.fx-motion = GSAP loaded and the visitor allows motion.
   ========================================================================== */

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --angle: 360deg; } }

/* #7 Titanium shimmer: a slow sheen sweeps along every metal frame */
.phone--metal {
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%), var(--metal);
  background-size: 320% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 60% { background-position: 130% 0, 0 0; }
  100%    { background-position: -30% 0, 0 0; }
}

/* #1 #13 Phones get a back (camera + logo) so they can turn all the way round */
.phone--3d { transform-style: preserve-3d; }
.phone--3d .screen { backface-visibility: hidden; transform: translateZ(1px); }
.phone-back {
  position: absolute; inset: 0; border-radius: inherit;
  display: grid; place-items: center;
  transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden;
  background: radial-gradient(120% 80% at 30% 15%, rgba(255, 255, 255, .28), transparent 55%), var(--metal);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 24px rgba(0, 0, 0, .25);
}
.phone-back .cam {
  position: absolute; top: 4.5%; left: 7%; width: 40%; aspect-ratio: 1; border-radius: 26%;
  background:
    radial-gradient(circle at 28% 28%, #0d0d0f 0 15%, #3a3a3e 16% 19%, transparent 20%),
    radial-gradient(circle at 28% 72%, #0d0d0f 0 15%, #3a3a3e 16% 19%, transparent 20%),
    radial-gradient(circle at 72% 50%, #0d0d0f 0 15%, #3a3a3e 16% 19%, transparent 20%),
    rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.phone-back img { width: 24%; opacity: .92; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }

/* #15 Live Dynamic Island */
.screen.has-island::after { display: none; }
.island {
  position: absolute; z-index: 4; top: 1.8%; left: 50%; translate: -50% 0;
  width: 31%; height: 3.6%; padding: 0 4%;
  display: flex; align-items: center; gap: 6%;
  border-radius: 999px; background: #000; color: #fff; overflow: hidden;
  font-size: calc(var(--w, 280px) * .036); white-space: nowrap;
  transition: width .55s cubic-bezier(.3, 1.35, .5, 1), height .55s cubic-bezier(.3, 1.35, .5, 1), border-radius .55s;
}
.island > * { opacity: 0; transition: opacity .2s; }
.island.is-open { width: 90%; height: 9.5%; border-radius: calc(var(--w, 280px) * .08); }
.island.is-open > * { opacity: 1; transition-delay: .25s; }
.island-ico { flex: none; height: 62%; aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center; background: #2c2c2e; }
.island[data-app="flight"] .island-ico { background: #0a1630; }
.island-ico img { width: 72%; }
.island-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.island-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.island-text small { font-size: .82em; color: #a1a1a6; overflow: hidden; text-overflow: ellipsis; }

/* #16 iOS notifications that drop onto the sticky phone (desktop; .showcase-phone is already sticky = positioned) */
.notif-stack {
  display: none; position: absolute; top: 27%; left: 50%; translate: -50% 0; z-index: 5; /* below the Dynamic Island */
  width: min(300px, 90%); gap: 8px; pointer-events: none;
}
@media (min-width: 821px) { html.fx-motion .notif-stack { display: grid; } }
.notif {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px;
  background: rgba(245, 245, 247, .78); color: #1d1d1f; font-size: 12px; line-height: 1.3;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.notif-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #1d1d1f; }
.notif[data-app="flight"] .notif-ico { background: #0a1630; }
.notif-ico img { width: 72%; }
.notif-body { display: flex; flex-direction: column; min-width: 0; }
.notif-body b { font-weight: 600; }
.notif-body span { color: #6e6e73; }
.notif time { margin-left: auto; align-self: flex-start; font-size: 11px; color: #8e8e93; }

/* #10 Apple Intelligence glow around the Explore phone (on "Buyer matching") */
.explore-phone-wrap { position: relative; touch-action: pan-y; cursor: grab; }
.explore-phone-wrap.is-dragging { cursor: grabbing; }
.explore-phone-wrap .phone { position: relative; z-index: 1; }
.ai-glow {
  position: absolute; inset: -16px; z-index: 0; border-radius: 18% / 9.5%;
  background: conic-gradient(from var(--angle), #ff6b9a, #ffb057, #ffe169, #6bffb8, #6bb8ff, #b56bff, #ff6b9a);
  filter: blur(24px); opacity: 0; transition: opacity .7s ease;
  animation: spin 4s linear infinite;
}
.explore-phone-wrap:not(.is-ai) .ai-glow { animation-play-state: paused; }
.explore-phone-wrap.is-ai .ai-glow { opacity: .9; }

/* #9 Light that circles the main buttons and the bento hero tile */
.cta .btn, .footer-cta .btn, .compare-col .btn, .hscroll-card .btn { position: relative; isolation: isolate; }
.cta .btn::before, .footer-cta .btn::before, .compare-col .btn::before, .hscroll-card .btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--angle), #c6f21a, #4fb3ff, #b56bff, #c6f21a);
  animation: spin 4s linear infinite;
}
.tile--hero {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tile), var(--tile)) padding-box,
    conic-gradient(from var(--angle), transparent 0 55%, var(--accent) 72%, #b56bff 84%, transparent 100%) border-box;
  animation: spin 6s linear infinite;
}

/* #11 Film grain over everything (very faint) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* #12 Soft spotlight that follows the pointer on dark scenes */
.spotlight {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 60%);
}
body[data-scene="dark"] .spotlight, body[data-scene="flight"] .spotlight { opacity: 1; }

/* #8 Liquid-glass lens over the bento tiles */
.glass-lens {
  position: fixed; left: 0; top: 0; z-index: 45; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; pointer-events: none; opacity: 0; scale: .5; transition: opacity .3s, scale .35s cubic-bezier(.3, 1.4, .5, 1);
  backdrop-filter: blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.9) brightness(1.12) contrast(1.06);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .4), transparent 38%),
    radial-gradient(circle at 70% 82%, rgba(255, 255, 255, .14), transparent 45%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -10px 22px rgba(255, 255, 255, .14),
    inset 0 10px 18px rgba(0, 0, 0, .08), 0 22px 44px rgba(0, 0, 0, .2);
}
.glass-lens.is-on { opacity: 1; scale: 1; }

/* #27 Contextual cursor label (Play / Drag / Flip / Preview) */
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #1d1d1f;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  translate: -50% calc(-100% - 18px); opacity: 0; scale: .6; transition: opacity .2s, scale .25s cubic-bezier(.3, 1.4, .5, 1);
}
.cursor-tag.is-on { opacity: 1; scale: 1; }

/* #14 Magnetic buttons (JS sets `translate`, so hover `transform` still works) */
.btn { transition: transform .2s ease, filter .2s ease, translate .4s cubic-bezier(.3, 1.4, .5, 1); }
.film-play { transition: transform .25s ease, background-color .25s, translate .4s cubic-bezier(.3, 1.4, .5, 1); }
.reel-btn { transition: background-color .2s, translate .4s cubic-bezier(.3, 1.4, .5, 1); }

/* #19 Gradient that flows through the "&" */
.hero-title .amp {
  background-image: linear-gradient(120deg, #2fbf8f, #4fb3ff, #b56bff, #2fbf8f);
  background-size: 300% 100%;
  animation: flow 6s linear infinite;
}
@keyframes flow { to { background-position: 300% 0; } }

/* #20 Split-flap airport board */
.solari {
  display: flex; justify-content: center; gap: 6px; margin: 22px 0 4px;
  font: 700 clamp(22px, 3vw, 34px)/1 ui-monospace, "SF Mono", Menlo, monospace;
}
.solari .flap {
  position: relative; width: 1.15em; height: 1.5em; display: grid; place-items: center;
  border-radius: 6px; color: #f5f5f7; background: linear-gradient(#1c2d55 50%, #14223f 50%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), 0 4px 10px rgba(0, 0, 0, .35);
}
.solari .flap::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(0, 0, 0, .55); }
.solari .flap--gap { background: none; box-shadow: none; color: var(--accent); }
.solari .flap--gap::after { display: none; }

/* #21 Flip-board digits for the stats */
.stat-num.has-reels { background: none; color: inherit; }
.digit { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.digit-col { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); will-change: transform; }   /* own layer: the gradient digits are painted once, then only moved */
.digit-col span {
  height: 1em; line-height: 1;
  background: linear-gradient(120deg, #2fbf8f, var(--flight-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* #22 Headings rise word by word from behind a mask */
.mask-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mask-words .w > span { display: inline-block; }

/* #3 Text as a window: the film plays inside the letters */
.masktext-stage { position: relative; height: 100vh; overflow: hidden; background: #000; }
.masktext-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.masktext-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; }
.masktext-ink text { font-size: clamp(72px, 15vw, 230px); font-weight: 800; letter-spacing: -.055em; }

/* #2 Zoom-through word */
/* Renly is pulled up underneath the stage (negative margin), so when the zoom finishes and the stage fades,
   Renly is already in place instead of a full screen of empty cream scrolling past. */
.zoomthru { position: relative; z-index: 45; pointer-events: none; margin-bottom: -100vh; }
.pin-spacer:has(> .zoomthru) { pointer-events: none; }   /* its pin wrapper overlaps the top of Renly too: let clicks through */
.zoomthru-stage { height: 100vh; display: grid; place-items: center; overflow: hidden; background: #000; }
.zoomthru-group { text-align: center; }
.zoomthru-sub { margin-top: 18px; font-size: clamp(19px, 2.4vw, 28px); font-weight: 500; color: #86868b; }
.zoomthru-word {
  position: relative; white-space: nowrap; color: var(--renly-bg);
  font-size: clamp(110px, 26vw, 380px); font-weight: 800; letter-spacing: -.06em; line-height: .9;
}

/* #4 Horizontal scroll (native swipe on phones, pinned on desktop) */
.hscroll { padding: 20px 0 100px; overflow-x: auto; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-pinned { overflow: hidden; height: calc(100vh - 100px); display: flex; align-items: center; padding: 0; }
.hscroll-track {
  display: flex; align-items: center; gap: 56px; width: max-content;
  padding: 0 max(16px, (100vw - 1120px) / 2);
}
.hscroll-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hscroll-phone { --w: clamp(190px, 21vw, 270px); }
.hscroll-item figcaption { font-size: 17px; font-weight: 600; color: var(--muted); }
.hscroll-card { width: clamp(240px, 28vw, 380px); }
.hscroll-card h3 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.hscroll-card .btn { margin-top: 24px; }

/* #23 Curtain into Sky Saver */
.curtain-stage { position: relative; height: 100vh; overflow: hidden; }
.curtain-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: #fff;
  background: radial-gradient(80% 60% at 50% 100%, #173a6b, #0a1630 70%);
}
.curtain-logo { width: clamp(72px, 9vw, 110px); filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); }
.curtain-word { font-size: clamp(64px, 13vw, 180px); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.curtain-sub { font-size: clamp(19px, 2.4vw, 28px); font-weight: 500; color: #8ea3c7; }

/* #5 Frame-by-frame scroll sequence */
.seq-stage { position: relative; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.seq-canvas {
  width: min(1100px, 92vw, (100vh - 160px) * 16 / 9); height: auto; aspect-ratio: 16 / 9;
  border-radius: 28px; background: #0a1630; box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
}
.seq-caption {
  position: absolute; bottom: 6vh; left: 0; right: 0; text-align: center; color: #fff;
  font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em;
}

/* #6 Drag-to-compare split */
.split { --x: 50%; position: relative; aspect-ratio: 16 / 9; margin-bottom: 48px; border-radius: 28px; overflow: hidden; user-select: none; }
.split img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-b { clip-path: inset(0 0 0 var(--x)); }
.split-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .45); pointer-events: none; }
.split-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; font-weight: 700; color: #1d1d1f; background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.split input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.split:has(input:focus-visible) { outline: 2px solid var(--flight-accent); outline-offset: 4px; }
.split-label {
  position: absolute; top: 20px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none;
}
.split-label--a { left: 20px; }
.split-label--b { right: 20px; }

/* #17 Interactive seat map */
.tile--seats, .tile--pass { justify-content: flex-start; }
.seatmap { display: grid; grid-template-columns: repeat(3, 22px) 20px repeat(3, 22px); gap: 6px; margin-top: 16px; align-items: center; }
.seat {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(79, 179, 255, .24); transition: background-color .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
.seat:hover { background: rgba(79, 179, 255, .5); }
.seat[aria-pressed="true"] { background: var(--flight-accent); transform: scale(1.18); box-shadow: 0 0 0 3px rgba(79, 179, 255, .35); }
.seat:disabled { background: rgba(255, 255, 255, .08); cursor: not-allowed; }
.seat-aisle { font-size: 10px; text-align: center; color: var(--muted); }
.seat-pick { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* #18 Boarding pass that flips */
.pass { position: relative; width: 100%; height: 118px; margin-top: 16px; padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; font: inherit; color: inherit; }
.pass-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.3, .4, 1); }
.pass.is-flipped .pass-inner { transform: rotateY(180deg); }
.pass-face {
  position: absolute; inset: 0; padding: 14px 16px; border-radius: 16px; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  background: #f5f5f7; color: #0a1630; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.pass-back { transform: rotateY(180deg); background: #fff; }
.pass-route { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.pass-route span { font-size: .7em; color: var(--flight-accent-strong); }
.pass-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #5b6b8a; }
.barcode {
  height: 50px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #0a1630 0 2px, transparent 2px 4px, #0a1630 4px 5px, transparent 5px 8px, #0a1630 8px 11px, transparent 11px 13px);
}

/* #24 Scroll progress ring by the logo */
.nav-logo { display: inline-flex; align-items: center; gap: 8px; }
.progress-ring { width: 18px; height: 18px; rotate: -90deg; flex: none; }
.progress-ring circle { fill: none; stroke-width: 2.4; }
.progress-ring circle:first-child { stroke: color-mix(in srgb, var(--fg) 18%, transparent); }
.progress-ring-fill { stroke: var(--fg); stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: calc(50.27 * (1 - var(--p, 0))); }

/* #25 Team cards preview the maker's film on hover */
.member-media { position: relative; }
.member-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.member-film.is-ready { opacity: 1; }

/* #26 Easter egg plane */
.flyby { position: fixed; left: 0; top: 0; z-index: 80; width: 72px; height: 72px; fill: #fff; pointer-events: none; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45)); }

/* #28 Ambient light: the playing film's colour spills around the card */
@media (min-width: 821px) {
  .film-pin::before {
    content: ""; position: absolute; left: 50%; top: calc(50% + 40px); translate: -50% -50%;
    width: calc(var(--cw) * 1.1); aspect-ratio: 16 / 9; border-radius: 50%; pointer-events: none;
    background-color: var(--amb, rgba(198, 242, 26, .35)); filter: blur(90px); opacity: .6; will-change: transform;
    transition: background-color 1.2s ease;
  }
}

/* #1 Real 3D phone (phone3d.js) drawn over the sticky CSS phone, which stays as the fallback */
.phone3d { position: absolute; z-index: 1; pointer-events: none; }
.phone.is-3d { visibility: hidden; }
.phone.is-3d .island { visibility: visible; }

/* Mobile */
@media (max-width: 820px) {
  .hscroll-track { gap: 28px; }
  .seq-canvas { border-radius: 18px; width: min(92vw, (100vh - 220px) * 4 / 5); aspect-ratio: 4 / 5; }   /* portrait crop fills a phone screen */
  .zoomthru-word { font-size: 34vw; }
  /* a full-height black screen around one word is mostly empty on a tall phone: make it a black card instead */
  .zoomthru { margin-bottom: -64svh; }
  .zoomthru-stage { height: 64svh; margin: 0 16px; border-radius: 28px; }
  .split { border-radius: 18px; }
}

/* Reduced motion: keep the look, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .phone--metal, .ai-glow, .tile--hero, .hero-title .amp,
  .cta .btn::before, .footer-cta .btn::before, .compare-col .btn::before, .hscroll-card .btn::before { animation: none; }
  .island, .island > *, .pass-inner, .digit-col, .seat { transition: none; }
}