.onde.opening-active{overflow:hidden}
.onde-opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#15185a;color:#f5eddf;opacity:1;transition:opacity .6s ease}
.onde-opening.is-gone{opacity:0;pointer-events:none}
.opening-content{position:relative;z-index:2;text-align:center;width:100%;padding:20px}
.opening-content>p,.opening-content>small{display:block;font:800 clamp(9px,1vw,13px)/1.4 'DM Sans',sans-serif;letter-spacing:.2em}
.opening-content>p{margin-bottom:clamp(25px,5vw,65px)}
.opening-content>small{margin-top:clamp(22px,4vw,50px);opacity:0;animation:opening-after .5s 2s forwards}
.opening-name{display:flex;justify-content:center;align-items:baseline;gap:.005em;font:800 clamp(102px,20vw,330px)/.78 Archivo,sans-serif;letter-spacing:-.105em;white-space:nowrap}
.opening-name span{display:inline-block;opacity:0;transform:translateY(-110vh) rotate(-18deg)}
.onde-opening.is-playing .opening-name span{animation:letter-drop .8s cubic-bezier(.18,.9,.32,1.1) forwards}
.onde-opening.is-playing .opening-name span:nth-child(1){animation-delay:.1s}.onde-opening.is-playing .opening-name span:nth-child(2){animation-delay:.28s}.onde-opening.is-playing .opening-name span:nth-child(3){animation-delay:.46s}.onde-opening.is-playing .opening-name span:nth-child(4){animation-delay:.64s}
.opening-name i{position:relative;z-index:2;display:block;align-self:flex-end;width:.105em;height:.105em;margin:0 0 .05em .035em;border-radius:50%;background:#d6ed75;opacity:0;transform:translateY(-100vh)}
.onde-opening.is-playing .opening-name i{animation:dot-drop .62s 1.35s cubic-bezier(.14,.85,.4,1.2) forwards}
.opening-halo{position:absolute;z-index:1;left:55%;top:50%;width:20vmax;height:20vmax;border-radius:50%;background:#ec766c;transform:translate(-50%,-50%) scale(0);opacity:0}
.onde-opening.is-playing .opening-halo{animation:bubble-bloom 1.35s 1.72s cubic-bezier(.2,.75,.2,1) forwards}
.opening-skip{position:absolute;z-index:3;right:3vw;bottom:30px;background:none;border:1px solid #ffffff77;border-radius:100px;color:inherit;padding:12px 17px;font:700 11px 'DM Sans',sans-serif}
@keyframes letter-drop{0%{opacity:1;transform:translateY(-110vh) rotate(-18deg)}60%{transform:translateY(11px) rotate(4deg)}77%{transform:translateY(-18px) rotate(-2deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes dot-drop{0%{opacity:1;transform:translateY(-100vh) scale(.7)}60%{transform:translateY(9px) scale(1.18)}80%{transform:translateY(-12px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bubble-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}15%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(12)}}
@keyframes opening-after{to{opacity:1}}

.record-journey{position:relative;height:400vh;background:#191b6d}
.journey-sticky{--journey-progress:0;--journey-tilt:0;position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 70% 50%,#42427d 0,#252868 46%,#191b6d 78%);color:#f3edff}
.journey-grain{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.24;background:repeating-radial-gradient(circle at 70% 50%,transparent 0 24px,#ffffff09 25px 26px);mix-blend-mode:screen}
.journey-top,.journey-bottom{position:absolute;z-index:8;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:25px;font:800 11px/1.4 'DM Sans',sans-serif;letter-spacing:.15em}
.journey-top{top:35px}.journey-bottom{bottom:35px}.journey-bottom .ui-arrow{width:17px;height:17px;margin-left:10px}
.journey-copy{position:absolute;z-index:6;top:50%;left:7vw;transform:translateY(-50%);max-width:750px;width:55vw}
.journey-kicker{font:800 12px 'DM Sans',sans-serif;letter-spacing:.2em;color:#d6ed75}
.journey-copy h1{font:800 clamp(75px,9vw,160px)/.88 Archivo,sans-serif;letter-spacing:-.085em;margin:30px 0;filter:drop-shadow(0 7px 20px #14165050)}
.journey-copy h1 em{font-style:normal;color:#d6ed75}
.journey-description{font:500 clamp(15px,1.5vw,21px)/1.55 'DM Sans',sans-serif;max-width:480px;min-height:4em}
.journey-link{display:inline-flex;align-items:center;gap:17px;margin-top:25px;padding:14px 0;border-bottom:1px solid #d6ed75;font:800 12px 'DM Sans',sans-serif;letter-spacing:.03em}
.journey-link:hover .ui-arrow{transform:translate(3px,-3px)}
.journey-record{position:absolute;z-index:2;width:min(90vw,1180px);height:min(90vw,1180px);right:-35vw;top:50%;margin-top:calc(min(90vw,1180px)/-2);transform:perspective(1100px) translateX(calc(var(--journey-tilt)*-13vw)) translateY(calc(var(--journey-tilt)*13vh)) rotateX(calc(var(--journey-tilt)*68deg)) rotateZ(calc(var(--journey-progress)*350deg)) scale(calc(1 - var(--journey-tilt)*.49));transform-origin:50% 50%;will-change:transform}
.journey-record-motion{width:100%;height:100%;filter:drop-shadow(-35px 30px 18px #04072a75)}
.journey-record-art{position:relative;width:100%;height:100%;border-radius:50%;border:12px solid #0d102e;background:repeating-radial-gradient(circle at center,#101427 0 3px,#222b4b 4px 5px,#0c1029 7px 8px,#283050 10px 11px);box-shadow:inset 0 0 0 17px #101529,inset 0 0 0 22px #4c527270,inset 0 0 45px #000,0 45px 80px #05082690;animation:journey-spin 9s linear infinite}
.journey-record-art:before{content:'';position:absolute;inset:1%;border-radius:50%;pointer-events:none;background:conic-gradient(from 25deg,transparent 0 21%,#ffffff13 27%,transparent 35% 66%,#ffffff1b 74%,transparent 85%)}
.journey-record-art:after{content:'';position:absolute;inset:10%;border:1px solid #ffffff38;border-radius:50%;pointer-events:none}
.journey-label{position:absolute;inset:32%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#d6ed75;color:#1e2256;box-shadow:0 0 0 7px #181a3d,0 0 0 15px #f0e8da2e;transform:rotate(-20deg)}
.journey-label b{font:800 clamp(32px,5vw,78px)/1 Archivo,sans-serif;letter-spacing:-.08em}.journey-label span{font:800 clamp(6px,.8vw,11px)/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-align:center;margin-top:8px}.journey-label i{width:11px;height:11px;border-radius:50%;background:#212452;margin-top:12px}
@keyframes journey-spin{to{transform:rotate(360deg)}}
.journey-orbit{position:absolute;z-index:4;font:800 12px 'DM Sans',sans-serif;letter-spacing:.22em;transition:opacity .45s,transform .8s;pointer-events:none}
.orbit-one{right:18vw;top:16%;color:#ffd0be;transform:rotate(9deg)}.orbit-two{right:26vw;bottom:19%;color:#d6ed75;transform:rotate(-8deg)}
.journey-sticky[data-chapter="1"] .orbit-two,.journey-sticky[data-chapter="3"] .orbit-one,.journey-sticky[data-chapter="4"] .orbit-one{opacity:0;transform:translateY(30px) rotate(-8deg)}
.journey-sticky[data-chapter="4"]{background:radial-gradient(circle at 65% 80%,#4a2d70,#21236b 54%,#191b6d)}
.journey-rail{position:absolute;z-index:9;bottom:0;left:0;right:0;height:5px;background:#ffffff35}.journey-rail i{display:block;width:0;height:100%;background:#d6ed75}
@media(max-width:800px){.journey-sticky{min-height:0}.journey-top,.journey-bottom{left:22px;right:22px;font-size:8px}.journey-top{top:25px}.journey-bottom{bottom:25px}.journey-top span:last-child,.journey-bottom span:last-child{display:none}.journey-copy{left:6vw;top:19%;transform:none;width:88vw}.journey-copy h1{font-size:clamp(63px,13vw,100px);margin:17px 0}.journey-description{font-size:14px;max-width:295px;min-height:4em}.journey-link{margin-top:10px}.journey-record{width:113vw;height:113vw;right:-34vw;top:auto;bottom:-12vw;margin-top:0;transform:perspective(700px) translateX(calc(var(--journey-tilt)*-9vw)) translateY(calc(var(--journey-tilt)*9vh)) rotateX(calc(var(--journey-tilt)*66deg)) rotateZ(calc(var(--journey-progress)*350deg)) scale(calc(1 - var(--journey-tilt)*.42))}.journey-label b{font-size:30px}.journey-label span{font-size:6px}.journey-orbit{font-size:8px}.orbit-one{right:5vw;top:60%}.orbit-two{right:42vw;bottom:14%}.opening-name{font-size:clamp(105px,23vw,180px)}}
@media(max-width:480px){.journey-copy{top:15%}.journey-copy h1{font-size:clamp(57px,14vw,76px)}.journey-description{max-width:275px}.journey-record{bottom:-24vw}.journey-orbit{display:none}.opening-content>p,.opening-content>small{font-size:8px}.opening-skip{right:20px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.onde-opening{display:none}.journey-record-art{animation:none}.journey-record,.journey-orbit,.journey-copy h1,.journey-link .ui-arrow{transition:none!important;animation:none!important}}

/* Le point du logotype devient le disque qui ouvre la première scène. */
.onde-opening .opening-halo{left:var(--dot-x,70vw);top:var(--dot-y,50vh);width:min(90vw,1180px);height:min(90vw,1180px);z-index:1;opacity:0;background:#d6ed75;transform:translate(-50%,-50%) scale(.035);box-shadow:0 0 0 0 #0000;transition:left 1.55s cubic-bezier(.18,.78,.18,1),top 1.55s cubic-bezier(.18,.78,.18,1),transform 1.55s cubic-bezier(.18,.78,.18,1),box-shadow 1.3s,opacity .2s}
.onde-opening.is-playing .opening-halo{animation:none;opacity:0}
.onde-opening .opening-halo:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at center,#111527 0 3px,#222b4b 4px 5px,#0c1029 7px 8px,#283050 10px 11px);border:10px solid #0d102e;opacity:0;transition:opacity .7s .45s}
.onde-opening .opening-halo:after{content:'';position:absolute;inset:12%;border:1px solid #ffffff45;border-radius:50%;opacity:0;transition:opacity .7s .7s}
.opening-halo-label{position:absolute;z-index:2;inset:32%;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:#d6ed75;color:#1e2256;font:800 clamp(32px,5vw,78px)/1 Archivo,sans-serif;letter-spacing:-.08em;opacity:0;transition:opacity .6s .65s}
.opening-halo-label small{font:800 clamp(7px,.8vw,11px)/1.4 'DM Sans',sans-serif;letter-spacing:.1em;margin-top:12px}
.onde-opening.is-morphing .opening-halo{left:var(--record-x,70vw);top:var(--record-y,50vh);opacity:1;transform:translate(-50%,-50%) scale(1) rotate(180deg);box-shadow:-30px 35px 65px #04072a80}
.onde-opening.is-morphing .opening-halo:before,.onde-opening.is-morphing .opening-halo:after,.onde-opening.is-morphing .opening-halo-label{opacity:1}
.onde-opening.is-morphing .opening-name i{opacity:0;transform:translateY(0);animation:none;transition:opacity .12s}
.onde-opening.is-morphing .opening-content>p,.onde-opening.is-morphing .opening-content>small{opacity:0;transition:opacity .35s}
@media(max-width:800px){.onde-opening .opening-halo{width:113vw;height:113vw}.opening-halo-label{font-size:34px}.opening-halo-label small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.onde-opening .opening-halo{transition:none}}