/* CYLINDER 007 / CREATIVE DIRECTION — adjust variables below */
:root{--accent-bright:#f0b4c8;--art-intensity:.74;--five-opacity:.28}
.hero{min-height:100svh;background:radial-gradient(ellipse at 50% 49%,#4b10232c 0,transparent 50%),#070608}
.hero-title{position:absolute!important;top:52%!important;left:50%!important;width:100%!important;transform:translate(-50%,-50%)!important;text-align:center;z-index:7!important;mix-blend-mode:normal!important;isolation:isolate}
.hero-title-line{position:relative;z-index:3;display:block;font-size:clamp(65px,16.2vw,290px)!important;font-weight:700;letter-spacing:-.118em;line-height:.86;color:#f0e5e5;text-shadow:0 3px 1px #552034,0 18px 70px #080307,0 0 75px #a5435b35;white-space:nowrap;transform:translate3d(var(--title-x,0px),var(--title-y,0px),0) skewX(var(--headline-skew,0deg))!important;will-change:transform;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hero-title-line::after{content:"";position:absolute;left:3%;right:3%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,#e8a4bc7d,transparent);transform:scaleX(var(--title-line-scale,.2));transition:transform .5s}
.hero-five{position:absolute;z-index:1;left:50%;top:44%;transform:translate(-50%,-50%) rotate(var(--five-rotate,-11deg)) scale(var(--five-scale,1));font:900 clamp(320px,48vw,860px)/.8 Arial Black,Impact,sans-serif;letter-spacing:-.14em;color:transparent;-webkit-text-stroke:2px #bd648c7a;text-shadow:0 0 110px #a2275045;opacity:var(--five-opacity);filter:drop-shadow(0 0 30px #a3375629);pointer-events:none;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hero-title-sub{position:relative;z-index:4;display:block;margin:clamp(20px,3vw,46px) auto 0;font:10px var(--mono);letter-spacing:.48em;color:#d7a9b9;text-shadow:0 0 18px #000}
.hero-canvas-wrap{z-index:2!important;opacity:.85;filter:drop-shadow(0 0 75px #a3294d4f)}.hero-meta,.hero-bottom,.hero-side{z-index:10!important}.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at var(--focus-x,50%) var(--focus-y,50%),transparent 0 10%,#07050800 34%,#0705087a 92%)}
.art-stage{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;isolation:isolate}.art-sticker{position:absolute;display:block;object-fit:contain;opacity:var(--art-intensity);mix-blend-mode:screen;filter:drop-shadow(0 0 18px #8e315438) contrast(1.15);transform:translate3d(var(--shift-x,0px),var(--shift-y,0px),0) rotate(var(--angle,0deg));will-change:transform}.art-sticker.a{width:clamp(170px,27vw,430px);height:65%;top:11%;left:-7%;--angle:-21deg;opacity:.37;mask-image:linear-gradient(90deg,transparent,#000 23% 74%,transparent)}.art-sticker.b{width:clamp(140px,23vw,380px);height:55%;right:-4%;top:11%;--angle:18deg;opacity:.52}.art-sticker.c{width:clamp(240px,40vw,660px);height:34%;bottom:-7%;left:24%;--angle:-8deg;opacity:.15;filter:blur(1px)}.art-sticker.d{width:clamp(95px,12vw,210px);height:30%;top:7%;right:16%;--angle:34deg;opacity:.2}.art-scratches{position:absolute;inset:0;background:repeating-linear-gradient(103deg,transparent 0 118px,#f0a2c00a 119px 120px,transparent 121px 240px);mask-image:linear-gradient(90deg,#000,transparent 55%,#000);opacity:.6}.art-coordinates{position:absolute;left:5%;top:23%;writing-mode:vertical-rl;transform:rotate(180deg);font:9px var(--mono);letter-spacing:.35em;color:#b2738d88}.art-coordinates.right{left:auto;right:5%;top:31%;transform:none}.hero .collage-field{opacity:.4}.art-stage .art-sticker{transition:opacity .5s}
/* More authored composition throughout the page, not just in the hero */
.archive-section{position:relative;isolation:isolate}.archive-section::before{content:"";position:absolute;right:-9%;top:5%;width:min(50vw,750px);height:850px;background:url('assets/ink-figure.svg') center/contain no-repeat;opacity:.11;pointer-events:none;filter:blur(1px)}.archive-section::after{content:"";position:absolute;left:-15%;bottom:2%;width:min(55vw,850px);height:780px;background:url('assets/chrome-sticker.svg') center/contain no-repeat;opacity:.09;pointer-events:none}.archive-grid,.archive-tools,.section-head{position:relative;z-index:1}.tile{border-radius:2px!important;transform-style:preserve-3d;backface-visibility:hidden}.tile:hover{box-shadow:0 35px 110px #000b,0 0 0 1px #e9aec8,0 0 80px color-mix(in srgb,var(--accent) 32%,transparent)!important}.tile::before{background:radial-gradient(380px circle at var(--specular-x,50%) var(--specular-y,50%),#ffe8ef2b,transparent 66%)!important}.tile-icon{bottom:15%!important}.tile:hover .tile-icon{transform:translateX(-50%) translateY(-20px) scale(1.36) rotate(-8deg)!important}
/* Menu is a new full-screen art direction with actual section preview */
.menu{background:#080609!important}.menu-art-disc{opacity:.28}.menu-links{z-index:6!important}.menu-links a{position:relative;z-index:4;mix-blend-mode:normal}.menu-links a:hover{color:#fff0f3!important}.menu-preview{position:absolute;right:3%;top:12%;width:min(48vw,750px);height:75%;z-index:1;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse at center,#000 23%,transparent 76%);transform:translate3d(var(--preview-x,0px),var(--preview-y,0px),0)}.menu-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.32;filter:drop-shadow(0 0 45px #c14e7950);transform:rotate(var(--preview-rot,0deg)) scale(var(--preview-scale,1));transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s}.menu-preview .menu-preview-word{position:absolute;top:42%;left:12%;font:900 clamp(80px,14vw,220px)/1 var(--sans);letter-spacing:-.12em;color:#e7b1c01a;transform:rotate(-13deg)}.menu-current{position:absolute;bottom:8%;right:5%;z-index:5;font:10px var(--mono);letter-spacing:.23em;color:#e5b2c3;max-width:36ch;text-align:right}.menu-links a:focus-visible{outline-offset:10px}
/* UI instrument panel */
.interface-rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:11px;pointer-events:none}.interface-rail span{display:block;width:2px;height:21px;background:#8d5364;opacity:.35;transition:height .25s,opacity .25s,background .25s}.interface-rail span.on{height:42px;background:#efbbce;opacity:1;box-shadow:0 0 16px #c1537a}.interface-label{position:fixed;right:12px;bottom:18px;z-index:39;font:9px var(--mono);letter-spacing:.16em;color:#b9909d;pointer-events:none}.nav-bloom{position:fixed;inset:0;z-index:29;pointer-events:none;background:radial-gradient(ellipse at var(--bloom-x,50%) var(--bloom-y,50%),#8f2c4b22,transparent 35%);opacity:0;transition:opacity .3s}.nav-bloom.show{opacity:1}.art-note{position:absolute;bottom:7%;left:5%;font:9px var(--mono);letter-spacing:.24em;color:#a16b81;opacity:.75}
@media(max-width:700px){.hero-title-line{font-size:16.1vw!important}.hero-five{font-size:76vw}.hero-title-sub{font-size:7px;letter-spacing:.25em}.art-sticker.a{left:-25%;opacity:.24}.art-sticker.b{right:-30%;opacity:.28}.art-sticker.c{opacity:.1}.art-sticker.d{display:none}.menu-preview{right:-30%;width:100vw;opacity:.65}.interface-rail{right:7px}.interface-label{display:none}.hero-title{top:50%!important}}
@media(prefers-reduced-motion:reduce){.art-sticker,.hero-five,.menu-preview img,.hero-title-line{transition:none!important;animation:none!important}}