/* CYLINDER 009 / a complete atmospheric and typographic pass */
:root{--kinetic-x:50%;--kinetic-y:50%}
.hero-title{width:100%!important;max-width:100vw;overflow:visible!important;pointer-events:none}
.hero-title-line{display:block!important;width:max-content!important;max-width:none!important;margin-inline:auto!important;font-size:clamp(60px,15.1vw,300px)!important;letter-spacing:-.105em!important;line-height:1.04!important;white-space:nowrap!important;transform:translate3d(var(--title-x,0px),var(--title-y,0px),0) skewX(var(--headline-skew,0deg)) scaleX(var(--fit,1))!important;transform-origin:center center!important;text-wrap:nowrap!important;filter:drop-shadow(0 14px 25px #000a)}
.hero-title-sub{margin-top:clamp(10px,1.5vw,22px)!important}
.hero-five{top:38%!important;opacity:.47!important;filter:drop-shadow(0 0 70px #ac406c80)}
.hero-bottom{z-index:12!important}.discover{position:relative;z-index:15;isolation:isolate;transition:color .4s,letter-spacing .6s cubic-bezier(.16,1,.3,1)}.discover:hover{letter-spacing:.22em;color:#fff}.discover span{display:inline-block;transition:transform .6s cubic-bezier(.16,1,.3,1)}.discover:hover span{transform:translate(9px,9px) rotate(-40deg)}
/* Stage graphics persist throughout the whole document, without covering content */
.ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.68;mix-blend-mode:screen;mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 88%,transparent 100%)}
.archive-section,.outro{isolation:isolate;position:relative;background:radial-gradient(ellipse at var(--kinetic-x) var(--kinetic-y),#63223b1d,transparent 48%),#090709!important}
.archive-section::before,.outro::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(112deg,transparent 0 105px,#b26b8110 106px 107px),radial-gradient(ellipse at 20% 30%,#61213927,transparent 46%);mask-image:linear-gradient(transparent,#000 18%,#000 83%,transparent)}
.archive-section::after,.outro::after{content:'5';position:absolute;right:-.12em;top:6%;font:900 min(54vw,680px)/1 Impact,'Arial Black',sans-serif;color:transparent;-webkit-text-stroke:1px #a34d6a2b;transform:rotate(-14deg);pointer-events:none;z-index:-1}
.outro::after{content:'CYL';top:auto;bottom:3%;right:-.06em;font-size:25vw;letter-spacing:-.12em;opacity:.8}
.archive-section>.section-head,.archive-section>.archive-tools,.archive-section>.archive-grid,.archive-section>.archive-foot,.outro>*{position:relative;z-index:1}
.section-head h2,.outro h2{filter:drop-shadow(0 15px 35px #0008)}
/* Physical ink reaction on cards; no particle trails */
.tile{isolation:isolate;transition:transform .75s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .65s,filter .65s!important;backface-visibility:hidden}
.tile::after{content:'';position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 42% 40% at var(--tile-light-x,50%) var(--tile-light-y,50%),#f0a1c038,transparent 85%);mix-blend-mode:screen;opacity:0;transition:opacity .55s}
.tile:hover::after,.tile:focus-visible::after{opacity:1}.tile:hover{filter:brightness(1.12) saturate(1.14);box-shadow:0 28px 85px #000c,0 0 0 1px #d979a16e,0 0 65px #a4316129!important}
.tile-icon{filter:drop-shadow(0 10px 20px #0009) drop-shadow(0 0 16px #b55b7959);transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s!important}.tile:hover .tile-icon{filter:drop-shadow(0 12px 25px #000) drop-shadow(0 0 23px #d278a4a6)}
/* Navigation: staggered reveal plus continuously responsive background */
.menu{background:radial-gradient(ellipse at var(--kinetic-x) var(--kinetic-y),#6b1b384a,transparent 55%),#0a070a!important}
.menu::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(105deg,transparent 0 115px,#a46b7d0b 116px 117px);opacity:.7}
.menu-links a{position:relative;isolation:isolate;transform-origin:left center;will-change:transform}.menu-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:linear-gradient(90deg,#f5c1d6,transparent);transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.16,1,.3,1)}.menu-links a:hover::after,.menu-links a:focus-visible::after{transform:scaleX(1)}
.menu.open .menu-preview img{animation:previewBreath 8s ease-in-out infinite alternate}@keyframes previewBreath{to{filter:drop-shadow(0 0 40px #b44b75) contrast(1.3);scale:1.075;rotate:6deg}}
.menu-photo{transition:opacity 1.1s,transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.2s!important}
.detail{isolation:isolate}.detail::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at var(--kinetic-x) var(--kinetic-y),#8d31512d,transparent 55%)}.detail-shell{position:relative;z-index:1}.detail-art{background:radial-gradient(ellipse at var(--kinetic-x) var(--kinetic-y),#852e4a37,transparent 65%),#100b0f!important}
/* A restrained ambient strip that changes with section and mouse position */
.motion-rail{position:fixed;bottom:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;background:linear-gradient(90deg,transparent,#ac486b 35%,#e6b1c2 50%,#ac486b 65%,transparent);transform:scaleX(var(--scroll-progress,0));transform-origin:left;box-shadow:0 0 16px #a8486c99}
footer{position:relative;z-index:3}
@media(max-width:700px){.hero-title-line{font-size:15vw!important;letter-spacing:-.115em!important}.hero-title-sub{letter-spacing:.19em!important}.ambient-canvas{opacity:.35}.archive-section::after{font-size:80vw}}
@media(prefers-reduced-motion:reduce){.ambient-canvas,.motion-rail{display:none}.menu.open .menu-preview img{animation:none}.tile,.tile-icon,.menu-links a{transition-duration:.01ms!important}}

@media(prefers-reduced-motion:no-preference){.tile[data-observed]{opacity:0;translate:0 45px;transition:opacity .85s ease var(--reveal-delay),translate .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay),transform .75s cubic-bezier(.16,1,.3,1),box-shadow .65s!important}.tile[data-observed].in-view{opacity:1;translate:0 0}}