/* ==========================================================================
   PhoneXpert24 — AWARD LAYER
   Film-grade polish across the whole page. Loaded LAST so it can refine.
   Everything here respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. SMOOTHER CINEMATIC EASING GLOBALLY ---------- */
:root{
  --e-cine: cubic-bezier(0.16, 1, 0.3, 1);        /* soft, expensive settle */
  --e-dramatic: cubic-bezier(0.19, 1, 0.22, 1);   /* long dramatic ease-out */
  --t-cine: 1s;
}

/* ---------- 2. CINEMATIC SECTION REVEAL (rack-focus + rise) ---------- */
/* richer than the base: slight scale + longer, film-like settle */
[data-reveal]{
  opacity:0;
  transform:translateY(38px) scale(.985);
  transition:opacity 1.1s var(--e-cine), transform 1.1s var(--e-cine), filter 1.1s var(--e-cine);
  will-change:opacity, transform;
}
[data-reveal].in{opacity:1;transform:none}

/* staggered children inside a revealed block feel choreographed */
[data-reveal-delay="1"]{transition-delay:.10s}
[data-reveal-delay="2"]{transition-delay:.20s}
[data-reveal-delay="3"]{transition-delay:.30s}
[data-reveal-delay="4"]{transition-delay:.40s}

/* ---------- 3. SECTION-ENTRANCE LIGHT SWEEP ---------- */
/* a soft horizontal light passes over major section headings once, on reveal */
.selector-head,.flow-head,.reviews-head,.final-in,.shop-copy{position:relative}
.selector-head h2,.flow-head h2,.reviews-head h2,.final-in h2,.shop-copy h2{
  position:relative;background-size:200% 100%;
}

/* ---------- 4. AMBIENT DEPTH ON DARK ACTS ---------- */
/* slow-drifting radial light so dark sections feel alive (like set lighting) */
.cinema,.reviews,.final.epic,.shop-teaser{position:relative;isolation:isolate}
.reviews::after,.final.epic::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 55% at 18% 20%, rgba(60,144,228,.16), transparent 70%),
    radial-gradient(38% 50% at 85% 80%, rgba(96,216,216,.12), transparent 72%);
  animation:ambientDrift 22s ease-in-out infinite alternate;
}
.reviews>*,.final.epic>*{position:relative;z-index:1}
@keyframes ambientDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  100%{transform:translate3d(2%, -2%, 0) scale(1.08);opacity:1}
}

/* ---------- 5. CINEMATIC HEADLINE GLOW ON ENTER ---------- */
.hero h1,.cinema-title,.final-in h2{
  text-wrap:balance;
}

/* ---------- 6. PREMIUM CARD LIFT (film-poster hover) ---------- */
.sel-card,.partner-card,.rev-card,.faq-item{
  transition:transform .55s var(--e-cine), box-shadow .55s var(--e-cine), border-color .4s ease;
}
.sel-card:hover{transform:translateY(-8px) scale(1.012)}

/* ---------- 7. SCROLL PROGRESS — refined glow bead ---------- */
.scroll-progress{height:2.5px;background:linear-gradient(90deg,var(--cyan-bright),var(--blue-bright),var(--accent))}
.scroll-progress::after{
  content:"";position:absolute;right:0;top:50%;width:10px;height:10px;border-radius:50%;
  transform:translate(50%,-50%);background:#fff;
  box-shadow:0 0 14px 3px var(--blue-bright), 0 0 4px 1px #fff;
}

/* ---------- 8. CINEMATIC "GRAIN-FREE" VELVET VIGNETTE ---------- */
/* a whisper-soft page vignette that deepens on dark acts — film frame feel */
.frame-vignette{
  position:fixed;inset:0;z-index:395;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 200px rgba(4,10,20,.5), inset 0 0 60px rgba(4,10,20,.25);
  transition:opacity 1s var(--e-cine);
}
body.act-dark .frame-vignette{opacity:.9}

/* ---------- 9. ELEGANT SECTION DIVIDER (hairline light) ---------- */
.reel::before,.partners::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,90%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.35),transparent);
}
.reel,.partners{position:relative}

/* ---------- 10. STAT REEL — cinematic count-up emphasis ---------- */
.reel-item .rn{letter-spacing:-.03em}
.reel-item{transition:transform .6s var(--e-cine)}
.reel-item:hover{transform:translateY(-4px)}

/* ---------- 11. FINAL CTA — epic close, breathing glow ---------- */
.final.epic{overflow:hidden}
.final.epic .final-in{position:relative;z-index:2}
.final-cta .btn--primary{position:relative;isolation:isolate}
.final-cta .btn--primary::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,var(--cyan-bright),var(--accent),var(--cyan-bright));
  background-size:200% 100%;opacity:.0;filter:blur(10px);
  transition:opacity .5s ease;animation:sheen 4s linear infinite;
}
.final-cta .btn--primary:hover::before{opacity:.8}
@keyframes sheen{to{background-position:200% 0}}

/* ---------- 12. SMOOTH MOMENTUM FEEL ---------- */
html{scroll-behavior:smooth}

/* ---------- reduced motion: strip all of it ---------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .reviews::after,.final.epic::after,.final-cta .btn--primary::before{animation:none}
  .frame-vignette{display:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   SECTION TRANSITIONS — seamless act-to-act atmosphere shifts
   Gradient "bridges" blend dark <-> light so sections flow continuously.
   Pure CSS gradients (GPU-cheap), no layout impact.
   ========================================================================== */

/* A transition bridge sits at a section boundary and blends two colors. */
.act-bridge{position:relative;height:clamp(100px,12vw,170px);width:100%;pointer-events:none;z-index:2;margin:0;border:0}
.act-bridge--to-dark{
  /* light surface -> deep cinema black – weiche mehrstufige Kurve */
  background:linear-gradient(180deg,
    var(--surface) 0%, #dfe7f0 18%, #7f93ab 40%, #33465f 62%, #101d2e 82%, #05080d 100%);
}
.act-bridge--from-dark{
  /* deep black -> light surface */
  background:linear-gradient(180deg,
    #05080d 0%, #101d2e 20%, #33465f 40%, #7f93ab 62%, #dfe7f0 84%, var(--surface) 100%);
}
.act-bridge--to-navy{
  background:linear-gradient(180deg,
    var(--surface) 0%, #cfdcec 20%, #7f97b8 38%, #375a86 58%, #012a4d 80%, var(--navy) 100%);
}
.act-bridge--from-navy{
  background:linear-gradient(180deg,
    var(--navy) 0%, #012a4d 22%, #375a86 45%, #8aa5c4 70%, #dbe6f2 88%, var(--surface) 100%);
}
/* hero(hell) -> cinema(schwarz): weicher Verlauf + zarte Aurora, die übergeleitet wird */
.act-bridge--hero-cinema{
  background:linear-gradient(180deg,
    #fefefe 0%, #eef4fb 16%, #b9cbe0 36%, #5f758f 56%, #1c3049 78%, #05080d 100%);
}
.act-bridge--hero-cinema::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 130% at 30% 0%, rgba(96,216,216,.12), transparent 62%),
             radial-gradient(60% 130% at 80% 0%, rgba(60,144,228,.12), transparent 62%);
}

/* Sections that now start/end with a bridge shouldn't double their own bg edge. */
.cinema, .reel, .reviews, .final.epic{ margin-block:0 }

/* A soft light-beam that sweeps across a boundary as it enters (GSAP-driven) */
.act-bridge .beam{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1200px,92%);height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.6),transparent);
  filter:blur(.5px);
}

@media (prefers-reduced-motion:reduce){
  .act-bridge .beam{display:none}
}

/* ==========================================================================
   REDUCED-MOTION FALLBACK for the pinned story
   When motion is reduced (or JS motion is off), the 340vh pinned chapter
   would only show panel 1. Instead, un-pin it and stack all panels so
   every step is readable as a normal section.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .story{height:auto !important}
  .story-sticky{position:static;height:auto;display:block;padding-block:clamp(48px,7vw,90px)}
  .story-panels{position:static;min-height:0;display:flex;flex-direction:column;gap:48px}
  .story-panel{position:static;opacity:1;transform:none;pointer-events:auto}
  .story-inner{grid-template-columns:1fr}
  .story-visual{display:none}       /* device flight is motion; hide the empty frame */
  .story-progress{display:none}
}

/* ==========================================================================
   MOBILE STORY — un-pin the 340vh chapter on phones.
   Pinning 340vh feels sluggish on touch; instead the panels flow as normal
   stacked content and fade in (handled by experience.js matchMedia mobile).
   ========================================================================== */
@media (max-width:760px){
  .story{height:auto !important}
  .story-sticky{position:static;height:auto;display:block;padding-block:clamp(40px,9vw,72px)}
  .story-inner{grid-template-columns:1fr;gap:8px}
  .story-panels{position:static;min-height:0;display:flex;flex-direction:column;gap:40px}
  .story-panel{position:static;opacity:1;transform:none;pointer-events:auto}
  .story-visual{display:none}            /* device 3D flight is desktop-only */
  .story-progress{display:none}
}

/* ==========================================================================
   FINAL CTA CLIMAX — accent line under the headline + deeper ambient glow
   ========================================================================== */
.final.epic .final-in{position:relative}
/* an accent line that draws in under the headline (scaleX via GSAP) */
.final-accent{display:block;width:min(180px,40%);height:2px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),var(--blue-bright),transparent);
  transform:scaleX(0);transform-origin:center;border-radius:2px}
/* intensify the ambient glow on the final act for a climactic feel */
.final.epic::after{
  content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:min(900px,90%);height:420px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(60,144,228,.16), transparent 70%);
  animation:finalPulse 6s ease-in-out infinite;
}
.final.epic .final-in{z-index:1}
@keyframes finalPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

@media (prefers-reduced-motion:reduce){
  .final-accent{transform:scaleX(1)}
  .final.epic::after{animation:none}
}