/* LUCID 3D type — shared by index.html and dreams.html. Loaded after the page stylesheet. */

/* ---------------- split headings: letters flip up, then lift toward the cursor ---------------- */
.split3d{perspective:1100px;transform:perspective(1200px) rotateX(var(--tilt,0deg));transform-origin:50% 60%;transition:transform .25s linear}
.split3d .w{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
.split3d .ch{display:inline-block;transform-style:preserve-3d;transform-origin:50% 100% -.35em;opacity:0;
  transform:rotateX(-100deg) translateY(.25em);
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .55s ease;transition-delay:calc(var(--i) * 22ms)}
.split3d.in .ch{opacity:1;transform:translateZ(var(--z,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.split3d.done .ch{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,color .3s,text-shadow .3s;transition-delay:0s}
.split3d.done .ch.hot{color:var(--violet,#c8102e)}
.mind .split3d.done .ch.hot,.whitelist .split3d.done .ch.hot,.stage-title .ch.hot{color:#e0485a}
.split3d em .ch{transform-origin:50% 100% -.2em}

/* ---------------- hero: extruded letters that follow the mouse ---------------- */
.hero-title h1.extrude{mix-blend-mode:normal;perspective:900px;transform:rotateX(var(--hy,0deg)) rotateY(var(--hx,0deg));transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.extrude .w{display:inline-block;transform-style:preserve-3d}
.extrude .ch{display:inline-block;color:#120f0d;opacity:0;transform:translateY(-.6em) rotateX(90deg) scale(.8);transform-origin:50% 50% -.3em;
  transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity .6s;transition-delay:calc(var(--i) * 90ms);
  text-shadow:0 1px 0 #2a1210,0 2px 0 #4a0610,0 3px 0 #5a0612,0 4px 0 #6a0816,0 5px 0 #7a0b1a,0 6px 0 #8e0b20,0 7px 0 #a50d25,0 8px 0 #c8102e,
    0 18px 26px rgba(90,6,18,.35),0 36px 60px rgba(90,6,18,.18)}
.extrude.in .ch{opacity:1;transform:none;animation:float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.4s)}
@keyframes float{0%,100%{transform:translateZ(0) translateY(0)}50%{transform:translateZ(18px) translateY(-6px)}}
.swap{perspective:600px}
.swap-word{transform-origin:50% 100%}
.swap-word.out{transform:rotateX(90deg) translateY(-.2em)!important}

/* ---------------- dark sections: extrusion in violet ---------------- */
.mind .mega .ch,.whitelist .mega .ch{text-shadow:0 1px 0 #5a0612,0 2px 0 #7a0b1a,0 3px 0 #8e0b20,0 4px 0 #c8102e,0 14px 30px rgba(200,16,46,.35)}
.mega .ch{text-shadow:0 1px 0 #cdbfa6,0 2px 0 #bfae92,0 3px 0 #b19d7e,0 4px 0 #a38c6c,0 12px 22px rgba(18,15,13,.14)}
.mega em .ch{text-shadow:none}

/* ---------------- a heading that rises from flat to upright ---------------- */
[data-stand]{transform:perspective(900px) rotateX(var(--stand,0deg)) scale(var(--standS,1));transform-origin:50% 100%;will-change:transform}
[data-stand].split3d{transform:perspective(900px) rotateX(var(--stand,0deg)) scale(var(--standS,1))}

/* ---------------- cylinder of letters ---------------- */
.cyl{position:relative;height:clamp(240px,30vw,400px);perspective:1600px;display:grid;place-items:center;overflow:hidden;margin:clamp(20px,4vw,60px) 0}
.cyl-ring{position:relative;width:0;height:0;transform-style:preserve-3d;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(46px,7vw,112px);line-height:1;
  transform:rotateX(-9deg) rotateZ(-3deg) rotateY(calc(var(--spin,0deg) * -1))}
.cyl-ring span{position:absolute;left:0;top:0;width:.66em;margin:-.5em 0 0 -.33em;text-align:center;color:var(--ink,#120f0d);
  transform:rotateY(var(--a)) translateZ(var(--R,300px));backface-visibility:visible;
  text-shadow:0 1px 0 #c8102e,0 2px 0 #8e0b20,0 3px 0 #7a0b1a,0 8px 18px rgba(90,6,18,.25)}
.cyl-ring span:nth-child(7n+3){color:#c8102e;text-shadow:none}
.cyl{-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}

/* ---------------- crossing 3D bands ---------------- */
.bands{position:relative;height:clamp(160px,20vw,250px);perspective:900px;overflow:hidden;pointer-events:none;margin:20px 0}
.band{position:absolute;left:-12%;right:-12%;top:50%;padding:clamp(10px,1.3vw,16px) 0;white-space:nowrap;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.8vw,40px);letter-spacing:.02em;box-shadow:0 26px 60px -22px rgba(18,15,13,.6)}
.band.b1{background:#120f0d;color:#fff;transform:translateY(-50%) rotateZ(-4deg) rotateX(24deg) translateZ(20px)}
.band.b2{background:#c8102e;color:#fff;transform:translateY(-50%) rotateZ(3.5deg) rotateX(-24deg) translateZ(-30px)}
.band .track{display:flex;width:max-content;animation:bandmove 36s linear infinite}
.band.b2 .track{animation-duration:44s;animation-direction:reverse}
.band .track span{padding-right:.5em}
.band .track i{font-style:normal;color:#b8945a;padding:0 .45em}
.band.b2 .track i{color:#120f0d}
@keyframes bandmove{to{transform:translateX(-50%)}}

/* ---------------- odometer digits ---------------- */
[data-odometer]{display:inline-flex;align-items:baseline}
.odo-d{display:inline-block;height:.93em;line-height:.93;overflow:hidden;perspective:300px;vertical-align:baseline}
.odo-s{display:flex;flex-direction:column;transform:translateY(0) rotateX(0);transition:transform 2.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k) * 70ms)}
.odo-s i{font-style:normal;display:block;height:.93em}
[data-odometer].roll .odo-s{transform:translateY(calc(var(--n) * -.93em))}

/* ---------------- footer: stacked outline volume ---------------- */
.foot-big.vol{position:relative;display:grid;place-items:center;-webkit-text-stroke:0;color:transparent;perspective:1000px;transform-style:preserve-3d;height:.82em}
.foot-big.vol span{grid-area:1/1;-webkit-text-stroke:1.2px rgba(200,16,46,calc(.55 - var(--l) * .05));color:transparent;
  transform:rotateY(var(--vx,0deg)) rotateX(var(--vy,0deg)) translateZ(calc(var(--l) * -14px));transition:transform .8s cubic-bezier(.16,1,.3,1)}
.foot-big.vol span:first-child{-webkit-text-stroke:1.4px #120f0d}

/* ---------------- rolling letters on hover (menus, big pills) ---------------- */
.roll3d .rl{display:inline-block;white-space:nowrap}
.roll3d .w{display:inline-block;transform-style:preserve-3d}
.roll3d .ch.r{display:inline-block;transform-origin:50% 50% -.5em;transition:transform .55s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * 18ms)}
.roll3d:hover .ch.r{transform:rotateX(360deg)}
.menu a.roll3d{perspective:700px}

/* ---------------- stage numbers flip ---------------- */
.stage-row b{display:inline-block;transition:transform .9s cubic-bezier(.16,1,.3,1),color .4s}
.stage-row:hover b{transform:perspective(500px) rotateY(360deg);color:var(--violet,#c8102e)}

@media (max-width:720px){
  .cyl-ring{font-size:clamp(34px,11vw,60px)}
  .extrude .ch{text-shadow:0 1px 0 #2a1210,0 2px 0 #5a0612,0 3px 0 #7a0b1a,0 4px 0 #c8102e,0 12px 20px rgba(90,6,18,.3)}
}
@media (prefers-reduced-motion:reduce){
  .split3d,.split3d .ch,.extrude .ch,[data-stand],.odo-s{transition:none!important;animation:none!important}
  .split3d .ch,.extrude .ch{opacity:1;transform:none}
  .band .track{animation:none}
}

/* Dreams page: the sphere title stays centred and waits for the intro to end */
.stage-title.split3d{transform:translateY(-50%);perspective:900px}
.stage-title .ch{text-shadow:0 4px 40px rgba(0,0,0,.85),0 1px 0 #5a0612,0 2px 0 #3a0a10,0 3px 0 #1c0a08}
.arch-head h2.split3d .ch{text-shadow:0 1px 0 #5a0612,0 2px 0 #3a0a10}

/* ================= LUCID: the gilded wordmark (Cinzel, gold leaf) — hero, nav, menus, footer ================= */
:root{--gold-leaf:linear-gradient(180deg,#fbeec4 0%,#e3c27a 28%,#a9823e 52%,#f0d698 66%,#8a6527 88%,#c9a35a 100%);
  --gold-deep:linear-gradient(180deg,#d9b46a 0%,#a9823e 30%,#6b4a14 55%,#b8945a 72%,#4f3410 100%)}
.gild{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.16em;background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;color:transparent}
/* hero: letters stay 3D (they float and follow the mouse); the depth is a stack of dark-gold drop shadows */
.hero-title h1{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.14em;padding-left:.14em;font-size:clamp(58px,9vw,140px)}
.extrude .ch,[data-time=night] .extrude .ch{color:#ecd08a;background:none;filter:none;
  text-shadow:0 -1px 0 #fff3cf,0 1px 0 #c9a35a,0 2px 0 #b8945a,0 3px 0 #a07c3c,0 4px 0 #8a6527,0 5px 0 #74541e,0 6px 0 #5e4317,0 7px 0 #4a3010,0 8px 0 #3a250c,
    0 18px 30px rgba(200,16,46,.45),0 36px 70px rgba(200,16,46,.22)}
html:not([data-time=night]) .extrude .ch{color:#b08a44;
  text-shadow:0 -1px 0 #f3dfa8,0 1px 0 #9c7a3c,0 2px 0 #8a6527,0 3px 0 #74541e,0 4px 0 #5e4317,0 5px 0 #4a3010,0 6px 0 #3a250c,0 14px 22px rgba(90,6,18,.25)}
/* nav wordmark */
.logo>span{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.18em;font-size:17px;background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;color:transparent}
html:not([data-time=night]) .nav .logo>span{background:var(--gold-deep);-webkit-background-clip:text;background-clip:text}
.logo>span em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;letter-spacing:0;font-size:19px;-webkit-text-fill-color:#c9bba3}
/* full-screen menus: Roman capitals, bone at rest, gold leaf on hover */
.menu a{font-family:'Cinzel',serif;font-weight:500;letter-spacing:.08em;font-size:clamp(30px,5.4vw,68px);color:rgba(242,237,228,.62)}
.menu a:hover .ch,.menu a:focus-visible .ch{color:transparent;background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text}
.menu .m-brand{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:var(--gut);font-size:22px}
/* footer: a gilded inscription with a faint engraved echo behind it */
.foot-big.vol{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.06em;font-size:clamp(70px,19vw,330px)}
.foot-big.vol span{-webkit-text-stroke:1px rgba(184,148,90,calc(.42 - var(--l) * .045))}
.foot-big.vol span:first-child{-webkit-text-stroke:0;color:transparent;background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #4a3010) drop-shadow(0 20px 40px rgba(200,16,46,.3))}
html:not([data-time=night]) .foot-big.vol span:first-child{background:var(--gold-deep);-webkit-background-clip:text;background-clip:text}
[data-time=night] .foot-big.vol span:first-child{-webkit-text-stroke:0}