@import url('scene.css');

/* One photographic object, with editorial type arranged around it. */
.bottom-note{display:block;padding:44px 0}
.bottom-note-inner{width:calc(100% - 88px);max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px}
.bottom-note button{font-size:16px;font-weight:500}
@media(max-width:1100px){.bottom-note-inner{width:calc(100% - 56px)}}
@media(max-width:700px){.bottom-note{padding:32px 0}.bottom-note-inner{width:calc(100% - 44px);flex-direction:column;align-items:flex-start;gap:25px}.bottom-note button{font-size:15px}}
.journey{height:180svh}
.scene{min-height:720px;background:radial-gradient(ellipse at 50% 48%,#282324 0%,#1a191b 35%,#101012 77%)}
.halo{width:65vw;height:65vw;top:49%;opacity:1;transform:translate(-50%,-50%) scale(calc(1 + var(--progress)*.06))}
.halo:after{inset:-17%;border-color:#ffffff09}
.grain{opacity:.055}
.portrait-wrap{inset:0;z-index:2;animation:none;perspective:none;transform:translateY(calc(var(--progress)*16px)) scale(calc(1 - var(--progress)*.045));transform-origin:50% 65%}
.portrait{left:50%;right:auto;bottom:-1%;height:94%;width:auto;max-width:none;transform:translateX(-61%);filter:brightness(.94);mask-image:linear-gradient(to bottom,#000 76%,transparent 100%),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.scene-heading{display:contents;animation:none;transform:none;opacity:1}
.heading-word{position:absolute;z-index:4;font-family:var(--heading);font-weight:500;letter-spacing:-.06em;line-height:.99;animation:none;will-change:transform,opacity}
.heading-idea{left:3.8%;top:19%;font-size:clamp(68px,7.7vw,150px);transform:translate(calc(var(--progress)*-70px),calc(var(--progress)*-30px));opacity:clamp(0,calc(1 - var(--progress)*2.6),1)}
.heading-code{right:3.8%;top:22%;width:27%;font-size:clamp(40px,4.65vw,93px);line-height:1.12;transform:translate(calc(var(--progress)*70px),calc(var(--progress)*-20px));opacity:clamp(0,calc(1.25 - var(--progress)*2.7),1)}
.code-accent{color:var(--orange)}
.left-copy{left:3.8%;top:59%;width:26%;animation:none;transform:translateY(calc(var(--progress)*-35px));opacity:clamp(0,calc(1 - var(--progress)*2.5),1)}
.course-label{font-size:clamp(14px,1.1vw,22px);line-height:1.5}.small-rule{margin:24px 0 16px}.author{font-size:11px}.author span{font-size:12px}
.right-copy{right:3.8%;left:auto;top:57%;bottom:auto;width:24%;max-width:340px;animation:none;transform:translateY(calc(var(--progress)*-90px));opacity:1}
.offer{font-size:clamp(14px,1.05vw,20px);letter-spacing:0;line-height:1.6;max-width:320px;margin:0 0 25px}.enroll{width:190px;height:55px;will-change:auto}
.right-copy{padding:25px 26px 26px;background:rgba(35,34,37,.64);border:1px solid rgba(245,245,242,.16);border-top-color:rgba(245,245,242,.27);border-radius:12px;backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);box-shadow:0 16px 48px #0003,inset 0 1px 0 #ffffff08;isolation:isolate;overflow:hidden;contain:paint}
.right-copy:before{content:none}
.offer-lead{display:block;font:500 clamp(22px,1.7vw,30px)/1.15 var(--heading);letter-spacing:-.035em;margin-bottom:13px;color:var(--paper)}
.offer-lead strong{font-weight:500;color:var(--orange)}
.offer-detail{display:block;color:var(--paper);font-size:clamp(15px,1.1vw,20px);line-height:1.5;letter-spacing:-.01em}
.reveal-copy{left:3.8%;right:auto;top:27%;width:28%;z-index:4;transform:translateY(calc((1 - var(--progress))*65px));opacity:clamp(0,calc((var(--progress) - .42)*2.1),1)}
.reveal-copy h2{font-size:clamp(38px,4.45vw,85px);letter-spacing:-.055em;line-height:1.04;margin-bottom:23px}.reveal-copy .description{font-size:clamp(13px,1vw,18px);line-height:1.6;max-width:270px}.reveal-copy .text-link{margin-top:14px;font-size:13px}.reveal-copy .text-link span{margin-left:20px}
.scroll-cue{background:#101012a6;backdrop-filter:blur(8px)}.scene-bottom{z-index:5}.cohort{font-size:10px}.variant-link{font-size:10px}
@media(min-width:1700px){.portrait{height:min(96%,1050px)}.heading-idea,.left-copy,.reveal-copy{left:calc(50% - 720px)}.heading-idea{font-size:140px}.heading-code{right:calc(50% - 720px);width:440px;font-size:81px}.right-copy{right:calc(50% - 720px);top:53%;width:360px;max-width:none}.left-copy{top:60%;width:320px}.reveal-copy{width:360px}.offer{font-size:18px;margin-bottom:23px}.course-label{font-size:20px}}
@media(max-width:1100px) and (min-width:701px){.header{padding:0 28px}.scene{min-height:720px}.portrait{height:86%;bottom:0}.heading-idea{top:22%;left:28px;font-size:7.6vw}.heading-code{top:25%;right:28px;width:28%;font-size:4.6vw}.left-copy{left:28px;top:58%;width:27%}.course-label{font-size:14px}.author{font-size:10px}.author span{font-size:11px}.right-copy{right:28px;top:55%;width:25%;max-width:none}.offer{font-size:13px}.enroll{width:165px;height:51px;font-size:12px}.reveal-copy{left:28px;top:28%;width:29%}.reveal-copy h2{font-size:4.8vw}.reveal-copy .description{font-size:13px}.reveal-copy .text-link{font-size:11px}.halo{width:90vw;height:90vw}.small-rule{margin:18px 0 12px}}
@media(max-height:760px) and (min-width:1101px){.scene{min-height:670px}.portrait{height:94%}.heading-idea{top:20%;font-size:7.1vw}.heading-code{top:23%;font-size:4.3vw}.left-copy{top:59%}.right-copy{top:55%}.offer{font-size:14px;max-width:270px;margin-bottom:21px}.course-label{font-size:16px}.small-rule{margin:18px 0 12px}.reveal-copy{top:25%}.reveal-copy h2{font-size:4vw}.reveal-copy .description{font-size:14px}}
@media(max-width:700px){.journey{height:165svh}.scene{height:100svh;min-height:820px}.header{height:78px}.halo{width:125vw;height:125vw;top:48%}.portrait-wrap{transform:translateY(calc(var(--progress)*12px)) scale(calc(1 - var(--progress)*.025))}.portrait{height:64%;left:50%;bottom:17%;transform:translateX(-61%);filter:brightness(.87);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}.heading-idea{left:22px;top:15%;font-size:clamp(35px,10.8vw,64px);line-height:1.02;transform:translate(calc(var(--progress)*-25px),calc(var(--progress)*-20px))}.heading-code{right:22px;top:16%;width:48%;font-size:clamp(23px,6.4vw,38px);line-height:1.15;transform:translate(calc(var(--progress)*25px),calc(var(--progress)*-10px))}.left-copy{top:auto;bottom:23%;left:22px;right:22px;width:auto;text-align:left;z-index:4;transform:translateY(calc(var(--progress)*-20px))}.course-label{font-size:14px}.course-label br{display:none}.left-copy .small-rule,.left-copy .author{display:none}.right-copy{top:auto;bottom:7%;left:22px;right:22px;width:auto;max-width:none;display:block;transform:translateY(calc(var(--progress)*-40px))}.offer{font-size:12px;line-height:1.5;max-width:310px;margin-bottom:14px}.enroll{height:48px;width:162px;font-size:12px}.scene-bottom{left:22px;right:22px;bottom:16px}.cohort,.variant-link{font-size:8px}.scroll-cue{display:none}.reveal-copy{top:14%;left:22px;width:calc(100% - 44px)}.reveal-copy .eyebrow{font-size:8px;margin-bottom:14px}.reveal-copy h2{font-size:clamp(30px,8.4vw,46px);line-height:1.02;max-width:240px;margin-bottom:12px}.reveal-copy .description{font-size:12px;max-width:210px}.reveal-copy .text-link{font-size:11px;margin-top:2px}.reveal-copy h2 br:first-child{display:none}}
@media(max-width:360px){.heading-code{font-size:6.25vw;right:20px}.heading-idea{left:20px}.course-label{font-size:12px}.offer{font-size:11px}.cohort{font-size:7px}}
@media(min-width:1101px) and (max-width:1699px){.right-copy{width:320px;max-width:none;top:53%;right:3.8%}.offer{margin-bottom:20px}}
@media(min-width:701px) and (max-width:1100px){.right-copy{padding:20px 19px;width:28%;top:51%;right:24px}.offer-lead{font-size:23px;margin-bottom:11px}.offer-detail{font-size:14px;line-height:1.5}.offer{margin-bottom:18px}.enroll{width:100%;max-width:190px}}
@media(max-width:700px){.left-copy{bottom:32.5%}.right-copy{padding:17px 19px 19px;bottom:7%;background:rgba(29,29,32,.72);border-radius:12px}.offer-lead{font-size:23px;margin-bottom:9px}.offer-detail{font-size:13px;line-height:1.5}.offer{max-width:none;margin-bottom:15px}.enroll{width:100%;max-width:none;height:47px}.right-copy{transform:translateY(calc(var(--progress)*-15px))}}
/* Each side shares one vertical guide, including the author caption. */
.scene{--side-inset:3.8%;--right-width:clamp(300px,27vw,390px);--offer-top:53%}
.heading-idea,.left-copy,.reveal-copy{left:var(--side-inset)}
.heading-code{left:calc(100% - var(--side-inset) - var(--right-width));right:auto;width:var(--right-width)}
.right-stack{position:absolute;z-index:4;right:var(--side-inset);top:var(--offer-top);width:var(--right-width);transform:translateY(calc(var(--progress)*-90px))}
.right-stack .right-copy{position:relative;inset:auto;width:100%;max-width:none;transform:none;opacity:1}
.right-stack .offer{max-width:none}
.left-copy{width:350px;top:var(--offer-top);transform:translateY(calc(var(--progress)*-90px))}
.course-label{font-size:clamp(22px,1.6vw,30px);font-weight:400;line-height:1.4;letter-spacing:-.025em;text-shadow:0 2px 14px #000b}
.author-below{margin:20px 0 0;padding-left:0;font-size:13px;line-height:1.55;color:#c9c9c2;max-width:330px;text-shadow:0 1px 8px #000,0 2px 16px #000}
.author-below span{display:block;font-size:15px;line-height:1.5;color:var(--paper);margin-bottom:4px}
.right-stack .enroll{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:center;width:100%;max-width:none;height:61px;border-radius:8px;font:500 19px var(--body);letter-spacing:-.2px;background:var(--orange);box-shadow:inset 0 1px 0 #ffffff40,0 6px 25px #ff5a1f12;transition:background .25s,box-shadow .25s,transform .25s}
.right-stack .enroll span{position:relative;z-index:1}
.right-stack .enroll:after{content:'';position:absolute;inset:-50% -20%;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff0 38%,#ffffff3b 48%,#ffffff69 50%,#ffffff3b 52%,#fff0 62%,transparent 70%);transform:translateX(-130%);animation:button-sheen 5.8s ease-in-out infinite}
.right-stack .enroll:hover{background:#ff7137;box-shadow:inset 0 1px 0 #ffffff60,0 8px 30px #ff5a1f30;transform:translateY(-1px)}
.right-stack .enroll:active{transform:translateY(1px)}
@keyframes button-sheen{0%,58%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
@media(min-width:1700px){.scene{--side-inset:calc(50% - 720px);--right-width:440px}.course-label{font-size:30px}.left-copy{width:370px}}
@media(min-width:701px) and (max-width:1100px){.scene{--side-inset:28px;--right-width:28%;--offer-top:51%}.left-copy{width:27%}.course-label{font-size:21px}.author-below{font-size:11px;margin-top:15px}.author-below span{font-size:13px}.right-stack .enroll{font-size:17px;height:55px}}
@media(max-width:700px){.scene{--side-inset:22px;--right-width:calc(100% - 44px);min-height:900px}.heading-idea{left:22px}.heading-code{right:22px;left:auto;width:48%}.left-copy{left:22px;right:22px;width:auto;top:auto;bottom:40%}.course-label{font-size:17px}.right-stack{left:22px;right:22px;top:auto;bottom:7%;width:auto;transform:translateY(calc(var(--progress)*-15px))}.right-stack .right-copy{inset:auto;transform:none}.author-below{font-size:11px;max-width:none;margin-top:13px;line-height:1.45}.author-below span{font-size:13px;margin-bottom:2px}.right-stack .enroll{height:54px;font-size:17px}.portrait{height:58%;bottom:20%}}
@media(max-width:360px){.course-label{font-size:15px}.right-stack .enroll{font-size:16px}}
.launch-date{display:flex;align-items:center;gap:.6em;width:fit-content;margin:30px 0 0 auto;padding:0;border:0;border-radius:0;background:none;font:400 20px/1.4 var(--heading);letter-spacing:-.025em;color:var(--paper);text-align:right;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,visibility .35s}.launch-date time{color:var(--orange);font-weight:500}
.launch-label{font:400 16px var(--body);color:var(--muted)}
.calendar-date,.calendar-year{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap}.calendar-date{gap:.25em}.calendar-year{gap:.03em;margin-left:.1em;font-variant-numeric:tabular-nums}
.date-reel{display:inline-block;height:1.4em;overflow:hidden;position:relative;border-bottom:1px solid #ff5a1f40;vertical-align:bottom}
.date-reel-digit{width:.7em;text-align:center;font-variant-numeric:tabular-nums}.date-reel-month{width:4.5em;text-align:center}
.date-track{display:flex;flex-direction:column;transform:translateY(0);transition:transform .4s ease}
.date-track>span{display:block;flex:0 0 1.4em;height:1.4em;line-height:1.4em}
.scene.is-complete .date-track{transform:translateY(var(--reel-end));transition:transform 1350ms cubic-bezier(.16,.75,.2,1);transition-delay:calc(180ms + var(--reel-delay))}
.calendar-suffix{font:400 .65em var(--body);color:var(--muted);margin-left:.15em}
.date-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1700px){.launch-date{font-size:23px}.launch-label{font-size:17px}}
@media(min-width:701px) and (max-width:1100px){.launch-date{gap:.35em;font-size:18px}.launch-label{font-size:13px}.calendar-date{gap:.15em}.date-reel-month{width:4.1em}}
@media(max-width:700px){.launch-date{font-size:19px}.launch-label{font-size:14px}}
@media(max-width:360px){.launch-date{font-size:17px;gap:.4em}.launch-label{font-size:13px}}
@media(prefers-reduced-motion:reduce){.date-track,.scene.is-complete .date-track{transform:translateY(var(--reel-end));transition:none}}
.scene.is-complete .launch-date{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-height:760px) and (min-width:701px){.launch-date{margin-top:16px;font-size:20px}.scene{--offer-top:48%}}
@media(max-width:700px){.launch-date{margin-top:12px;font-size:20px}.right-stack{bottom:4%}.left-copy{bottom:43%}}
.author-fixed{position:absolute;z-index:5;right:calc(50% - 460px);bottom:5%;width:340px;max-width:none;margin:0;font-size:12px;line-height:1.6;color:#c9c9c2;text-shadow:0 1px 8px #000,0 2px 16px #000;transform:none;animation:none;opacity:1}
.author-fixed span{display:block;color:var(--paper);font-size:14px;margin-bottom:4px}
@media(min-width:701px) and (max-width:1100px){.author-fixed{right:28px;width:260px;font-size:11px;bottom:6%}.author-fixed span{font-size:13px}}
@media(max-width:700px){.author-fixed{left:22px;right:22px;bottom:5%;width:auto;text-align:right;font-size:10px;line-height:1.4}.author-fixed span{font-size:12px;margin-bottom:2px}}
.scene{--idea-top:19%;--code-top:22%;--lift:0;overflow:clip}
.heading-idea{top:var(--idea-top)}.heading-code{top:var(--code-top)}
.course-label{font-size:clamp(19px,1.25vw,24px)}
.right-stack{top:calc(var(--offer-top)*(1 - var(--lift)) + var(--code-top)*var(--lift));transform:none}
.reveal-copy{top:var(--idea-top);transform:translateY(calc((1 - var(--lift))*52px));width:28%;max-width:390px}
.reveal-copy h2{font-size:clamp(30px,2.55vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.04em;margin:0 0 24px;max-width:none}
.reveal-copy h2 em{display:block;margin-top:8px}
.reveal-copy .description{font-size:clamp(15px,1vw,18px);line-height:1.6;max-width:350px}
@media(min-width:1700px){.reveal-copy{width:370px}.course-label{font-size:24px}}
@media(min-width:701px) and (max-width:1100px){.scene{--idea-top:22%;--code-top:25%}.course-label{font-size:18px}.reveal-copy{width:29%}.reveal-copy h2{font-size:clamp(27px,3vw,33px);margin-bottom:20px}.reveal-copy .description{font-size:14px}}
@media(max-height:760px) and (min-width:1101px){.scene{--idea-top:20%;--code-top:23%}.reveal-copy h2{font-size:clamp(29px,2.35vw,43px)}.reveal-copy .description{font-size:15px}}
@media(max-width:700px){.scene{--idea-top:15%;--code-top:16%}.course-label{font-size:15px}.right-stack{top:auto;bottom:7%;transform:translateY(calc(var(--lift)*-25px))}.reveal-copy{left:22px;right:22px;width:auto;max-width:none}.reveal-copy h2{font-size:clamp(25px,6.8vw,32px);line-height:1.12;max-width:none;margin-bottom:16px}.reveal-copy h2 em{margin-top:5px}.reveal-copy .description{font-size:14px;max-width:310px;line-height:1.5}.reveal-copy .text-link{margin-top:8px}.portrait-wrap{transform:translateY(calc(var(--progress)*35px)) scale(calc(1 - var(--progress)*.025))}}
.scene{--hold:0;--portrait-hold:0;--dissolve:0}
.portrait-wrap{transform:translateY(calc(var(--progress)*16px + var(--portrait-hold)*8px)) scale(calc(1 - var(--progress)*.045 - var(--portrait-hold)*.09))}
.scene.particles-ready .portrait-wrap,.scene.particles-ready .right-stack,.scene.particles-ready .reveal-copy,.scene.particles-ready .author-fixed,.scene.particles-ready .scene-bottom{opacity:calc(1 - min(1,var(--dissolve)*4))}
.scene.particles-ready .halo{opacity:calc(1 - var(--dissolve))}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;opacity:0}
.scene.particles-ready .hero-particles{opacity:1}
@media(max-width:700px){.portrait-wrap{transform:translateY(calc(var(--progress)*35px + var(--portrait-hold)*8px)) scale(calc(1 - var(--progress)*.025 - var(--portrait-hold)*.07))}}
@media(prefers-reduced-motion:reduce){.journey{height:auto}.scene{position:relative;--progress:0!important;--lift:0!important;--dissolve:0!important;--portrait-hold:0!important}.portrait-wrap{transform:none!important}.heading-idea,.heading-code,.left-copy,.right-copy,.right-stack{opacity:1;transform:none}.reveal-copy{display:none}.scroll-cue{display:none}.right-stack .enroll:after{animation:none;opacity:0}.hero-particles{display:none}}

/* Revised portrait is centered in its source; uninterrupted scroll scaling. */
.scene{--portrait-progress:0}
.portrait{transform:translateX(-50%)}
.portrait-wrap{transform:translateY(calc(var(--portrait-progress)*24px)) scale(calc(1 - var(--portrait-progress)*.16))}
@media(max-width:700px){.portrait{transform:translateX(-50%)}.portrait-wrap{transform:translateY(calc(var(--portrait-progress)*38px)) scale(calc(1 - var(--portrait-progress)*.12))}}
/* The visor ignition now carries the scroll motion. */
.portrait-wrap{transform:none!important}
.visor-ignition{position:absolute;pointer-events:none;z-index:1;max-width:none}

.visor-trigger{position:absolute;z-index:3;display:block;margin:0;padding:0;border:0;border-radius:45%;background:transparent;box-shadow:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.visor-trigger:focus-visible{outline:2px solid #ffb17c;outline-offset:5px}
.visor-trigger:disabled{pointer-events:none}

/* A single centred cue remains along the bottom of the opening scene. */
.scene-bottom{justify-content:center;min-height:32px}
.scene-bottom .scroll-cue{position:relative;left:auto;bottom:auto;transform:none}