/* Joy's Box V15 — WebGL-first cinematic art direction */
:root{
  --v15-gold:#c8aa5a;
  --v15-gold-hi:#f0daa1;
  --v15-black:#050505;
}

/* ---------- V15 entrance: generative signal + radial dissolve ---------- */
@property --portal-reveal{
  syntax:'<length>';
  inherits:false;
  initial-value:0vmax;
}
body.is-loading{overflow:hidden}
.preloader-v15{
  --portal-reveal:0vmax;
  position:fixed;inset:0;z-index:3000;overflow:hidden;isolation:isolate;
  color:#f8f4eb;background:#050505;pointer-events:auto;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--portal-reveal),#000 calc(var(--portal-reveal) + 0.01vmax) 100%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--portal-reveal),#000 calc(var(--portal-reveal) + 0.01vmax) 100%);
}
.preloader-v15.is-exiting{
  --portal-reveal:92vmax;
  transition:--portal-reveal 1.18s cubic-bezier(.78,0,.18,1);
}
.preloader-v15__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.98}
.preloader-v15__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(circle at 50% 50%,transparent 0 16%,rgba(0,0,0,.14) 48%,rgba(0,0,0,.56) 100%),
  linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.12));
}
.preloader-v15__grid{position:absolute;inset:22px;z-index:2;border:1px solid rgba(255,255,255,.07);pointer-events:none;opacity:.7}
.preloader-v15__grid::before,.preloader-v15__grid::after{content:"";position:absolute;background:rgba(255,255,255,.055)}
.preloader-v15__grid::before{left:50%;top:0;bottom:0;width:1px}.preloader-v15__grid::after{top:50%;left:0;right:0;height:1px}
.preloader-v15__center{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,82vw);display:grid;justify-items:center;text-align:center;pointer-events:none}
.preloader-v15__mark{width:clamp(78px,6.5vw,104px);opacity:0;transform:translateY(14px) scale(.94);filter:drop-shadow(0 20px 50px rgba(200,170,90,.16));will-change:transform,opacity}
.preloader-v15__mark img{display:block;width:100%;height:auto}
.preloader-v15__eyebrow{margin:25px 0 0;font:700 7px/1 var(--sans);letter-spacing:.28em;color:rgba(255,255,255,.42);opacity:0;transform:translateY(9px)}
.preloader-v15__signal{width:min(330px,64vw);height:1px;margin:17px 0 13px;background:rgba(255,255,255,.11);overflow:hidden;opacity:0}
.preloader-v15__signal i{display:block;width:34%;height:100%;background:linear-gradient(90deg,transparent,var(--v15-gold-hi),transparent);transform:translateX(-115%);animation:v15Signal 1.2s cubic-bezier(.65,0,.35,1) infinite}
.preloader-v15__meta{width:min(330px,64vw);display:flex;justify-content:space-between;gap:28px;font:700 6.5px/1 var(--sans);letter-spacing:.18em;color:rgba(255,255,255,.29);opacity:0}
.preloader-v15__corner{position:absolute;z-index:3;font:700 6px/1 var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.28);opacity:0}
.preloader-v15__corner--tl{top:38px;left:39px}.preloader-v15__corner--tr{top:38px;right:39px;text-align:right}.preloader-v15__corner--bl{bottom:38px;left:39px}.preloader-v15__corner--br{bottom:38px;right:39px;text-align:right}
.preloader-v15__axis{position:absolute;z-index:3;left:50%;bottom:37px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;opacity:0;color:rgba(255,255,255,.3);font:700 6px/1 var(--sans);letter-spacing:.18em}
.preloader-v15__axis i{display:block;width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--v15-gold),transparent)}
.preloader-v15.is-armed .preloader-v15__signal{opacity:1}
@keyframes v15Signal{0%{transform:translateX(-115%)}100%{transform:translateX(330%)}}

/* ---------- Hero: WebGL living image ---------- */
.hero.hero-v11{background:#050505}
.hero-v15__webgl{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transform:scale(1.045);transition:opacity .9s ease .08s,transform 1.35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hero-v15__webgl canvas{display:block;width:100%;height:100%}
.hero-v11__media>img{transition:opacity .45s ease}
.hero-v11__media.is-webgl-ready>img{opacity:0}
body.is-ready .hero-v15__webgl{opacity:1;transform:scale(1)}
.hero-v15__interaction{position:absolute;z-index:3;right:44px;bottom:43px;display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.42);font:700 6px/1 var(--sans);letter-spacing:.17em;pointer-events:none;opacity:0;transform:translateY(10px)}
.hero-v15__interaction i{position:relative;width:26px;height:26px;border:1px solid rgba(216,191,119,.55);border-radius:50%}
.hero-v15__interaction i::before,.hero-v15__interaction i::after{content:"";position:absolute;left:50%;top:50%;background:var(--v15-gold)}
.hero-v15__interaction i::before{width:8px;height:1px;transform:translate(-50%,-50%)}.hero-v15__interaction i::after{width:1px;height:8px;transform:translate(-50%,-50%)}
body.is-ready .hero-v15__interaction{opacity:1;transform:none;transition:opacity .6s ease .9s,transform .7s cubic-bezier(.16,1,.3,1) .9s}
.hero-v15__beam{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 33%,rgba(218,190,111,.09) 49.5%,transparent 65%);mix-blend-mode:screen;transform:translateX(-48%);opacity:.55}
body.is-ready .hero-v15__beam{animation:v15Beam 7s cubic-bezier(.3,.7,.2,1) 1.1s infinite alternate}
@keyframes v15Beam{to{transform:translateX(48%)}}

/* Refine the hero frame so the WebGL image reads as one deliberate system. */
.hero-v11__frame{border-color:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(200,170,90,.025)}
.hero-v11__veil{z-index:1;background:
  radial-gradient(circle at 72% 34%,rgba(200,170,90,.035),transparent 31%),
  linear-gradient(90deg,rgba(3,3,3,.74) 0%,rgba(3,3,3,.36) 39%,rgba(3,3,3,.12) 72%,rgba(3,3,3,.28) 100%),
  linear-gradient(180deg,rgba(0,0,0,.25),transparent 27%,transparent 62%,rgba(0,0,0,.72))}

/* ---------- 2022 → TODAY: larger kinetic 3D signature ---------- */
.facts-rail__visual{position:relative;overflow:hidden;isolation:isolate}
.facts-rail__visual canvas#signature3d{width:210px!important;height:210px!important;max-width:68%;max-height:68%;filter:drop-shadow(0 18px 35px rgba(192,161,86,.13));opacity:.95}
.facts-rail__visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(192,161,86,.14);border-radius:50%;transform:scale(.84);pointer-events:none}
.facts-rail__visual::after{content:"LIVE / SYSTEM 2022—26";position:absolute;top:18px;right:18px;font:700 5.5px/1 var(--sans);letter-spacing:.18em;color:rgba(255,255,255,.34)}

/* ---------- premium pointer halo (desktop only) ---------- */
.v15-pointer{position:fixed;z-index:950;left:0;top:0;width:42px;height:42px;border:1px solid rgba(213,187,112,.45);border-radius:50%;pointer-events:none;mix-blend-mode:difference;opacity:0;transform:translate3d(-100px,-100px,0);transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .3s ease;will-change:transform}
.v15-pointer::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.v15-pointer.is-visible{opacity:.72}.v15-pointer.is-active{width:64px;height:64px;border-color:rgba(255,255,255,.7)}

@media(max-width:900px){
  .preloader-v15__grid{inset:14px}.preloader-v15__corner--tl,.preloader-v15__corner--tr{top:25px}.preloader-v15__corner--bl,.preloader-v15__corner--br{bottom:25px}.preloader-v15__corner--tl,.preloader-v15__corner--bl{left:25px}.preloader-v15__corner--tr,.preloader-v15__corner--br{right:25px}
  .hero-v15__interaction{display:none}.facts-rail__visual canvas#signature3d{width:170px!important;height:170px!important}
}
@media(pointer:coarse),(max-width:760px){.v15-pointer{display:none}.hero-v15__beam{opacity:.32}.preloader-v15__corner--tr,.preloader-v15__corner--bl{display:none}.preloader-v15__corner{font-size:5.5px}.preloader-v15__center{width:82vw}.preloader-v15__mark{width:75px}}
@media(prefers-reduced-motion:reduce){.preloader-v15__signal i,.hero-v15__beam{animation:none!important}.preloader-v15,.hero-v15__webgl,.hero-v15__interaction{transition:none!important}.v15-pointer{display:none}}