/* An Ouwee opening title and one dimensional broadcast pass, carried by the scroll. */
.hero{position:relative}.hero-scroll-cue{display:flex;gap:13px;align-items:center;margin-top:28px;font-family:var(--mono);font-size:.62rem;letter-spacing:.045em;color:var(--muted)}.scroll-cue-arrow{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--pump);font-size:1rem;transition:transform .25s}.hero-scroll-cue:hover .scroll-cue-arrow{transform:translateY(4px)}
.intro-screen{position:fixed;inset:0;margin:0;border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;overflow:hidden;background:#0b0d10;color:var(--pump)}.intro-screen::backdrop{background:#0b0d10}.intro-screen[open]{display:flex;align-items:center;justify-content:center;animation:intro-exit .35s cubic-bezier(.76,0,.24,1) 1.55s both}.intro-meta,.intro-base{position:absolute;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:.64rem;letter-spacing:.07em}.intro-meta{top:6%;color:var(--muted)}.intro-base{bottom:6%}.intro-base>span{color:var(--muted)}.intro-base button{border:1px solid #536557;border-radius:6px;padding:11px 15px;min-height:44px;background:transparent;color:var(--paper);font-family:var(--mono);font-size:.7rem;cursor:pointer;display:flex;gap:22px;align-items:center}.intro-word{display:flex;overflow:hidden;isolation:isolate;padding:3% 2%;font-family:var(--display);font-size:clamp(4rem,19vw,22rem);line-height:1;letter-spacing:-.095em;transform:rotate(-3deg);animation:intro-word-out .5s cubic-bezier(.76,0,.24,1) 1.1s both}.intro-word>span{display:block;animation:intro-letter .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter)*55ms)}.intro-word>span:last-child{padding-right:.1em}.intro-shutter{position:absolute;inset:0;background:var(--pump);transform:translateY(100%);animation:intro-shutter 1.9s cubic-bezier(.76,0,.24,1) both;pointer-events:none}.intro-running .hero-copy>[data-reveal],.intro-running .hero-art-stage[data-reveal]{opacity:0;translate:0 35px;transition:none}.replay-intro{border:0;padding:12px 0;background:transparent;color:var(--muted);font: .7rem var(--mono);cursor:pointer;display:flex;align-items:center;gap:12px}.replay-intro:hover{color:var(--pump)}.replay-intro[hidden]{display:none}.replay-intro>span{font-size:1.2rem}
@keyframes intro-letter{0%{transform:translateY(125%) rotate(9deg)}70%{transform:translateY(-4%) rotate(-1deg)}100%{transform:translateY(0) rotate(0)}}@keyframes intro-word-out{to{transform:translateY(-16%) rotate(-3deg) scale(1.04);opacity:0}}@keyframes intro-shutter{0%,58%{transform:translateY(100%)}80%{transform:translateY(0)}100%{transform:translateY(-100%)}}@keyframes intro-exit{to{opacity:0}}
.experience{position:relative;background:#0b0d10;border-bottom:1px solid var(--line);isolation:isolate}.experience-pin{position:relative;min-height:780px;overflow:hidden}.experience-meta{position:absolute;top:42px;left:6%;right:6%;display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);z-index:3}.experience-meta>span:first-child{color:var(--pump)}.experience-visual{position:absolute;inset:0;perspective:1400px}.experience-type{font-family:var(--display);font-size:clamp(4rem,10vw,10rem);line-height:.91;letter-spacing:-.06em;position:absolute;left:6%;top:28%;color:var(--paper);z-index:1}.type-people,.type-good{display:none}.type-energy{color:var(--pump)}.broadcast-travel{position:absolute;left:67%;top:49%;width:clamp(290px,33vw,510px);aspect-ratio:1/1.15;translate:-50% -50%;z-index:2;perspective:1400px}.broadcast-object{height:100%;width:100%;position:relative;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-18deg) rotateZ(7deg)}.pass-depth,.pass-back,.pass-photo,.pass-frame{position:absolute;inset:0;border-radius:20px}.pass-depth{background:linear-gradient(115deg,#798c81,#1a2720 35%,#6c8073 65%,#1e2e24);transform:translateZ(-22px);box-shadow:24px 32px 42px #0007,inset 0 0 0 2px #a7c8b4}.pass-back{inset:2px;background:#14251a;border:1px solid #749e83;transform:translateZ(-12px);display:grid;place-items:center;box-shadow:inset 0 0 0 12px #0e1812}.pass-back>span{font-family:var(--display);font-size:4.4rem;color:var(--pump);letter-spacing:-.065em;transform:rotate(-90deg)}.pass-photo{inset:40px 13px 48px;overflow:hidden;border-radius:9px;background:#090e0b;border:1px solid #63756a;transform:translateZ(0)}.pass-photo img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}.pass-photo-label{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;font-family:var(--mono);font-size:.52rem;color:#eff8f0;background:#09120bea;padding:8px;letter-spacing:.06em}.pass-frame{background:linear-gradient(135deg,#b9dac6,#3b5746 16%,#14271b 42%,#799783 75%,#b3d4bf);padding:2px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,3% 8%,3% 91%,97% 91%,97% 8%,3% 8%,0 0);transform:translateZ(10px);border:2px solid #b8d7c2;box-shadow:inset 0 0 0 7px #15271d}.pass-top,.pass-bottom{position:absolute;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e2f8e8;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em}.pass-top{top:13px}.pass-top>span:first-child{font-family:var(--display);font-size:.85rem;letter-spacing:-.03em}.pass-bottom{bottom:12px;font-size:.55rem}.pass-arrow{font-size:1.3rem;line-height:1}.pass-glint{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff6 49%,transparent 68%);opacity:.2}.pass-tag{position:absolute;left:-30px;bottom:40px;padding:13px 18px;background:var(--pump);color:var(--pump-ink);transform:translateZ(35px) rotate(-12deg);box-shadow:4px 5px 0 #08150d,0 0 0 1px #bceac9;max-width:65%}.pass-tag>span{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1;display:block;letter-spacing:-.04em}.pass-tag small{font-family:var(--mono);font-size:.43rem;display:block;margin-top:8px;letter-spacing:.03em}.experience-caption{position:absolute;left:6%;bottom:18%;max-width:350px;z-index:3}.experience-caption>span{font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;color:var(--pump);display:block;margin-bottom:12px}.experience-caption>p{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.5;color:#c1c9c3}.caption-people,.caption-good{display:none}.experience-bottom{position:absolute;bottom:28px;left:6%;right:6%;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #354139;padding-top:20px}.experience-chapters{display:flex;gap:7px;align-items:center}.chapter-dot{width:30px;height:3px;background:#3b4640;display:block}.dot-one{background:var(--pump)}.experience-scroll-label{font-family:var(--mono);font-size:.56rem;color:var(--muted);margin-left:13px;letter-spacing:.04em}.experience-skip{display:flex;gap:20px;align-items:center;font-size:.72rem}.experience-skip>span{font-size:1.2rem;color:var(--pump)}.experience-fallback{display:flex;justify-content:space-between;gap:25px;font-family:var(--mono);font-size:.7rem;color:var(--pump);padding:22px 6%;border-top:1px solid var(--line)}
@supports(animation-timeline:view()){
.experience.is-cinematic{height:260svh;view-timeline-name:--ouwee-experience;view-timeline-axis:block}.is-cinematic .experience-pin{position:sticky;top:0;height:100svh;min-height:650px}.is-cinematic .experience-meta{top:125px}.is-cinematic .experience-visual{top:60px}.is-cinematic .experience-fallback{display:none}.is-cinematic .type-people,.is-cinematic .type-good,.is-cinematic .caption-people,.is-cinematic .caption-good{display:block}.is-cinematic .broadcast-travel{left:50%;width:clamp(280px,31vw,490px);animation:pass-travel linear both}.is-cinematic .broadcast-object{animation:pass-turn linear both}.is-cinematic .pass-back{animation:pass-rear-separate linear both}.is-cinematic .pass-frame{animation:pass-frame-separate linear both}.is-cinematic .pass-tag{animation:pass-tag-separate linear both}.is-cinematic .pass-glint{animation:pass-light linear both}.is-cinematic .type-energy,.is-cinematic .caption-energy{animation:chapter-one linear both}.is-cinematic .type-people,.is-cinematic .caption-people{animation:chapter-two linear both}.is-cinematic .type-good,.is-cinematic .caption-good{animation:chapter-three linear both}.is-cinematic .type-people{left:50%;top:20%;translate:-50% 0;white-space:nowrap;font-size:clamp(4rem,11vw,11.5rem);text-align:center;color:#243a2b;z-index:0}.is-cinematic .type-people>br{display:none}.is-cinematic .caption-people{left:50%;translate:-50% 0;bottom:14%;text-align:center}.is-cinematic .caption-people>p>br{display:none}.is-cinematic .caption-people>p{font-size:.95rem}.is-cinematic .type-good,.is-cinematic .caption-good{left:59%}.is-cinematic .type-good{font-size:clamp(3.8rem,8.6vw,9rem);color:var(--pump)}.is-cinematic .dot-one{animation:dot-one linear both}.is-cinematic .dot-two{animation:dot-two linear both}.is-cinematic .dot-three{animation:dot-three linear both}
.is-cinematic .broadcast-travel,.is-cinematic .broadcast-object,.is-cinematic .pass-back,.is-cinematic .pass-frame,.is-cinematic .pass-tag,.is-cinematic .pass-glint,.is-cinematic .experience-type,.is-cinematic .experience-caption,.is-cinematic .chapter-dot{animation-timeline:--ouwee-experience;animation-range:contain 0% contain 100%}
@keyframes pass-travel{0%,15%{transform:translateX(20vw) scale(.95)}37%,57%{transform:translateX(18vw) translateY(10px) scale(.87)}80%,100%{transform:translateX(-22vw) scale(.93)}}
@keyframes pass-turn{0%,12%{transform:rotateX(7deg) rotateY(-24deg) rotateZ(8deg)}37%,57%{transform:rotateX(10deg) rotateY(24deg) rotateZ(-5deg)}80%,100%{transform:rotateX(0deg) rotateY(-9deg) rotateZ(-6deg)}}
@keyframes pass-rear-separate{0%,15%,80%,100%{transform:translateZ(-12px)}37%,57%{transform:translateZ(-145px) translateX(-28px)}}
@keyframes pass-frame-separate{0%,15%,80%,100%{transform:translateZ(10px)}37%,57%{transform:translateZ(150px) translateX(25px)}}
@keyframes pass-tag-separate{0%,15%,80%,100%{transform:translateZ(35px) rotate(-12deg)}37%,57%{transform:translateZ(210px) translateX(-26px) translateY(26px) rotate(-8deg)}}
@keyframes pass-light{0%,15%{opacity:.08;transform:translateX(-40%)}35%,55%{opacity:.55;transform:translateX(25%)}80%,100%{opacity:.15;transform:translateX(80%)}}
@keyframes chapter-one{0%,15%{opacity:1;transform:translateY(0);visibility:visible}28%,100%{opacity:0;transform:translateY(-35px);visibility:hidden}}
@keyframes chapter-two{0%,23%{opacity:0;transform:translateY(30px);visibility:hidden}35%,56%{opacity:1;transform:translateY(0);visibility:visible}69%,100%{opacity:0;transform:translateY(-25px);visibility:hidden}}
@keyframes chapter-three{0%,60%{opacity:0;transform:translateY(35px);visibility:hidden}77%,100%{opacity:1;transform:translateY(0);visibility:visible}}
@keyframes dot-one{0%,25%{background:var(--pump)}26%,100%{background:#3b4640}}@keyframes dot-two{0%,25%,66%,100%{background:#3b4640}26%,65%{background:var(--pump)}}@keyframes dot-three{0%,65%{background:#3b4640}66%,100%{background:var(--pump)}}
}
@media(min-width:1500px){.experience-type{top:26%}.is-cinematic .broadcast-travel{width:490px}.experience-caption{bottom:20%}}
@media(max-width:900px){.intro-meta,.intro-base{font-size:.55rem}.experience-pin{min-height:730px}.experience-type{font-size:clamp(3.5rem,9vw,6rem)}.broadcast-travel{width:320px}.experience-caption{max-width:250px}.experience-caption>p{font-size:1rem}.is-cinematic .type-good{font-size:7vw}.experience-meta{font-size:.54rem}.experience-scroll-label{display:none}.replay-intro{margin-left:auto}}
@media(max-width:700px){
.intro-word{font-size:19vw}.intro-meta{top:30px}.intro-meta>span:last-child{max-width:100px;text-align:right}.intro-base{bottom:32px}.intro-base>span{max-width:120px;line-height:1.7}.intro-base button{font-size:.65rem}.hero-scroll-cue{font-size:.56rem;margin-top:22px}.experience-pin{min-height:760px}.experience-meta{top:28px;left:6%;right:6%;font-size:.48rem}.experience-meta>span:last-child{max-width:95px;text-align:right}.experience-type{left:6%;top:11%;font-size:clamp(2.8rem,12vw,4rem);line-height:.95}.experience-type>br{display:none}.broadcast-travel{left:50%;top:49%;width:60vw;max-width:310px;min-width:225px}.broadcast-object{transform:rotateX(4deg) rotateY(-15deg) rotateZ(6deg)}.experience-caption{left:6%;bottom:13%;max-width:90%}.experience-caption>span{font-size:.57rem;margin-bottom:6px}.experience-caption>p{font-size:1rem}.experience-caption>p>br{display:none}.experience-bottom{bottom:24px;padding-top:15px}.experience-skip{font-size:.67rem;gap:10px}.chapter-dot{width:22px}.pass-photo{inset:32px 11px 40px}.pass-top{top:10px;left:14px;right:14px;font-size:.5rem}.pass-top>span:first-child{font-size:.68rem}.pass-bottom{bottom:10px;left:14px;right:14px;font-size:.46rem}.pass-arrow{font-size:1rem}.pass-back>span{font-size:3rem}.pass-tag{left:-18px;padding:10px 12px;bottom:29px}.pass-tag>span{font-size:1.45rem}.pass-tag small{font-size:.35rem;margin-top:6px}.pass-photo-label{font-size:.39rem;padding:5px}.experience-fallback{gap:13px;font-size:.55rem;padding:20px 6%;flex-wrap:wrap}
@supports(animation-timeline:view()){
.experience.is-cinematic{height:205svh}.is-cinematic .experience-pin{min-height:600px}.is-cinematic .experience-meta{top:107px}.is-cinematic .experience-visual{top:60px}.is-cinematic .experience-type,.is-cinematic .type-good,.is-cinematic .type-people{top:13%;left:6%;translate:none;font-size:clamp(2.3rem,11.6vw,4rem);line-height:1;text-align:left;color:var(--pump);white-space:normal}.is-cinematic .type-people>br,.is-cinematic .type-good>br{display:none}.is-cinematic .broadcast-travel{width:58vw;max-width:290px;min-width:205px;top:52%;animation-name:pass-travel-mobile}.is-cinematic .broadcast-object{animation-name:pass-turn-mobile}.is-cinematic .pass-frame{animation-name:pass-frame-mobile}.is-cinematic .pass-back{animation-name:pass-rear-mobile}.is-cinematic .pass-tag{animation-name:pass-tag-mobile}.is-cinematic .caption-energy,.is-cinematic .caption-people,.is-cinematic .caption-good{left:6%;translate:none;text-align:left;bottom:13%;max-width:88%}.is-cinematic .caption-people>p{font-size:1rem}.is-cinematic .experience-bottom{bottom:23px}
@keyframes pass-travel-mobile{0%,15%{transform:translateX(12px) scale(1)}37%,57%{transform:translateX(0) scale(.9)}80%,100%{transform:translateX(-5px) scale(1)}}
@keyframes pass-turn-mobile{0%,15%{transform:rotateX(6deg) rotateY(-20deg) rotateZ(7deg)}37%,57%{transform:rotateX(10deg) rotateY(20deg) rotateZ(-5deg)}80%,100%{transform:rotateX(0) rotateY(-8deg) rotateZ(-5deg)}}
@keyframes pass-frame-mobile{0%,15%,80%,100%{transform:translateZ(10px)}37%,57%{transform:translateZ(75px) translateX(20px)}}
@keyframes pass-rear-mobile{0%,15%,80%,100%{transform:translateZ(-12px)}37%,57%{transform:translateZ(-80px) translateX(-15px)}}
@keyframes pass-tag-mobile{0%,15%,80%,100%{transform:translateZ(35px) rotate(-12deg)}37%,57%{transform:translateZ(120px) translateX(-10px) translateY(15px) rotate(-8deg)}}
}}
@media(max-height:740px) and (min-width:701px){.is-cinematic .broadcast-travel{width:330px}.is-cinematic .experience-type{font-size:6.8vw;top:29%}.is-cinematic .experience-caption{bottom:15%}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:none!important}.hero-scroll-cue .scroll-cue-arrow{transition:none}.experience .broadcast-object{transform:rotate(-3deg)}.experience-scroll-label{display:none}.replay-intro{display:none}.intro-running .hero-copy>[data-reveal],.intro-running .hero-art-stage[data-reveal]{opacity:1;translate:none}}
/* The hero and scroll object share the same broadcast-pass material. */
.hero-art.photo-art{border:1px solid #91b49f;border-radius:18px;padding:10px;background:linear-gradient(135deg,#405c4c,#14251a 35%,#233b2b 76%,#72917b);box-shadow:5px 7px 0 #112317,7px 9px 0 #527460,0 24px 65px #0006}.photo-art .art-topline{font-family:var(--mono);font-size:.62rem;color:#d4e4d8;padding:12px 12px 20px}.photo-art .art-display{border-radius:8px;overflow:hidden;border:1px solid #65806d}.photo-art .art-bottom{padding:23px 12px 13px;align-items:center}.photo-art .art-ticker{color:var(--pump);font-family:var(--mono);font-size:1.1rem;font-weight:bold;letter-spacing:-.04em}.photo-art .art-sticker{background:var(--pump);border:1px solid #b3dfbe;box-shadow:3px 4px 0 #08150d}.photo-art .hype-button strong{font-size:1.5rem}.photo-art .hype-button>span{font-size:.59rem}.photo-art .hype-button:focus-visible{outline-color:var(--paper)}
@media(max-width:700px){.hero-art.photo-art{padding:8px;border-radius:14px}.photo-art .art-topline{font-size:.54rem;padding:9px 7px 16px}.photo-art .art-bottom{padding:18px 8px 10px}.photo-art .art-ticker{font-size:.94rem}.photo-art .hype-button strong{font-size:1.3rem}}

/* Keep the middle chapter readable beside the exploded portrait. */
@media(min-width:701px){
.is-cinematic .type-people{left:6%;top:28%;translate:none;white-space:normal;font-size:clamp(3.8rem,7.4vw,8rem);text-align:left;color:var(--pump);z-index:3}.is-cinematic .type-people>br{display:block}.is-cinematic .caption-people{left:6%;translate:none;bottom:18%;text-align:left}.is-cinematic .caption-people>p{font-size:clamp(1rem,1.5vw,1.35rem)}.is-cinematic .caption-people>p>br{display:block}
}