/* Concept : on traverse la vidéo comme un couloir de mots. Une scène 3D avance avec le scroll, chaque étape s'arrête devant un tableau (un mythe, une œuvre, une idée) pendant que le texte prolonge le propos : ce qui est dans la vidéo, et ce qui n'y est pas. */
:root{--bg:#1A1A2E;--bg2:#23233F;--ink:#F3F1EC;--mut:#B8B8CC;--line:rgba(243,241,236,.18);--star:#F9C878;--sea:#7C8CFF;
--d:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--u:Inter,system-ui,sans-serif;--s:Newsreader,Georgia,serif;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--u);overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--d);text-transform:uppercase;line-height:.9;margin:0;font-weight:800;text-wrap:balance}
:focus-visible{outline:2px solid var(--star);outline-offset:3px}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body.flat #gl{display:none}
.star{width:1em;height:1em;fill:currentColor;flex:none}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:99px;border:1px solid var(--line);font:600 14px/1 var(--u);text-decoration:none;cursor:pointer;background:rgba(255,255,255,.05);color:var(--ink);transition:transform .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px);border-color:var(--star)}
.btn.main{background:var(--ink);color:#1A1A2E;border-color:var(--ink)}
.btn.main:hover{background:var(--star);border-color:var(--star)}
/* chrome */
.top{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));font-size:13px;background:linear-gradient(#1A1A2E 0,rgba(26,26,46,0));pointer-events:none}
.top a{pointer-events:auto;text-decoration:none;color:var(--mut)}
.top a:hover{color:var(--ink)}
.top a.pill{color:#1A1A2E;background:var(--star);padding:8px 14px;border-radius:99px;font-weight:600}
.top a.pill:hover{color:#1A1A2E;background:var(--ink)}
.top .now{font:600 11px/1 var(--u);letter-spacing:.2em;text-transform:uppercase;color:var(--star);text-align:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:21;background:var(--star);transform:scaleX(0);transform-origin:left}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:19;background:#1A1A2E}
.rail{position:fixed;right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:15;display:grid;gap:14px}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;font:600 10px/1 var(--u);letter-spacing:.16em;text-transform:uppercase;color:transparent;transition:color .25s}
.rail button i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--mut);transition:.25s;background:transparent}
.rail button:hover{color:var(--ink)}
.rail button.on i{background:var(--star);border-color:var(--star);transform:scale(1.4)}
.rail button.on{color:var(--star)}
/* beats */
main{position:relative;z-index:5;overflow-x:clip}
main,.beat,.beat .in,.end{pointer-events:none}
.panel,.end .in,.top a,.rail button{pointer-events:auto}
.tip{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:16;padding:10px 18px;border-radius:99px;background:rgba(26,26,46,.8);border:1px solid var(--line);font:600 11px/1 var(--u);letter-spacing:.16em;text-transform:uppercase;color:var(--star);pointer-events:none;transition:opacity .5s;white-space:nowrap}
.tip.off{opacity:0}
@media(max-width:820px){.tip{display:none}}
.beat{min-height:112vh;display:flex;align-items:center;padding:90px max(16px,env(safe-area-inset-right,0px)) 90px max(16px,env(safe-area-inset-left,0px))}
.beat.r{justify-content:flex-end}
.beat.l{justify-content:flex-start}
.beat .in{width:100%;max-width:1180px;margin:0 auto;display:flex}
.beat.r .in{justify-content:flex-end}
.panel{width:min(480px,100%);padding:28px;border-radius:24px;background:rgba(26,26,46,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);display:grid;gap:16px}
.ct{display:flex;gap:14px;align-items:center;font:600 11px/1 var(--u);letter-spacing:.2em;text-transform:uppercase;color:var(--star)}
.ct span+span{color:var(--mut)}
.panel h2{font-size:clamp(40px,5vw,62px)}
.panel p{margin:0;color:var(--mut)}
.vid b,.plus b{display:block;font:600 11px/1 var(--u);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.vid{font:italic 400 18px/1.55 var(--s);color:var(--ink)}
.vid b{font-style:normal}
.plus{padding:16px 18px;border-left:2px solid var(--star);background:rgba(249,200,120,.07);border-radius:0 14px 14px 0;font-size:15px;color:var(--mut)}
.plus b{color:var(--star)}
.plus p+p{margin-top:10px}
.panel .btn{justify-self:start}
.fig{display:none;margin:0}
body.flat .fig{display:block;order:-1}
body.flat .fig img{width:100%;border-radius:16px;display:block}
/* hero */
.hero .panel{width:min(620px,100%);background:rgba(26,26,46,.55)}
.hero h1{display:grid;gap:4px}
.hero h1 .a,.hero h1 .c{font-size:clamp(26px,3.4vw,40px);line-height:1}
.hero h1 .b{all:unset;display:inline-block;justify-self:start;max-width:100%;cursor:pointer;font:800 clamp(56px,16vw,128px)/.8 var(--d);text-transform:uppercase;color:var(--star);position:relative;transition:transform .15s;text-shadow:0 0 60px rgba(249,200,120,.35)}
.hero h1 .b:active{transform:scale(.97)}
.hero h1 .b.go{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-5px,2px) scale(1.02)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}}
.poster{display:block;position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,rgba(249,200,120,.35),transparent 60%),linear-gradient(135deg,#2a2f6a,#0f1024);text-decoration:none;color:inherit;isolation:isolate;--mx:0;--my:0;transition:border-color .25s,transform .3s}
.poster:hover{border-color:var(--star);transform:translateY(-3px)}
.poster::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,rgba(249,200,120,.05) 0 1px,transparent 1px 7px)}
.poster .th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);z-index:-1}
.poster:hover .th{transform:scale(1.05)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,24,.55),transparent 28%,transparent 70%,rgba(10,10,24,.5));pointer-events:none}
.poster .kj{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font:700 clamp(120px,22vw,240px)/1 "Noto Sans JP","Hiragino Sans",sans-serif;color:rgba(249,200,120,.1);white-space:nowrap;z-index:-1}
.poster .pc{position:absolute;bottom:0;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));transition:transform .3s ease-out;max-width:none;user-select:none}
.poster .p1{left:-3%;height:86%;transform:translate(calc(var(--mx)*-6px),calc(var(--my)*-4px))}
.poster .p3{right:-5%;height:58%;transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-4px))}
.poster .p2{left:50%;height:104%;margin-left:-26%;transform:translate(calc(var(--mx)*8px),calc(var(--my)*4px))}
.poster .play{position:absolute;left:14px;top:14px;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:99px;background:rgba(26,26,46,.82);border:1px solid var(--line);font:600 13px/1 var(--u);backdrop-filter:blur(8px);transition:.25s}
.poster .play i{width:42px;height:42px;border-radius:50%;background:var(--star);color:#1A1A2E;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(249,200,120,.2);transition:.25s}
.poster .play svg{width:16px;margin-left:2px}
.poster:hover .play{border-color:var(--star)}
.poster:hover .play i{transform:scale(1.12)}
.poster .tg{position:absolute;right:14px;bottom:14px;z-index:2;font:600 11px/1 var(--u);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(26,26,46,.7);padding:8px 12px;border-radius:99px}
.poster .ln{position:absolute;left:18px;top:14px;max-width:38%;font:italic 400 clamp(13px,1.6vw,17px)/1.35 var(--s);color:var(--ink);text-shadow:0 1px 8px #000}
.tl{margin-top:2px}
.bar{display:flex;gap:3px;height:34px}
.bar a{display:block;min-width:0;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line);position:relative;transition:.25s;overflow:hidden;text-decoration:none}
.bar a::after{content:"";position:absolute;inset:0;background:var(--star);transform:scaleY(0);transform-origin:bottom;transition:transform .3s}
.bar a:hover::after,.bar a:focus-visible::after{transform:scaleY(1)}
.bar a span{position:absolute;left:6px;bottom:5px;z-index:1;font:600 10px/1 var(--u);color:var(--ink)}
.bar a:hover span,.bar a:focus-visible span{color:#1A1A2E}
.tlcap{display:flex;justify-content:space-between;gap:12px;min-height:2.6em;font-size:13px;color:var(--mut)}
.tlcap b{font:800 20px/1 var(--d);text-transform:uppercase;color:var(--ink)}
.hint{font:600 11px/1 var(--u);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;font-size:13px;color:var(--mut)}
.meta b{color:var(--ink);font-weight:500}
.scroll{font:600 11px/1 var(--u);letter-spacing:.2em;text-transform:uppercase;color:var(--star)}
/* outro */
form{display:grid;gap:12px}
form label{font:600 11px/1 var(--u);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.row{display:flex;gap:10px;flex-wrap:wrap}
input{flex:1;min-width:0;font:400 18px/1.3 var(--u);color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
input:focus{outline:none;border-color:var(--star)}
#say{min-height:1.4em;font-size:14px;color:var(--star)}
/* end */
.end{position:relative;z-index:5;background:linear-gradient(rgba(26,26,46,0),var(--bg) 160px);padding:140px max(16px,env(safe-area-inset-right,0px)) 60px max(16px,env(safe-area-inset-left,0px))}
.end .in{max-width:1000px;margin:0 auto;display:grid;gap:56px}
.end h2{font-size:clamp(40px,6vw,76px);margin-bottom:22px}
.refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0;padding:0;list-style:none}
.refs li{padding-block:16px;border-top:1px solid var(--line);display:grid;gap:3px}
.refs b{font:italic 500 17px/1.4 var(--s)}
.refs span{font-size:14px;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{padding:9px 16px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--mut)}
.chips b{color:var(--ink);font-weight:500}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.more div{aspect-ratio:16/9;border:1.5px dashed rgba(249,200,120,.4);border-radius:18px;display:grid;place-items:center;text-align:center;padding:14px;font-size:13px;color:var(--mut)}
.end footer{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:12px;padding-top:28px;border-top:1px solid var(--line);color:var(--mut);font-size:14px}
@media(max-width:820px){
 .poster .ln{display:none}
 .poster .play{font-size:12px;padding-right:14px}
 .poster .play i{width:34px;height:34px}
 .beat{min-height:130vh;align-items:flex-end;padding-block:90px 40px}
 .beat .in,.beat.r .in{justify-content:center}
 .panel{padding:22px;gap:14px;background:rgba(26,26,46,.86)}
 .rail{display:none}
 .refs,.more{grid-template-columns:minmax(0,1fr)}
 .top .now{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.more a{display:block;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);text-decoration:none;pointer-events:auto}
.more a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.more a:hover img{transform:scale(1.06)}
.more a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,10,24,.9))}
.more a b{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;font:600 13px/1.3 var(--u);color:var(--ink)}
.top a.back{}