/* ==========================================================================
   v3 hero — satin gown + bow tie in WebGL
   ========================================================================== */
.hero--3d { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding-top: 68px; overflow: hidden; isolation: isolate;
  background: var(--bg); }
.hero__gl { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease .1s; }
.hero--3d.is-ready .hero__gl { opacity: 1; }
.hero--3d.no-gl { background: radial-gradient(40% 50% at 68% 48%, rgba(255, 59, 46, .55), rgba(255,59,46,.12) 45%, transparent 70%), var(--bg); }
.hero--3d .hero__top { position: relative; z-index: 3; }
.hero__main { position: relative; z-index: 3; display: grid; gap: clamp(18px, 2.2vw, 30px); align-content: center; justify-items: start; padding: clamp(20px, 3vw, 40px) var(--gutter); max-width: min(50%, 760px); pointer-events: none; }
.hero__main > * { pointer-events: auto; }
.hero__h1 { margin: 0; font-family: var(--font-sans); font-weight: 300; font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(44px, 7.4vw, 128px); line-height: .9; color: var(--white); }
.hero__h1 .hero__h1-a { display: block; animation: fadeUp 1.2s .2s var(--ease) both; }
.hero__h1 em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; font-size: 1.22em; line-height: .9; color: var(--red); margin-top: -.02em; animation: fadeUp 1.2s .35s var(--ease) both; }
.hero__lede { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.2; margin: 0; max-width: 28ch; color: var(--muted); animation: fadeUp 1s .55s var(--ease) both; }
.hero__lede::first-letter { color: var(--white); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 1s .7s var(--ease) both; }
.hero--3d .hero__meta { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px var(--gutter) 24px; border-top: 1px solid var(--line); margin-top: clamp(18px, 3vh, 36px); width: min(46%, 680px); animation: fadeUp 1s .85s var(--ease) both; }
.hero--3d .hero__meta .cell { grid-column: auto; display: grid; gap: 8px; }
.hero--3d .hero__meta .cell .v { font-size: 15px; }
.hero__hint { position: absolute; right: var(--gutter); bottom: 26px; z-index: 3; color: var(--faint); opacity: 0; transition: opacity 1s 2.4s; }
.hero--3d.is-ready .hero__hint { opacity: 1; }
.hero--3d.has-pointer .hero__hint { opacity: 0; transition-delay: 0s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__h1 .hero__h1-a, .hero__h1 em, .hero__lede, .hero__ctas, .hero--3d .hero__meta { animation: none; }
}

@media (max-width: 1100px) {
  .hero__main { max-width: min(58%, 760px); }
  .hero--3d .hero__meta { width: min(70%, 680px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero--3d { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
  .hero__top .cap { display: none; }
  .hero__main { max-width: none; padding-top: 10px; }
  .hero__h1 { font-size: clamp(44px, 13vw, 96px); }
  .hero--3d .hero__meta { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
  .hero__gl { order: 10; position: relative; inset: auto; height: 62vh; margin-top: 4px; background: var(--bg); }
  .hero__hint { display: none; }
}