/* Joy's Box V18 — stronger deterministic hero entrance */
:root{--v18-ease:cubic-bezier(.16,1,.3,1)}

/* The WebGL image is the entrance. Keep all interface chrome out until it is complete. */
body.is-loading{overflow:hidden}

/* V11 used to clip the whole hero media until is-ready, which hid the WebGL entrance.
   V18 keeps the canvas visible from frame one; only the interface waits. */
.js .hero-v11__media,
.js body.is-loading .hero-v11__media,
.js body.is-ready .hero-v11__media{
  clip-path:inset(0)!important;
  transition:none!important;
}
body.is-loading .site-header.header-v14{
  opacity:0!important;
  transform:translateY(-20px)!important;
  filter:blur(8px);
  pointer-events:none!important;
}
body.is-ready .site-header.header-v14{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  transition:opacity .8s var(--v18-ease),transform .9s var(--v18-ease),filter .75s ease,color .28s ease,top .3s ease;
}

/* The frame and all hero typography wait for the WebGL entrance to finish. */
.hero-v11__frame{transition:opacity .8s ease .06s,border-color .3s ease}
body.is-loading .hero-v11__frame{opacity:0}
body.is-ready .hero-v11__frame{opacity:1}

body.is-loading .hero-v11__topline,
body.is-loading .hero-v11__eyebrow{
  opacity:0!important;
  transform:translateY(14px)!important;
  filter:blur(7px)!important;
}
body.is-ready .hero-v11__topline{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:opacity .7s var(--v18-ease) .18s,transform .8s var(--v18-ease) .18s,filter .7s ease .18s!important;
}
body.is-ready .hero-v11__eyebrow{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:opacity .7s var(--v18-ease) .08s,transform .8s var(--v18-ease) .08s,filter .7s ease .08s!important;
}

/* Stronger title reveal after the ripple completes. */
.hero-v11__line{overflow:hidden}
.js body.is-loading .hero-v11__line b,
.js body.is-loading .hero-v11__line i{
  transform:translateY(125%) rotate(.35deg)!important;
  filter:blur(10px);
  opacity:.15;
}
.js body.is-ready .hero-v11__line b,
.js body.is-ready .hero-v11__line i{
  transform:translateY(0) rotate(0)!important;
  filter:blur(0);
  opacity:1;
  transition:transform 1.02s var(--v18-ease) .12s,filter .86s ease .12s,opacity .45s ease .12s!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:.23s!important;
}

/* Do not allow the parent copy fade to reveal the title prematurely. */
body.is-loading .hero-v11__copy{opacity:1!important;transform:none!important;filter:none!important}
body.is-ready .hero-v11__copy{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* Keep the fallback image cinematic until WebGL takes over. */
.hero-v11__media>img{
  filter:blur(16px) saturate(.75) brightness(.64)!important;
  transform:scale(1.14)!important;
  transition:filter 1.25s var(--v18-ease),transform 1.8s var(--v18-ease),opacity .32s ease!important;
}
body.is-ready .hero-v11__media:not(.is-webgl-ready)>img{
  filter:blur(0) saturate(.92) brightness(.92)!important;
  transform:scale(1.02)!important;
}
.hero-v15__webgl{opacity:0;transition:opacity .18s ease!important}
.hero-v11__media.is-webgl-ready .hero-v15__webgl{opacity:1}
.hero-v11__media.is-webgl-ready>img{opacity:0}

/* A tiny visual beat when the canvas becomes available, no loader UI. */
.hero-v11::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 53% 48%,rgba(216,184,95,.11),transparent 17%);
  opacity:0;
}
body.is-loading .hero-v11.is-entrance-live::after{animation:v18Pulse 2.45s var(--v18-ease) both}
@keyframes v18Pulse{0%{opacity:0}18%{opacity:.42}55%{opacity:.12}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  body.is-loading .site-header.header-v14,.js body.is-loading .hero-v11__line b,.js body.is-loading .hero-v11__line i,body.is-loading .hero-v11__topline,body.is-loading .hero-v11__eyebrow{filter:none!important}
  .hero-v11::after{display:none}
}