.intro-sequence{--hero-opacity:1;--hero-shift:0px;--hero-scale:1;--white-shift:104%;--white-text:0;height:210svh;position:relative;background:#fff;isolation:isolate;view-timeline-name:--intro;view-timeline-axis:block}.intro-stage{position:sticky;top:0;height:100svh;min-height:700px;overflow:hidden;background:#051a2f;isolation:isolate}.intro-stage>.universe-film{position:absolute;inset:0;height:100%;min-height:0;z-index:1;opacity:var(--hero-opacity);transform:translate3d(0,var(--hero-shift),0) scale(var(--hero-scale));transform-origin:50% 40%;will-change:transform,opacity}.intro-stage>.statement{position:absolute;inset:0;z-index:2;height:100%;min-height:0;background:#fff;color:#051a2f;padding:70px var(--p) 50px;display:flex;flex-direction:column;justify-content:center;transform:translate3d(0,var(--white-shift),0);will-change:transform;pointer-events:none;margin:0}.intro-sequence.is-white .statement{pointer-events:auto}.intro-stage>.statement>.eyebrow{position:absolute;top:55px;left:var(--p);color:#5401ff;opacity:var(--white-text)}.intro-stage>.statement h2{font-size:clamp(50px,7.5vw,118px);margin:0;line-height:1.13;max-width:1100px;opacity:var(--white-text);transform:translate3d(0,calc((1 - var(--white-text))*28px),0);will-change:transform,opacity}.intro-stage>.statement .word-reveal span{color:#051a2f;transition:none}.intro-stage>.statement .statement-bottom{margin-top:65px;opacity:var(--white-text);transform:translate3d(0,calc((1 - var(--white-text))*20px),0);transition:none;align-items:center;gap:40px}.intro-stage>.statement .statement-bottom p{max-width:460px;color:#27435f;font-size:18px;line-height:1.8}.intro-stage>.statement .asterisk{font-size:90px;color:#9d89fc}.intro-stage>.statement:after{content:'VAN MOGELIJKHEDEN NAAR DAGELIJKSE PRAKTIJK';position:absolute;bottom:28px;left:var(--p);right:var(--p);padding-top:18px;border-top:1px solid #051a2f20;font-size:8px;letter-spacing:2px;color:#27435f;opacity:var(--white-text)}
@keyframes intro-retreat{0%,8%{opacity:1;transform:translate3d(0,0,0) scale(1)}55%,100%{opacity:0;transform:translate3d(0,-55px,0) scale(.975)}}
@keyframes intro-white-rise{0%,16%{transform:translate3d(0,104%,0)}76%,100%{transform:translate3d(0,0,0)}}
@keyframes intro-text-arrive{0%,48%{opacity:0;transform:translate3d(0,28px,0)}85%,100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes intro-label-arrive{0%,48%{opacity:0}85%,100%{opacity:1}}
@supports(animation-timeline:view()){
 .intro-stage>.universe-film{animation:intro-retreat linear both;animation-timeline:--intro;animation-range:contain 0% contain 100%}
 .intro-stage>.statement{animation:intro-white-rise linear both;animation-timeline:--intro;animation-range:contain 0% contain 100%}
 .intro-stage>.statement h2,.intro-stage>.statement .statement-bottom{animation:intro-text-arrive linear both;animation-timeline:--intro;animation-range:contain 0% contain 100%}
 .intro-stage>.statement>.eyebrow,.intro-stage>.statement:after{animation:intro-label-arrive linear both;animation-timeline:--intro;animation-range:contain 0% contain 100%}
}
@media(max-width:900px){.intro-stage>.statement h2{font-size:9vw}.intro-stage>.statement .statement-bottom p{font-size:16px;max-width:400px}.intro-stage>.statement .statement-bottom{margin-top:50px}}
@media(max-width:600px){.intro-sequence{height:205svh}.intro-stage{min-height:0;height:100svh}.intro-stage>.universe-film .film-heading{top:18%;font-size:11.5vw!important}.intro-stage>.universe-film .film-topline{top:100px}.intro-stage>.universe-film .film-chapter{bottom:165px}.intro-stage>.universe-film .film-chapter-title{font-size:16px}.intro-stage>.universe-film .film-chapter-description{font-size:11px}.intro-stage>.statement{padding-top:85px;padding-bottom:70px}.intro-stage>.statement>.eyebrow{top:35px;font-size:7px}.intro-stage>.statement h2{font-size:12vw;line-height:1.15}.intro-stage>.statement .statement-bottom{margin-top:40px;gap:25px;align-items:start}.intro-stage>.statement .asterisk{font-size:55px}.intro-stage>.statement .statement-bottom p{font-size:14px;line-height:1.75}.intro-stage>.statement:after{font-size:6px;letter-spacing:1px;bottom:25px}}
@media(prefers-reduced-motion:reduce){.intro-sequence{height:auto;view-timeline-name:none}.intro-stage{height:auto;min-height:0;position:relative;overflow:visible}.intro-stage>.universe-film{position:relative;height:100svh;min-height:700px;opacity:1;transform:none;animation:none;will-change:auto}.intro-stage>.statement{position:relative;height:auto;min-height:100svh;transform:none;padding-top:110px;padding-bottom:90px;animation:none;will-change:auto}.intro-stage>.statement h2,.intro-stage>.statement .statement-bottom,.intro-stage>.statement>.eyebrow,.intro-stage>.statement:after{opacity:1;transform:none;animation:none;will-change:auto}}

/* Fine orbital lines give the white section a quiet sense of motion. */
.intro-stage>.statement .statement-bottom{justify-content:flex-end}
.intro-stage>.statement>.eyebrow,.intro-stage>.statement h2,.intro-stage>.statement .statement-bottom{z-index:1;position:relative}
.intro-stage>.statement>.eyebrow{position:absolute}
.statement-lines{position:absolute;left:-8%;bottom:-10%;width:58vw;height:38vw;max-width:800px;max-height:520px;pointer-events:none;opacity:.65;z-index:0;contain:layout style}
.statement-orbit{position:absolute;border:1px solid #9d89fc55;border-radius:50%;animation-play-state:paused!important;transform-origin:50% 50%}
.statement-orbit i{position:absolute;left:19%;top:10%;width:4px;height:4px;border-radius:50%;background:#9d89fc90}
.orbit-first{inset:20% 0;animation:white-orbit-one 42s ease-in-out infinite}
.orbit-second{inset:8% 12%;animation:white-orbit-two 51s ease-in-out infinite;border-color:#5401ff20}
.orbit-third{inset:0 23%;animation:white-orbit-three 63s ease-in-out infinite;border-color:#9d89fc40}
.statement.lines-visible .statement-orbit{animation-play-state:running!important}
@keyframes white-orbit-one{0%,100%{transform:rotate(-22deg) translate3d(0,0,0)}50%{transform:rotate(-9deg) translate3d(8px,-5px,0)}}
@keyframes white-orbit-two{0%,100%{transform:rotate(29deg)}50%{transform:rotate(43deg)}}
@keyframes white-orbit-three{0%,100%{transform:rotate(67deg)}50%{transform:rotate(79deg)}}
@media(max-width:600px){.statement-lines{width:105vw;height:70vw;left:-45%;bottom:-3%;opacity:.45}.intro-stage>.statement .statement-bottom p{max-width:85%}.intro-stage>.statement .statement-bottom{margin-top:35px}}
@media(prefers-reduced-motion:reduce){.statement-orbit{animation:none!important}.orbit-first{transform:rotate(-22deg)}.orbit-second{transform:rotate(29deg)}.orbit-third{transform:rotate(67deg)}}

/* Mobile: use the open upper-right corner rather than the lower text area. */
@media(max-width:600px){.statement-lines{left:auto;right:-39%;top:-2%;bottom:auto;width:110vw;height:79vw;opacity:.52}.intro-stage>.statement .statement-bottom p{max-width:100%}}

/* Purple vector globe, gently rotating in the existing orbital illustration. */
.statement-lines{opacity:1}
.statement-globe{position:absolute;left:50%;top:50%;width:30%;max-width:220px;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 15px 20px #46258c16)}
.statement-globe svg{display:block;width:100%;height:100%;overflow:visible}
.globe-map{animation:globe-turn 32s linear infinite;animation-play-state:paused}
.statement.lines-visible .globe-map{animation-play-state:running}
@keyframes globe-turn{from{transform:translate(0,20px)}to{transform:translate(-400px,20px)}}
@media(max-width:600px){.statement-globe{width:29%;left:44%;top:52%}.statement-lines{opacity:.85}}
@media(prefers-reduced-motion:reduce){.globe-map{animation:none;transform:translate(-100px,20px)}}

/* Keep the opening controls inside the visible mobile screen as browser chrome moves. */
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
 .intro-sequence{background:#051a2f}
 .intro-stage{height:100dvh;min-height:0}
 .intro-stage>.universe-film{height:100%;min-height:0}
 .intro-stage>.universe-film .film-controls{bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:3}
 .intro-stage>.universe-film .film-chapter{bottom:calc(180px + env(safe-area-inset-bottom,0px))}
 .intro-stage>.universe-film .film-stage{min-height:44px;padding-top:14px;padding-bottom:12px}
}