/* Joy's Box V41 — cinematic depth hero / Three.js venue entrance */
:root{
  --v41-gold:#d5b766;
  --v41-cream:#f7f1e7;
  --v41-teal:#0ca99e;
  --v41-ease:cubic-bezier(.16,1,.3,1);
}

/* Keep a clean first frame while the GPU scene compiles. */
.hero.hero-v11{
  background:#080908!important;
}
.hero-v11__media{
  background:
    radial-gradient(55% 45% at 50% 52%,rgba(20,123,116,.10),transparent 72%),
    #080908!important;
}
.hero-v11__media>img{
  object-position:center 48%!important;
  transform:scale(1.012)!important;
  filter:saturate(.84) contrast(1.04) brightness(.68) blur(7px)!important;
  /* V42: never flash the raw photograph before the GPU entrance starts. */
  opacity:0!important;
  visibility:hidden!important;
}
.hero-v11__media.is-webgl-ready>img{opacity:0!important;visibility:hidden!important}
/* Only expose the original image when WebGL/reduced-motion explicitly falls back. */
.hero-v11__media.is-webgl-fallback>img{
  opacity:1!important;
  visibility:visible!important;
}
.hero-v15__webgl{
  inset:-1.5%!important;
  opacity:0!important;
  transform:none!important;
  filter:none!important;
  transition:opacity .52s ease!important;
}
.hero-v11__media.is-webgl-ready .hero-v15__webgl{opacity:1!important}
.hero-v15__webgl canvas{width:100%!important;height:100%!important;display:block}

/* Deep cinematic grade: copy stays readable while the architecture still feels luminous. */
.hero-v11__veil{
  z-index:1!important;
  background:
    radial-gradient(54% 48% at 52% 47%,rgba(0,0,0,0) 34%,rgba(3,4,4,.15) 72%,rgba(3,4,4,.34) 100%),
    linear-gradient(90deg,rgba(3,3,3,.73) 0%,rgba(3,3,3,.37) 33%,rgba(3,3,3,.08) 62%,rgba(3,3,3,.16) 100%),
    linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,0) 27%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.72) 100%)!important;
}

/* A very light optical sheen, not a flat beam. */
.hero-v11__media::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:1;
  pointer-events:none;
  background:conic-gradient(from 218deg at 53% 54%,transparent 0 34%,rgba(255,230,172,.055) 42%,transparent 49% 100%);
  mix-blend-mode:screen;
  opacity:0;
  transform:rotate(-4deg) scale(.9);
}
body.is-loading .hero-v11.is-entrance-live .hero-v11__media::before{
  animation:v41OpticalSweep 2.92s var(--v41-ease) both;
}
@keyframes v41OpticalSweep{
  0%,10%{opacity:0;transform:rotate(-7deg) scale(.86)}
  38%{opacity:.42}
  74%{opacity:.16}
  100%{opacity:0;transform:rotate(2deg) scale(1.08)}
}

/* Editorial frame draws in after the scan rather than simply appearing. */
.hero-v11__frame{
  z-index:3!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none;
}
.hero-v11__frame::before,
.hero-v11__frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.hero-v11__frame::before{
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.13);
  transform:scaleX(.08);
}
.hero-v11__frame::after{
  border-left:1px solid rgba(255,255,255,.13);
  border-right:1px solid rgba(255,255,255,.13);
  transform:scaleY(.08);
}
body.is-ready .hero-v11__frame::before{
  opacity:1;
  transform:scaleX(1);
  transition:transform 1.05s var(--v41-ease) .08s,opacity .45s ease .08s;
}
body.is-ready .hero-v11__frame::after{
  opacity:1;
  transform:scaleY(1);
  transition:transform 1.05s var(--v41-ease) .18s,opacity .45s ease .18s;
}

/* Small corner glints make the frame feel spatial without UI clutter. */
.hero-v11__frame{
  background:
    linear-gradient(var(--v41-gold),var(--v41-gold)) left top/30px 1px no-repeat,
    linear-gradient(var(--v41-gold),var(--v41-gold)) left top/1px 30px no-repeat,
    linear-gradient(var(--v41-gold),var(--v41-gold)) right bottom/30px 1px no-repeat,
    linear-gradient(var(--v41-gold),var(--v41-gold)) right bottom/1px 30px no-repeat!important;
  opacity:0;
}
body.is-ready .hero-v11__frame{opacity:1!important;transition:opacity .7s ease .14s!important}

/* Copy now arrives as part of the scene, with a softer cinematic mask. */
.hero-v11__copy{
  z-index:5!important;
  max-width:min(1260px,88vw)!important;
  text-shadow:0 4px 30px rgba(0,0,0,.23);
}
.hero-v11__eyebrow{
  color:rgba(239,222,173,.85)!important;
}
.hero-v11__title{
  perspective:1000px;
}
.hero-v11__line b,
.hero-v11__line i{
  transform-origin:50% 100%;
  will-change:transform,opacity,filter;
}
.js body.is-loading .hero-v11__line b,
.js body.is-loading .hero-v11__line i{
  transform:translateY(112%) rotateX(-10deg)!important;
  opacity:0!important;
  filter:blur(8px)!important;
}
.js body.is-ready .hero-v11__line b,
.js body.is-ready .hero-v11__line i{
  transform:translateY(0) rotateX(0)!important;
  opacity:1!important;
  filter:none!important;
  transition:transform 1.14s var(--v41-ease) .10s,opacity .62s ease .10s,filter .76s ease .10s!important;
}
.js body.is-ready .hero-v11__line:nth-child(2) b,
.js body.is-ready .hero-v11__line:nth-child(2) i{
  transition-delay:.22s!important;
}

/* Metadata follows the architecture instead of jumping in with the headline. */
body.is-loading .hero-v11__topline span,
body.is-loading .hero-v11__eyebrow{
  opacity:0!important;
  transform:translateY(13px)!important;
  filter:blur(7px)!important;
}
body.is-ready .hero-v11__topline span,
body.is-ready .hero-v11__eyebrow{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
body.is-ready .hero-v11__topline span{
  transition:opacity .62s ease .04s,transform .88s var(--v41-ease) .04s,filter .62s ease .04s!important;
}
body.is-ready .hero-v11__topline span:last-child{transition-delay:.12s!important}
body.is-ready .hero-v11__eyebrow{
  transition:opacity .64s ease .02s,transform .9s var(--v41-ease) .02s,filter .64s ease .02s,letter-spacing .95s var(--v41-ease) .02s!important;
}

/* The old ambient pulse is replaced by a tighter pool/lantern aura. */
.hero-v11::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(32% 25% at 50% 48%,rgba(31,209,195,.075),transparent 72%),
    radial-gradient(33% 35% at 51% 28%,rgba(229,184,91,.075),transparent 72%);
  mix-blend-mode:screen;
  opacity:0;
}
body.is-loading .hero-v11.is-entrance-live::after{animation:v41Aura 2.92s ease both}
@keyframes v41Aura{0%{opacity:0}28%{opacity:.72}68%{opacity:.30}100%{opacity:0}}

/* Desktop receives the full depth effect. Mobile keeps the exact same reveal language but less masking. */
@media(max-width:900px){
  .hero-v11__media>img{filter:blur(5px) saturate(.88) brightness(.70)!important;opacity:0!important;visibility:hidden!important}
  .hero-v11__media.is-webgl-fallback>img{opacity:1!important;visibility:visible!important}
  .hero-v11__veil{
    background:
      linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.02) 34%,rgba(0,0,0,.12) 59%,rgba(0,0,0,.72) 100%),
      radial-gradient(90% 54% at 50% 42%,rgba(0,0,0,0),rgba(0,0,0,.14) 74%,rgba(0,0,0,.28) 100%)!important;
  }
  .hero-v11__frame{background-size:20px 1px,1px 20px,20px 1px,1px 20px!important}
  .js body.is-loading .hero-v11__line b,.js body.is-loading .hero-v11__line i{filter:blur(4px)!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-v11__media::before,.hero-v11::after{display:none!important}
  .hero-v11__frame,.hero-v11__frame::before,.hero-v11__frame::after,
  .hero-v11__topline span,.hero-v11__eyebrow,.hero-v11__line b,.hero-v11__line i{
    transition:none!important;animation:none!important;transform:none!important;filter:none!important;opacity:1!important;
  }
}