/* Layered anime portraits with a fluid GPU transformation and whole-image fallback. */
.hero{--portrait-reveal:0;--portrait-float:0}
#ambient-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:1}
.hero-portrait{perspective:1000px;transform-style:preserve-3d;aspect-ratio:1;width:min(62vw,850px,calc(100svh - 125px));bottom:22px}
.portrait-reveal-shell{position:relative;width:100%;height:100%}
.portrait-depth{position:relative;width:100%;height:100%;transform:translateY(calc(var(--portrait-float)*8px)) rotateX(calc(var(--pointer-y)*-4deg)) rotateY(calc(var(--pointer-x)*6deg));transform-origin:50% 58%;transform-style:preserve-3d;will-change:transform}
.hero-portrait .portrait-real{position:relative;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;z-index:1;clip-path:none!important;opacity:calc(1 - var(--portrait-reveal));transition:opacity .14s linear}
.hero-portrait .portrait-animated{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;z-index:2;clip-path:none!important;opacity:var(--portrait-reveal);filter:drop-shadow(0 15px 22px rgba(45,30,20,.13));transition:opacity .14s linear}
.je-fluid-portrait-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none;filter:drop-shadow(0 15px 22px rgba(45,30,20,.13))}
.portrait-depth.je-fluid-ready .portrait-real,.portrait-depth.je-fluid-ready .portrait-animated{opacity:0!important;transition:none}
.hero-note,.hero-aside{background:var(--paper);padding:17px 20px 20px 0}.hero-aside{padding:17px 0 20px 20px}
.hero-wordmark img{opacity:.18;animation:brandDrift 16s ease-in-out infinite alternate}
.hero-rings{opacity:.16;animation:orbitalDrift 18s ease-in-out infinite alternate}.hero-rings i:nth-child(even){animation:ringBreathe 10s ease-in-out infinite alternate}
.floating-vinyl{position:absolute;width:150px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at 50%,#151812 0 3px,#343a2d 3px 4px,#151812 4px 7px);box-shadow:0 18px 18px rgba(29,29,21,.13),inset 0 0 0 1px #52584b;z-index:0;pointer-events:none;transform-style:preserve-3d}
.floating-vinyl:before{content:'';position:absolute;width:32%;height:32%;left:34%;top:34%;border-radius:50%;background:var(--orange);box-shadow:inset 0 0 0 1px rgba(15,15,15,.2)}
.floating-vinyl:after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 20%,rgba(237,233,223,.28) 25%,transparent 31% 68%,rgba(237,233,223,.12) 75%,transparent 81%);animation:vinylSpin 5s linear infinite}
.floating-vinyl i{position:absolute;inset:47%;border-radius:50%;background:var(--paper);z-index:1}
.vinyl-one{left:20%;top:15%;animation:vinylDriftOne 6.5s ease-in-out infinite alternate}.vinyl-two{width:95px;right:19%;top:55%;animation:vinylDriftTwo 8s ease-in-out infinite alternate}
.ambient-colon{position:absolute;left:12%;top:34%;display:flex;flex-direction:column;gap:28px;z-index:0;animation:colonOrbit 7s ease-in-out infinite alternate;pointer-events:none}
.ambient-colon i{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 28% 25%,#ffc08d,var(--orange) 55%,#952709);box-shadow:6px 10px 13px rgba(126,52,26,.12)}
@keyframes brandDrift{from{translate:-16px 8px;rotate:-2deg}to{translate:22px -14px;rotate:2deg}}
@keyframes orbitalDrift{from{transform:rotate(-27deg) translate(-4%,3%)}to{transform:rotate(-9deg) translate(5%,-3%)}}
@keyframes ringBreathe{from{opacity:.5;scale:.93}to{opacity:1;scale:1.07}}
@keyframes vinylSpin{to{rotate:360deg}}
@keyframes vinylDriftOne{from{transform:perspective(600px) rotateX(44deg) rotateY(-28deg) rotateZ(-24deg) translate(-20px,-22px)}to{transform:perspective(600px) rotateX(68deg) rotateY(20deg) rotateZ(25deg) translate(30px,32px)}}
@keyframes vinylDriftTwo{from{transform:perspective(600px) rotateX(22deg) rotateY(54deg) translate(10px,16px)}to{transform:perspective(600px) rotateX(58deg) rotateY(15deg) translate(-22px,-48px)}}
@keyframes colonOrbit{from{transform:translate(-8px,12px) rotate(-16deg)}to{transform:translate(44px,-56px) rotate(28deg)}}
.reduce-motion .portrait-depth{transform:none;will-change:auto}.reduce-motion .portrait-animated,.reduce-motion .portrait-real{transition:none}.reduce-motion .floating-vinyl{transform:rotateX(45deg)}.reduce-motion .hero-rings{transform:rotate(-24deg)}
@media(min-width:1101px) and (max-height:820px){.hero-portrait{width:min(56vw,740px,calc(100svh - 145px));max-height:none}.floating-vinyl{width:125px}.vinyl-one{left:21%;top:14%}.vinyl-two{width:85px}}
@media(min-width:761px) and (max-width:1100px){.hero-portrait{width:min(78vw,calc(100svh - 125px))}.vinyl-one{left:25%;top:19%;width:110px}.vinyl-two{right:12%;top:55%;width:75px}.ambient-colon{left:10%;top:36%}}
@media(max-width:760px){.hero-note{top:155px}.hero-note h1{font-size:30px;margin-top:9px}.hero-note .eyebrow{font-size:7px}.hero-wordmark{top:34%}.hero-portrait{width:104%;bottom:140px}.portrait-depth{transform:translateY(calc(var(--portrait-float)*6px))}.vinyl-one{left:auto;right:14%;top:22%;width:76px}.vinyl-two{display:none}.ambient-colon{left:10%;top:40%;gap:20px}.ambient-colon i{width:10px;height:10px}.hero-note,.hero-aside{background:none;padding:0}}
@media(max-width:380px){.hero-note{top:152px}.hero-note h1{font-size:28px}.hero-wordmark{top:36%}.hero-portrait{bottom:140px}.floating-vinyl{opacity:.7}}
@media(max-height:520px) and (orientation:landscape){.hero-note{top:42%}.hero-note h1{font-size:34px}.hero-wordmark{top:30%}.hero-portrait{width:min(500px,70vw);bottom:48px}.vinyl-one{left:28%;top:18%}.vinyl-two{right:14%;top:50%}}
@media(prefers-reduced-motion:reduce){html:not(.motion-explicit) .portrait-depth{transform:none;will-change:auto}html:not(.motion-explicit) .portrait-animated{transition:none}html:not(.motion-explicit) .floating-vinyl{transform:rotateX(45deg)}}