/* ============================================================
   WAVE AIR — STUDIO (V6). The scene builds itself on load as the
   hero, then scroll prints it onto the cream tee. Premium warm
   editorial. Standalone CSS (uses DS font tokens).
   ============================================================ */
* { box-sizing: border-box; }
:root {
  --w-paper: #F4EFE6;
  --w-paper2: #EBE4D6;
  --w-ink: #1B1713;
  --w-ink2: #5A5247;
  --w-line: rgba(27,23,19,0.16);
  --w-pink: #E8A0C0;
  --w-pink-deep: #D97FA6;
  --w-teal: #2E9E92;
  --w-teal-deep: #1F857B;
  --w-disp: "Bagel Fat One", system-ui, sans-serif;
  --w-head: "Sniglet", "Nunito", system-ui, sans-serif;
  --w-body: "Nunito", system-ui, sans-serif;
  --w-mono: "Space Mono", ui-monospace, monospace;
  --w-pop: cubic-bezier(0.34,1.56,0.64,1);
}
html { overflow-x: clip; scroll-behavior: smooth; }
body.v6 { margin: 0; background: var(--w-paper); color: var(--w-ink); font-family: var(--w-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.v6 ::selection { background: var(--w-pink); color: var(--w-ink); }
.dg-ic { display: inline-flex; } .dg-ic svg { width: 1em; height: 1em; display: block; }
.w-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .w-wrap { padding: 0 18px; } }

.w-disp { font-family: var(--w-disp); line-height: 0.9; }
.w-head { font-family: var(--w-head); font-weight: 800; line-height: 1.05; }
.w-mono { font-family: var(--w-mono); }
.w-kicker { font-family: var(--w-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--w-teal-deep); }
.w-body { font-family: var(--w-body); font-size: 1.05rem; line-height: 1.6; color: var(--w-ink2); }

/* ---------- Nav ---------- */
.w-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 16px; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 2px solid transparent; }
.w-nav.solid { background: rgba(244,239,230,0.86); backdrop-filter: blur(10px) saturate(1.2); border-bottom-color: var(--w-ink); }
.w-navlink { font-family: var(--w-mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-ink); background: none; border: 0; cursor: pointer; padding: 2px 0; position: relative; }
.w-navlink::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background: var(--w-pink-deep); transition: right .22s var(--w-pop); }
.w-navlink:hover::after { right: 0; }

/* ---------- Hero (full-bleed) ---------- */
.w-hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(232,160,192,0.16), transparent 60%),
    radial-gradient(70% 60% at 50% 104%, rgba(46,158,146,0.14), transparent 60%),
    var(--w-paper); }
/* scene covers the full hero (portrait art, cover-cropped top/bottom) */
.w-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100vw, 83.34vh); height: max(120vw, 100vh); }
.w-stage.beat { animation: w-beat 0.5s ease-in-out infinite; }
@keyframes w-beat { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.006); } }
.w-stage img { position: absolute; height: auto; user-select: none; }
/* soft legibility scrims top & bottom */
.w-hero-scrim { position: absolute; inset: 0; z-index: 12; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,239,230,0.55) 0%, rgba(244,239,230,0) 22% 62%, rgba(244,239,230,0.86) 100%); }
/* centered wordmark headline (always fully visible, stamps in on build) */
.w-hero-mark { position: absolute; left: 0; right: 0; top: 43%; transform: translateY(-50%); z-index: 16;
  display: flex; flex-direction: column; align-items: center; gap: 1vh; pointer-events: none; padding: 0 4vw; }
.w-hero-mark img { display: block; width: min(440px, 58vw); height: auto; filter: drop-shadow(0 6px 16px rgba(27,23,19,0.18)); will-change: transform, opacity; }
.w-hero-mark img.gringo { width: min(470px, 62vw); }
/* idle motions (compose over assembly transform on the inner img) */
@keyframes w-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4%); } }
@keyframes w-sway { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-2.2%) rotate(1.2deg); } }
@keyframes w-dance { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.6%); } }
.w-idle-bob { animation: w-bob 5s ease-in-out infinite; }
.w-idle-sway { animation: w-sway 4.4s ease-in-out infinite; transform-origin: top center; }
.w-idle-dance { animation: w-dance 0.5s ease-in-out infinite; transform-origin: bottom center; }
@media (prefers-reduced-motion: reduce) { .w-idle-bob, .w-idle-sway, .w-idle-dance { animation: none; } }

/* ---------- Speaker FX (light flashing only — no movement) ---------- */
.w-spkfx { position: absolute; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; pointer-events: none; z-index: 9; }
.w-spkfx .glow { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,214,234,0.95), rgba(232,160,192,0.4) 38%, transparent 68%);
  animation: w-flash 1.1s ease-in-out infinite; }
.w-spkfx.teal .glow { background: radial-gradient(circle, rgba(205,255,246,0.9), rgba(79,224,208,0.36) 38%, transparent 68%); animation-delay: 0.55s; }
@keyframes w-flash { 0%,100% { opacity: 0.06; } 50% { opacity: 0.6; } }
/* light disco wash over the whole scene, alternating colour */
.w-hero-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(50% 44% at 21% 70%, rgba(232,160,192,0.9), transparent 60%),
             radial-gradient(50% 44% at 79% 70%, rgba(79,224,208,0.85), transparent 60%); }
.w-hero-flash.on { animation: w-bgflash 2.2s ease-in-out infinite; }
@keyframes w-bgflash { 0%,100% { opacity: 0.0; } 50% { opacity: 0.18; } }
@media (prefers-reduced-motion: reduce) { .w-spkfx .glow, .w-hero-flash.on { animation: none; } }

/* ---------- Animated nav logo (real wordmark components) ---------- */
.w-logo { display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; cursor: pointer; padding: 0; }
.w-logo img { display: block; height: auto; filter: drop-shadow(0 2px 4px rgba(27,23,19,0.15)); }
.w-logo .lg-disco { width: 74px; animation: w-logo-in 0.55s var(--w-pop) 0.15s both; }
.w-logo .lg-gringo { width: 82px; margin-top: -7px; animation: w-logo-in 0.55s var(--w-pop) 0.32s both; }
@keyframes w-logo-in { from { opacity: 0; transform: translateY(-45%) scale(0.5) rotate(-7deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .w-logo .lg-disco, .w-logo .lg-gringo { animation: none; } }

/* hero overlay chrome */
.w-hero-top { position: absolute; top: 92px; left: 0; right: 0; z-index: 20; text-align: center; pointer-events: none; }
.w-hero-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 60px 0 26px;
  background: linear-gradient(to top, rgba(244,239,230,0.92) 12%, rgba(244,239,230,0) 100%); }
.w-hero-cue { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 21; color: var(--w-ink2); text-align: center; }
@keyframes w-cue { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }
.w-hero-cue { animation: w-cue 2s ease-in-out infinite; }

/* skip/replay build button */
.w-ghostbtn { font-family: var(--w-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w-ink2); background: rgba(244,239,230,0.7); border: 1.5px solid var(--w-line); border-radius: 999px; padding: 6px 13px; cursor: pointer; pointer-events: auto; }
.w-ghostbtn:hover { border-color: var(--w-ink); color: var(--w-ink); }

/* ---------- Buttons ---------- */
.w-btn { font-family: var(--w-head); font-weight: 800; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; cursor: pointer; color: var(--w-ink); border: 2.5px solid var(--w-ink); border-radius: 999px; background: var(--w-pink);
  box-shadow: 4px 4px 0 0 var(--w-ink); transition: transform .12s var(--w-pop), box-shadow .12s, background .15s; }
.w-btn:hover { background: var(--w-pink-deep); }
.w-btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 0 var(--w-ink); }
.w-btn.teal { background: var(--w-teal); color: #fff; } .w-btn.teal:hover { background: var(--w-teal-deep); }
.w-btn.ghost { background: var(--w-paper); } .w-btn.ghost:hover { background: var(--w-paper2); }
.w-btn.full { width: 100%; } .w-btn.lg { padding: 16px 34px; font-size: 1.08rem; }
.w-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Tee mockup section ---------- */
.w-tee-sect { position: relative; padding: 110px 0; background: var(--w-paper2); border-top: 2px solid var(--w-ink); border-bottom: 2px solid var(--w-ink); }
.w-tee-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.w-tee-fig { position: relative; width: 100%; aspect-ratio: 1; }
.w-tee-fig .blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(27,23,19,0.12)); }
.w-tee-fig .print { position: absolute; left: 50%; top: 32.5%; width: 33%; transform: translateX(-50%); mix-blend-mode: multiply; will-change: transform, opacity; }
@media (max-width: 860px) { .w-tee-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Marquee strip ---------- */
.w-strip { background: var(--w-ink); color: var(--w-paper); overflow: hidden; height: 52px; display: flex; align-items: center; }
.w-strip .mq { display: flex; width: max-content; animation: w-mq 30s linear infinite; }
@keyframes w-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .w-strip .mq { animation: none; } }

/* ---------- Spec cards ---------- */
.w-card { background: var(--w-paper); border: 2.5px solid var(--w-ink); border-radius: 18px; box-shadow: 5px 5px 0 0 var(--w-ink); padding: 26px; }
.w-card.pink { box-shadow: 5px 5px 0 0 var(--w-pink-deep); } .w-card.teal { box-shadow: 5px 5px 0 0 var(--w-teal); }

/* ---------- Controls ---------- */
.w-swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--w-ink); cursor: pointer; padding: 0; transition: transform .12s var(--w-pop); }
.w-swatch:hover { transform: scale(1.08); } .w-swatch.on { box-shadow: 0 0 0 3px var(--w-paper), 0 0 0 6px var(--w-ink); }
.w-size { min-width: 50px; height: 48px; padding: 0 14px; background: var(--w-paper); border: 2px solid var(--w-ink); color: var(--w-ink); font-family: var(--w-mono); font-weight: 700; cursor: pointer; border-radius: 8px; }
.w-size:hover { background: var(--w-paper2); } .w-size.on { background: var(--w-ink); color: var(--w-paper); } .w-size.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.w-step { width: 36px; height: 36px; border: 2px solid var(--w-ink); background: var(--w-paper); cursor: pointer; border-radius: 8px; font-size: 18px; }
.w-field { width: 100%; background: var(--w-paper); border: 2px solid var(--w-ink); border-radius: 8px; color: var(--w-ink); font-family: var(--w-mono); font-size: 0.95rem; padding: 11px 13px; }
.w-field:focus { outline: none; border-color: var(--w-teal); }
.w-lab { font-family: var(--w-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-ink2); }

/* ---------- Drawer / panel ---------- */
.w-scrim { position: fixed; inset: 0; background: rgba(27,23,19,0.42); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .28s; }
.w-scrim.open { opacity: 1; pointer-events: auto; }
.w-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(430px,92vw); background: var(--w-paper); border-left: 2.5px solid var(--w-ink); transform: translateX(100%); transition: transform .34s var(--w-pop); z-index: 81; display: flex; flex-direction: column; }
.w-drawer.open { transform: translateX(0); }
.w-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(920px,94vw); max-height: 90vh; overflow: auto; background: var(--w-paper); border: 2.5px solid var(--w-ink); box-shadow: 10px 10px 0 0 var(--w-ink); border-radius: 16px; z-index: 81; }
.no-bar { scrollbar-width: none; } .no-bar::-webkit-scrollbar { display: none; }
@keyframes w-panel-in { from { transform: translate(-50%,-46%); } to { transform: translate(-50%,-50%); } }
.w-panel { animation: w-panel-in .3s var(--w-pop) both; }
@keyframes w-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
.w-shake { animation: w-shake .42s ease; }

@media (max-width: 820px) { .w-pdp { grid-template-columns: 1fr !important; } .w-co { grid-template-columns: 1fr !important; } .w-3 { grid-template-columns: 1fr !important; } .w-nav .w-hide { display: none; } .w-pdp-fig { position: static !important; top: auto !important; } }

/* Mobile: the decorative scroll cue collides with the hero CTA — hide it,
   and give the hero CTA block a touch more bottom room. */
@media (max-width: 768px) {
  .w-hero-cue { display: none; }
  .w-hero-bottom { padding-bottom: 34px; }
}