/* The One Fate film: collision, dive, bloom, then a bright wave. Normal scroll is the playhead; nothing captures the wheel. */
.worlds-sequence{--scene-height:max(740px,100svh);height:calc(var(--scene-height) + 230svh);position:relative}
.worlds-sequence .collision{height:var(--scene-height);min-height:0;position:sticky;top:0;--space-opacity:1;--dawn-opacity:0;--worlds-zoom:1;--worlds-blur:0px;--whiteout:0;--bloom:.3;--dawn-zoom:1.08;--story-opacity:1;--story-lift:0px;--flow-opacity:0;--flow-lift:36px;--journey:0}
.worlds-sequence .cosmic-stage{z-index:0;transform:scale(var(--worlds-zoom));transform-origin:var(--ox,69%) var(--oy,39%);filter:blur(var(--worlds-blur)) brightness(var(--worlds-bright,1));opacity:var(--space-opacity);will-change:transform,opacity;transition:none}
.worlds-sequence .cosmic-shade{z-index:2;opacity:var(--space-opacity)}
.worlds-sequence .cosmic-impact{display:none}

/* Particles: drawn on the GPU by fate-film.js */
.fate-film{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(#000 84%,transparent 99%);mask-image:linear-gradient(#000 84%,transparent 99%)}
.no-webgl .fate-film{display:none}

/* The impact: flash, two shockwaves and a camera shake */
.impact-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--ox,69%) var(--oy,39%),#fff 0,#fff7e6 5%,#ffd59a 13%,#ff9d5c26 31%,transparent 56%)}
.impact-ring{position:absolute;z-index:4;left:var(--ox,69%);top:var(--oy,39%);width:24vmax;height:24vmax;margin:-12vmax 0 0 -12vmax;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,transparent 50%,#ff9d5c1f 56%,#fff3dd 61%,#ffc58a80 64%,transparent 72%);filter:blur(1.5px);-webkit-mask-image:conic-gradient(from 30deg,#000,#0007 18%,#000 34%,#000a 52%,#0005 68%,#000 84%,#000);mask-image:conic-gradient(from 30deg,#000,#0007 18%,#000 34%,#000a 52%,#0005 68%,#000 84%,#000)}
.collision.is-impact .impact-flash{animation:impact-flash 1.2s cubic-bezier(.1,.7,.3,1) both}
.collision.is-impact .impact-ring{animation:impact-ring 1.45s cubic-bezier(.1,.75,.25,1) both}
.collision.is-impact .impact-ring.is-late{animation-delay:.14s;animation-duration:2s}
.collision.is-impact .cosmic-stage,.collision.is-impact .fate-film{animation:impact-shake .8s cubic-bezier(.3,.6,.4,1) both}
@keyframes impact-flash{0%{opacity:0}5%{opacity:1}100%{opacity:0}}
@keyframes impact-ring{0%{opacity:0;transform:scale(.04)}7%{opacity:1}100%{opacity:0;transform:scale(6.5)}}
@keyframes impact-shake{0%{translate:0 0}9%{translate:-12px 8px}20%{translate:10px -7px}33%{translate:-7px 5px}48%{translate:5px -3px}66%{translate:-2px 2px}100%{translate:0 0}}

/* The camera rushes in and is hit by the collision as the curtains part */
html[data-intro=playing] .cosmic-camera{animation:world-rush 3.4s .45s cubic-bezier(.3,0,.2,1) both}
@keyframes world-rush{0%{transform:scale(.8);filter:brightness(.32)}30%{transform:scale(1);filter:brightness(.72)}33%{transform:scale(1.075);filter:brightness(1.75)}58%{transform:scale(1.03);filter:brightness(1.06)}100%{transform:scale(1.035);filter:brightness(1)}}

/* Headline: the first line slams in on impact, the second ignites */
html.js-film .collision h1>span{opacity:0;animation:none}
html.js-film .collision.has-ignited h1>span{opacity:1;transform-origin:0 70%;animation:title-slam .95s cubic-bezier(.16,1.25,.3,1) both}
html.js-film .collision.has-ignited h1>span:last-child{animation:title-ignite 1.5s .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes title-slam{0%{opacity:0;transform:scale(1.42) translateY(-8px);filter:blur(16px)}38%{opacity:1;filter:blur(0)}62%{transform:scale(.985)}100%{opacity:1;transform:none;filter:none}}
@keyframes title-ignite{0%{opacity:0;transform:translateY(22px);filter:blur(10px) brightness(2.4);text-shadow:0 0 34px #ffb46e}35%{opacity:1;filter:blur(0) brightness(1.9);text-shadow:0 0 28px #ffb46ecc}100%{opacity:1;transform:none;filter:none;text-shadow:0 0 0 #ffb46e00}}

/* The dive's white bloom becomes the sun of the new world */
.worlds-colour-veil{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--whiteout);background:radial-gradient(circle at var(--ox,69%) var(--oy,39%),#fffdf7 0,#fffaf0 calc(var(--bloom) * 15%),#ffecd0 calc(var(--bloom) * 28%),#ffe6c800 calc(var(--bloom) * 56%))}
.dawn-stage{position:absolute;inset:0;z-index:1;opacity:var(--dawn-opacity);pointer-events:none;overflow:hidden}
.dawn-sky{position:absolute;inset:0;background:linear-gradient(180deg,#8dd2e3 0%,#b9e3ec 22%,#e6eee6 44%,#f8e7d1 57%,#f4e2cc 66%,#ece5db 84%,#e8e6df 100%);transform:scale(var(--dawn-zoom));transform-origin:var(--ox,69%) var(--oy,39%)}
.dawn-sun{position:absolute;left:var(--ox,69%);top:var(--oy,39%);width:76vmax;height:76vmax;margin:-38vmax 0 0 -38vmax;border-radius:50%;background:radial-gradient(circle,#fffdf6 0,#fff8e6 5%,#fff0d2d9 11%,#ffe2b880 24%,#ffd9a000 50%);animation:sun-breathe 9s ease-in-out infinite}
.dawn-haze{position:absolute;left:0;right:0;top:54%;height:14%;background:linear-gradient(180deg,transparent,#fff7ea8c 50%,transparent)}
.dawn-wave-art{position:absolute;left:0;bottom:0;width:100%;height:46%;display:none}
.no-webgl .dawn-stage .dawn-wave-art{display:block}
@keyframes sun-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.05);opacity:1}}

/* The second headline */
.flow-copy{position:absolute;z-index:5;left:4%;right:4%;top:19%;color:#0f2629;opacity:var(--flow-opacity);translate:0 var(--flow-lift);pointer-events:none}
.flow-kicker{margin:0 0 26px;font-size:11px;letter-spacing:.17em;line-height:1.8;color:#1f4f55}
.flow-title{margin:0;font-family:var(--display);font-size:clamp(66px,8.6vw,146px);font-weight:500;letter-spacing:-.072em;line-height:.94}
.flow-title>span{display:block;width:max-content;max-width:100%}
.flow-title>span:last-child{font:italic 400 1.06em/.95 Georgia,serif;letter-spacing:-.062em;margin:8px 0 0 13%;color:#0a6670}
.flow-title .word-dot{font-style:normal;color:#e4874b}

.worlds-sequence .collision h1,.worlds-sequence .collision-description,.worlds-sequence .cosmic-kicker,.worlds-sequence .collision-caption{z-index:5;opacity:var(--story-opacity);translate:0 var(--story-lift)}
.worlds-sequence .collision-foot{z-index:6;transition:color .4s}
.motion-paused .worlds-sequence .collision-description{opacity:var(--story-opacity)!important}

/* Controls switch to ink when the world turns bright */
.worlds-sequence[data-scene=dawn] .collision-foot,.worlds-sequence[data-scene=dawn] .motion-control,.worlds-sequence[data-scene=dawn] .replay-opening,.worlds-sequence[data-scene=dawn] .collision-footnote,.worlds-sequence[data-scene=dawn] .collision-next small{color:#1d2a29}
.worlds-sequence .collision-foot:before{content:"";position:absolute;z-index:-1;inset:-70px -10vw -40px;background:linear-gradient(#e8e6df00,#e8e6dfc4 52%,#e8e6df);opacity:var(--dawn-opacity);pointer-events:none}
.worlds-sequence[data-scene=dawn] .replay-opening{border-color:#11121133}
.worlds-sequence[data-scene=dawn] .reel-arrow{border-color:#11121160}
.worlds-sequence[data-scene=dawn] .worlds-progress{background:#11121124}
.worlds-sequence[data-scene=dawn] .worlds-progress i{background:#111211}
.worlds-progress{display:block;height:1px;width:90px;background:#ffffff38;margin:12px auto 0;overflow:hidden}
.worlds-progress i{display:block;background:#f2edf2;width:100%;height:100%;transform:scaleX(var(--journey));transform-origin:left}

/* The film now lands on cream, so the next section no longer needs its dark-to-light fade */
.worlds-sequence+.statement{background:var(--paper)}
.dawn-static{display:none}
@media(max-width:700px){
 .worlds-sequence{height:calc(var(--scene-height) + 190svh)}
 .worlds-sequence .cosmic-stage{filter:brightness(var(--worlds-bright,1))}
 .worlds-sequence .collision-footnote{display:block;position:absolute;bottom:83px;left:0;font-size:7px;letter-spacing:.09em;text-align:left}
 .worlds-progress{margin:8px 0 0;width:68px}
 .worlds-sequence .collision-foot{bottom:28px}
 .worlds-sequence .collision-description{bottom:22%}
 .flow-copy{left:6%;right:6%;top:17%}
 .flow-kicker{font-size:9px;margin-bottom:18px}
 .flow-title{font-size:clamp(48px,13.4vw,88px)}
 .flow-title>span:last-child{margin-left:5%;font-size:1.08em}
 .impact-ring{width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax}
}
@media(prefers-reduced-motion:reduce){
 .worlds-sequence{height:auto}
 .worlds-sequence .collision{position:relative;top:auto}
 .worlds-sequence .cosmic-stage{transform:none;filter:none;opacity:1}
 .worlds-sequence .cosmic-shade{opacity:1}
 .fate-film,.dawn-stage,.worlds-colour-veil,.impact-flash,.impact-ring,.flow-copy,.worlds-sequence .collision-footnote{display:none}
 html.js-film .collision h1>span{opacity:1!important;animation:none!important}
 .worlds-sequence .collision h1,.worlds-sequence .collision-description,.worlds-sequence .cosmic-kicker,.worlds-sequence .collision-caption{opacity:1;translate:none}
 .dawn-static{display:block;position:relative;height:max(560px,80svh);overflow:hidden}
 .dawn-static .dawn-sun{left:69%;top:36%;animation:none}
 .dawn-static .dawn-sky{transform:none}
 .dawn-static .dawn-wave-art{display:block}
 .dawn-static .flow-copy{display:block;opacity:1;translate:none}
}