/* ==========================================================================
   "Portal" hero — homepage only (loaded by index.html only)
   The first scroll intent plays the frame sequence on <canvas> (assets/js/scroll-portal.js);
   text layers are paused CSS animations whose currentTime follows the same playback progress.
   ========================================================================== */
.hero.portal{
  height:100vh;height:100lvh;min-height:0;display:block;place-items:normal;overflow:hidden;text-align:center;
  background:var(--night);
}
.portal-stage{position:relative;width:100%;height:100vh;height:100lvh;overflow:hidden;isolation:isolate;contain:paint}

/* Media: poster → (optional) video fallback → canvas frames */
.portal-media{position:absolute;inset:0;z-index:-3;transform:scale(var(--pz,1));transform-origin:50% 46%;will-change:transform;
  background:#1a1424 url("../lotus-poster.jpg") center/cover no-repeat}
.portal-media video,.portal-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portal-media video{opacity:0;transition:opacity 1.2s var(--ease)}
.portal-media video.on{opacity:1}
.portal-media canvas{opacity:0;transition:opacity .9s var(--ease)}
.portal-media canvas.ready{opacity:1}

/* Atmosphere */
.portal-vignette{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(13,19,40,.55) 85%,rgba(13,19,40,.85) 100%),
    linear-gradient(180deg,rgba(13,19,40,.45) 0%,transparent 22%,transparent 72%,rgba(13,19,40,.55) 100%)}
.portal-glow{position:absolute;inset:-10%;z-index:-2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(38% 42% at 50% 47%,rgba(255,226,170,.85),rgba(241,194,125,.35) 40%,transparent 70%)}
.portal-night{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(13,19,40,0) 0%,rgba(13,19,40,.6) 45%,var(--night) 100%)}
.portal .particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Intro (title) */
.portal .hero-content{position:absolute;inset:0 0 var(--ui-gap,0px) 0;margin:auto;height:max-content;max-width:960px;padding:6rem 6vw 4rem;will-change:opacity,transform,filter}

/* Chapters */
.portal-chapter{position:absolute;z-index:3;left:50%;width:min(880px,88vw);translate:-50% 0;opacity:0;pointer-events:none;will-change:opacity,transform,filter}
.portal-chapter.low{bottom:calc(clamp(4.5rem,13vh,9rem) + var(--ui-gap,0px))}
.portal-chapter.mid{top:calc(50% - var(--ui-gap,0px) / 2);translate:-50% -50%}
.portal-chapter .eyebrow{color:#ffe2b8;text-shadow:0 1px 12px rgba(13,19,40,.9);margin-bottom:.8rem}
.portal-chapter h2{font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.08;color:var(--cream);text-shadow:0 2px 34px rgba(13,19,40,.85),0 0 60px rgba(13,19,40,.5)}
.portal-chapter h2 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:#ffd9a8}
.portal-chapter p.sub{margin:1rem auto 0;max-width:620px;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--cream);text-shadow:0 1px 18px rgba(13,19,40,.9)}
.portal-chapter .btn{margin-top:1.6rem}
.portal-end .portal-chapter.last,.portal-end .portal-chapter.last .btn{pointer-events:auto}
.portal-in .hero-content{pointer-events:none}
.portal-chapter::before{content:"";position:absolute;inset:-18% -8%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(13,19,40,.55),rgba(13,19,40,.25) 60%,transparent);filter:blur(18px)}

/* Progress rail */
.portal-rail{position:absolute;right:clamp(14px,2.4vw,34px);top:50%;height:min(36vh,280px);width:1px;translate:0 -50%;background:rgba(251,241,226,.18);z-index:3}
.portal-rail i{position:absolute;inset:0;background:linear-gradient(180deg,var(--gold),var(--pink));transform-origin:top;transform:scaleY(var(--pp,0))}
.portal .scroll-hint{z-index:3}

/* ---- Keyframes (paused; JS sets currentTime from playback progress) ---- */
@keyframes portal-intro-out{
  0%{opacity:1;transform:none;filter:blur(0)}
  100%{opacity:0;transform:translateY(-6vh) scale(1.12);filter:blur(14px)}
}
@keyframes portal-chapter{
  0%{opacity:0;transform:translateY(5vh) scale(.94);filter:blur(14px);letter-spacing:.04em}
  28%,68%{opacity:1;transform:none;filter:blur(0);letter-spacing:.01em}
  100%{opacity:0;transform:translateY(-4vh) scale(1.08);filter:blur(12px)}
}
@keyframes portal-chapter-last{
  0%{opacity:0;transform:translateY(5vh) scale(.94);filter:blur(14px)}
  40%,100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes portal-glow{0%{opacity:0}45%{opacity:.75}60%{opacity:.9}100%{opacity:0}}
@keyframes portal-fade{0%{opacity:0}100%{opacity:1}}
@keyframes portal-hint{0%{opacity:1}100%{opacity:0}}

/* Default: animations exist but are paused; JS sets currentTime (fallback path). */
.portal [data-pa]{animation-duration:1000ms;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused}
.portal .hero-content{animation-name:portal-intro-out}
.portal-chapter{animation-name:portal-chapter}
.portal-chapter.last{animation-name:portal-chapter-last}
.portal-glow{animation-name:portal-glow}
.portal-night{animation-name:portal-fade}
.portal .scroll-hint{animation-name:portal-hint}

/* Playback: page held at the top while the intro plays (wheel/touch/keys are absorbed by JS too) */
html{scrollbar-gutter:stable}
html.portal-lock,html.portal-lock body{overflow:hidden;overscroll-behavior:none}
.portal-in .hero-content{visibility:hidden}
.portal-chapter.last{visibility:hidden}
.portal-end .portal-chapter.last{visibility:visible}
.portal-done .portal-rail{opacity:0;transition:opacity .8s var(--ease)}
.portal-skip{position:absolute;z-index:4;right:clamp(14px,2.4vw,34px);bottom:calc(clamp(1.2rem,4vh,2.2rem) + var(--ui-gap,0px));
  font:500 .72rem/1 var(--sans,Inter,system-ui,sans-serif);letter-spacing:.22em;text-transform:uppercase;color:rgba(251,241,226,.72);
  background:rgba(13,19,40,.28);border:1px solid rgba(251,241,226,.22);border-radius:999px;padding:.7rem 1.1rem .7rem 1.2rem;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;animation:portal-skip-in .8s 1.2s var(--ease) forwards;transition:color .3s,border-color .3s}
.portal-skip::after{content:" \203A";letter-spacing:0}
.portal-skip:hover,.portal-skip:focus-visible{color:var(--cream);border-color:var(--gold)}
.portal-skip[hidden]{display:none}
@keyframes portal-skip-in{to{opacity:1}}

/* Mobile: shorter run, lighter layers */
/* lvh stage = never resizes with the mobile URL bar; --ui-gap keeps text inside the always-visible (svh) area */
@supports (height:1svh){.portal-stage{--ui-gap:calc(100lvh - 100svh)}}
@media (max-width:760px){
  .portal-chapter.low{bottom:calc(clamp(4rem,11vh,7rem) + var(--ui-gap,0px))}
  .portal-rail{display:none}
}
@media (max-width:360px){                                                              /* folded foldables, small phones */
  .portal .hero-content{padding:5rem 5vw 3rem}
  .portal .hero h1,.portal h1{font-size:clamp(2.3rem,13vw,3rem)}
  .portal-chapter{width:92vw}
  .portal-chapter h2{font-size:clamp(1.6rem,9vw,2.2rem)}
  .portal .cta .btn{padding:.8rem 1.3rem;font-size:.85rem}
}
@media (max-height:520px) and (orientation:landscape){                                 /* phones in landscape */
  .portal .hero-lotus{display:none}
  .portal .hero h1,.portal h1{font-size:clamp(2.2rem,7vw,3.4rem);margin-bottom:.6rem}
  .portal .tagline{margin-bottom:1rem}
  .portal-chapter h2{font-size:clamp(1.6rem,4.5vw,2.6rem)}
}

/* Reduced motion: no autoplay — the static end state (last frame + "Réalisons vos projets") */
@media (prefers-reduced-motion:reduce){
  .hero.portal{height:100vh;height:100svh}
  .portal-stage{height:100vh;height:100svh}
  .portal-media{transform:none;background-image:url("../portal/d/f329.webp")}
  .portal-media canvas,.portal-glow,.portal-rail,.portal-skip,.portal .scroll-hint,.portal-chapter:not(.last){display:none}
  .portal .hero-content{visibility:hidden}
  .portal [data-pa]{animation:none!important}
  .portal-night{opacity:.85}
  .portal-chapter.last{opacity:1;visibility:visible;pointer-events:auto}
  .portal-chapter.last .btn{pointer-events:auto}
}
/* JS reports a hard failure (no frames): behave like reduced-motion layout but keep the looping video */
.portal-static .portal-chapter,.portal-static .portal-glow,.portal-static .portal-night,.portal-static .portal-rail{display:none}
.portal-static [data-pa]{animation:none!important}
@media (max-aspect-ratio:1/1) and (max-width:900px){.portal-media{background-image:url("../portal/m/f000.webp")}}
.portal .scroll-hint{bottom:calc(2rem + var(--ui-gap,0px))}
/* legibility over the bright portal flash */
.portal-chapter.mid::before{inset:-30% -12%;background:radial-gradient(closest-side,rgba(13,19,40,.72),rgba(13,19,40,.4) 55%,transparent)}
.portal-chapter.mid h2{text-shadow:0 2px 24px rgba(13,19,40,.95),0 0 70px rgba(13,19,40,.7)}
@media (prefers-reduced-motion:reduce) and (max-aspect-ratio:1/1) and (max-width:900px){.portal-media{background-image:url("../portal/m/f329.webp")}}