/* ============================================================================
   Dice Party — Marketing v3 "Mello Material" (Homepage v21 scene arc)
   ----------------------------------------------------------------------------
   Token contract: brand/logomello-tokens.css v1 (2026-06-25, LOCKED) —
   purple #7A5BC4 / orange #E8772A, one-brand-two-surfaces. The v21 homepage
   is a single-theme dawn→night scene arc: each section carries its own
   hard-coded radial scene background (per the design export); the logomello
   constants below are the shared brand vocabulary.

   CAVEAT (carried from the v1 build): Chrome freezes a CSS transition whose
   value is a var() that changes. Animate `color` only; let background/border/
   shadow swap instantly on any token change.
   ========================================================================== */

:root {
  /* -- v21 "Mello Party palette" — one hue per Mello (Design Styleguide v21):
        scarlet / sky / gold / grass; blurple #5865F2 is reserved EXCLUSIVELY
        for real Discord surfaces (login, /record, /stop, voice mocks). -- */
  --mp-scarlet: #F0392C;
  --mp-sky:     #63BEEE;
  --mp-gold:    #FBC22E;
  --mp-grass:   #2AA45E;
  --mp-blurple: #5865F2;  /* Discord-only */

  /* -- Logomello brand constants (sampled from static/images/shared/mello.png) -- */
  --brand-purple:      #7A5BC4;
  --brand-purple-deep: #4A3A78;
  --brand-navy:        #2E3966;
  --brand-orange:      #E8772A;
  --brand-apricot:     #EBA45C;
  --brand-gold:        #F5BE2E;
  --brand-cream:       #F6EDE8;
  --brand-coral:       #D9534F;
  --brand-purple-action: #6B4BC0;

  /* -- Product-mock surfaces — CONSTANT (Dice Party SaaS ink) -- */
  --ui-bg:      #0F1624;
  --ui-bg-deep: #0B0F1F;
  --ui-border:  #1F2937;
  --ui-text:    #E5E7EB;
  --ui-muted:   #9CA3AF;

  /* Type (matches the design-system typography tokens) */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

html { scroll-behavior: smooth; }
html, body { margin: 0; }

/* ---- v21 scene helpers (verbatim from the design export) ---- */
@keyframes dp-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes dp-float { 0%,100%{transform:translateY(0) rotate(var(--rot,0deg));} 50%{transform:translateY(-9px) rotate(var(--rot,0deg));} }

/* transparent Mello cutouts stand in-scene with a soft contact/drop shadow */
.in-scene { filter: drop-shadow(0 20px 22px rgba(0,0,0,0.24)); }
.peek { filter: drop-shadow(0 12px 16px rgba(0,0,0,0.22)); object-fit: contain; }

.ghost { position:absolute; font-weight:800; letter-spacing:-0.05em; line-height:0.7; pointer-events:none; }
.lk { filter: brightness(0) invert(1); }

/* ---- Responsive collapse (the export is a 1280px canvas; site must flex) ---- */
@media (max-width: 980px) {
  .v3-hero-grid { flex-direction: column; }
  .v3-hero-art { display: none; }
  .v3-grid-3 { grid-template-columns: 1fr !important; }
  .v3-grid-2 { grid-template-columns: 1fr !important; }
  .v3-nav-links { gap: 16px !important; }
  .v3-hero-h1 { font-size: clamp(44px, 11vw, 72px) !important; }
  .v3-mello-stack, .v3-peek { display: none; }
}
@media (max-width: 640px) {
  .v3-nav-links { display: none !important; }
  .ghost { display: none; }
}