/* Hero film 02 → page turn → high-resolution portrait (hero.js, pageturn.js).
   The film is never masked while it plays; the page turn is its own layer above it. */

/* Film */
.hero-stage{position:absolute;right:0;top:0;width:70%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s}
.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;will-change:transform;backface-visibility:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);mask-composite:intersect}
/* the page opens on the film's first frame (its poster) and stays there until the film plays: the still never shows first */
.hero-refined .hero-stage{opacity:1}
.hero-refined.is-covered .hero-stage,.hero-refined.is-final .hero-stage{opacity:0;visibility:hidden;transition:none}

/* Shading over the film so the headline reads */
.hero-refined:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#101211cc,transparent 18%),linear-gradient(90deg,#101211 8%,#101211c9 39%,#10121124 67%,transparent),linear-gradient(0deg,#101211,transparent 20%);opacity:0;transition:opacity 1.2s ease}
/* the still keeps exactly the shading the film had: same darkening under the headline, same edges */
.hero-refined:after{opacity:1}

/* The turning sheet (canvas painted by hero.js, animated by pageturn.js) */
.hero-page{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;visibility:hidden}
.hero-refined.is-turning .hero-page{opacity:1;visibility:visible;transition:opacity .24s ease}
.hero-refined.is-final .hero-page{opacity:0;visibility:hidden;transition:none}

/* Still portrait: hidden under the film, uncovered by the turn, then a slow push-in */
.hero-refined .hero-portrait{transition:opacity .4s,transform 2.6s cubic-bezier(.16,.8,.2,1),filter 1.2s;transform-origin:55% 100%}
.hero-refined .hero-portrait{opacity:0}
.hero-refined.is-covered .hero-portrait,.hero-refined.is-final .hero-portrait{opacity:1;transition:transform 3.4s cubic-bezier(.16,.8,.2,1)}
.hero-refined.is-pushed .hero-portrait{transform:scale(1.04)}

/* Text sits above the sheet */
.hero-refined .hero-content{z-index:3}
.hero-refined h1{text-shadow:0 6px 34px #000c}
.hero-refined h1 .lead{display:block;font-size:.52em;letter-spacing:.06em;color:#e9e2d2}

/* Replay: discreet circular arrow, only after the sequence */
.hero-replay{position:absolute;z-index:5;right:6%;bottom:110px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid #d9c18e66;background:#121412b3;color:#efe3c6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s,transform .3s,background .3s}
.hero-replay svg{width:19px;height:19px}
.hero-replay.is-visible{opacity:1;pointer-events:auto}
.hero-replay:hover{transform:rotate(-40deg);background:#d9c18e;color:#14161a}

/* Two headlines: A plays with the film and turns away on the sheet; B is then written in its place */
.hero-refined .hero-swap{display:grid}
.hero-refined .hero-swap>.swap-a,.hero-refined .hero-swap>.swap-b{grid-area:1/1;display:block}
.hero-refined h1.hero-swap>span>span{display:block}
.hero-refined .hero-swap>.swap-b{visibility:hidden}
.hero-refined.is-turning .hero-swap>.swap-a{opacity:0;transition:opacity .24s ease}
.hero-refined.is-final .hero-swap>.swap-a,.hero-refined.is-rewriting .hero-swap>.swap-a{visibility:hidden}
.hero-refined.is-final .hero-swap>.swap-b,.hero-refined.is-rewriting .hero-swap>.swap-b{visibility:visible}
/* B is written line by line, top to bottom, each line left to right, all within 2.5 s */
.hero-refined.is-rewriting .hero-swap>.swap-b,.hero-refined.is-rewriting h1.hero-swap>.swap-b>span{--ink:0%;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--ink) - 7%),transparent var(--ink));mask-image:linear-gradient(90deg,#000 calc(var(--ink) - 7%),transparent var(--ink));transition:--ink var(--dur,.6s) cubic-bezier(.45,.1,.35,1) var(--delay,0s)}
.hero-refined.is-rewriting h1.hero-swap>.swap-b{-webkit-mask-image:none;mask-image:none}
.hero-refined.is-rewriting.is-writing .hero-swap>.swap-b,.hero-refined.is-rewriting.is-writing h1.hero-swap>.swap-b>span{--ink:108%}
h1.hero-swap>.swap-b>span:nth-child(1){--delay:0s;--dur:.5s}
h1.hero-swap>.swap-b>span:nth-child(2){--delay:.42s;--dur:.78s}
h1.hero-swap>.swap-b>span:nth-child(3){--delay:1.12s;--dur:.5s}
.hero-description.hero-swap>.swap-b{--delay:1.6s;--dur:.85s}
@media(prefers-reduced-motion:reduce){.hero-refined.is-rewriting .hero-swap>.swap-b,.hero-refined.is-rewriting h1.hero-swap>.swap-b>span{transition:none;--ink:108%}}

@media(max-width:700px){
  .hero-stage{top:72px;width:100%;height:420px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%)}
  .hero-stage video{-webkit-mask-image:none;mask-image:none}
  .hero-refined:after{background:linear-gradient(0deg,#101211 0%,#101211 47%,transparent 78%)}
  .hero-refined .hero-content{padding-top:380px}
  .hero-refined .hero-portrait{left:0;right:0;width:100%;object-position:50% 100%}
  .hero-refined h1{font-size:clamp(34px,10.2vw,60px)}
  .hero-replay{top:92px;bottom:auto;right:16px;width:42px;height:42px}
}
/* desktop: the still fades out at the bottom where the film's own feather does, so nothing new appears when it replaces the film */
@media(min-width:701px){.hero-refined .hero-portrait{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 92%);mask-image:linear-gradient(180deg,#000 74%,transparent 92%)}}
@media(prefers-reduced-motion:reduce){.hero-refined .hero-portrait{transition:none;animation:none}.hero-refined:not(.is-playing) .hero-stage{opacity:0}.hero-refined:not(.is-playing) .hero-portrait{opacity:1}}

/* Neon handwriting after the reveal (scribbles.js): white or gold script, written left to right */
@font-face{font-family:'Fugee Hand';src:url(assets/fonts/allison-subset.woff) format('woff');font-display:swap}
@property --ink{syntax:'<percentage>';inherits:false;initial-value:0%}
.hero-scribbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-scribbles-back{z-index:0}
.hero-scribbles-front{z-index:1}
.scribble{position:absolute;white-space:nowrap;font-family:'Fugee Hand',cursive;line-height:1.15;padding:.1em .25em;transform:rotate(var(--tilt,0deg));opacity:0;--ink:0%;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--ink) - 6%),transparent var(--ink));mask-image:linear-gradient(90deg,#000 calc(var(--ink) - 6%),transparent var(--ink));transition:--ink var(--write,1.6s) cubic-bezier(.45,.1,.4,1),opacity .35s ease,filter 1.2s ease,translate 1.4s ease}
.scribble.is-writing{--ink:106%;opacity:.82}
.scribble.is-leaving{opacity:0;filter:blur(3px);translate:0 -8px;transition:opacity 1.2s ease,filter 1.2s ease,translate 1.4s ease}
.scribble.is-gold{color:#ffe2a0;text-shadow:0 0 2px #fff3d1,0 0 8px #f5c25ccc,0 0 20px #e2992f99,0 0 42px #c97a1f55}
.scribble.is-white{color:#fffaf0;text-shadow:0 0 2px #fff,0 0 8px #ffffffbf,0 0 20px #e9eeff73,0 0 40px #c9d3ff40}
.hero-scribbles-back .scribble{opacity:0}
.hero-scribbles-back .scribble.is-writing{opacity:.8}
.hero-scribbles-back .scribble.is-leaving{opacity:0}
.hero-refined:not(.is-final) .hero-scribbles{display:none}
@media(prefers-reduced-motion:reduce){.hero-scribbles{display:none}}