/* ============================================================
   3DAX — Premium 3D deckbox store
   Design system · LIGHT "anime" theme
   cream paper · terracotta · cyan + pink pops
   ============================================================ */

:root{
  /* paper / surfaces (warm cream) */
  --ink:        #fbf2e1;   /* page background (kept name = "base surface") */
  --ink-2:      #fffaf0;   /* card / panel surface (brighter) */
  --ink-3:      #f3e6cf;   /* raised / hover */
  --paper-2:    #f6ead2;   /* alt section background */

  /* text (warm dark brown) */
  --cream:      #2c1a10;   /* primary text (kept name = "foreground") */
  --cream-2:    #432c1c;
  --cream-dim:  rgba(44,26,16,.66);
  --cream-faint:rgba(44,26,16,.44);
  --on-dark:    #fdf6e8;   /* text on terracotta / colored fills */

  /* brand terracotta */
  --rust:       #822614;
  --rust-bright:#a8341c;
  --rust-deep:  #5e1a0d;

  /* anime pops — "gold" token repurposed as CYAN accent */
  --gold:       #d98a2b;   /* primary accent = cyan */
  --gold-soft:  #ecae5c;
  --gold-deep:  #a9651a;
  --pink:       #f0489a;
  --pink-soft:  #ff7cb6;

  --line:       rgba(130,38,20,.20);
  --line-soft:  rgba(44,26,16,.12);

  /* type */
  --display: "Marcellus", "Times New Roman", serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", monospace;

  /* metrics */
  --maxw: 1240px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-prod: drop-shadow(0 30px 46px rgba(130,38,20,.26)) drop-shadow(0 10px 18px rgba(44,26,16,.16));
  --shadow-card: 0 18px 40px -22px rgba(94,26,13,.40);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--pink); color:var(--on-dark); }

/* screen-reader-only (accessible, not cloaking) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* scrollbar */
body::-webkit-scrollbar{ width:11px; }
body::-webkit-scrollbar-track{ background:var(--paper-2); }
body::-webkit-scrollbar-thumb{ background:var(--rust); border-radius:20px; border:3px solid var(--paper-2); }

/* ---------- typography helpers ---------- */
.display{ font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--rust);
  font-weight:500;
}
.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cream-faint);
}
.lead{ font-size:clamp(16px,1.4vw,19px); color:var(--cream-dim); line-height:1.7; }

h1,h2,h3{ font-family:var(--display); font-weight:400; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ position:relative; }
@media (max-width:720px){ .wrap{ padding:0 20px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:14px;
  letter-spacing:.02em;
  padding:14px 26px; border-radius:100px;
  transition:transform .4s var(--ease), background .3s, color .3s, box-shadow .4s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--rust); color:var(--on-dark);
  box-shadow:0 12px 28px -12px rgba(130,38,20,.7);
}
.btn-primary:hover{ background:var(--rust-bright); box-shadow:0 16px 38px -12px rgba(168,52,28,.8); }
.btn-gold{ background:var(--gold); color:var(--on-dark); }
.btn-gold:hover{ background:var(--gold-deep); box-shadow:0 16px 40px -14px rgba(217,138,43,.6); }
.btn-pink{ background:var(--pink); color:var(--on-dark); }
.btn-pink:hover{ background:var(--pink-soft); }
.btn-ghost{ border:1px solid var(--line); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--rust); background:rgba(130,38,20,.06); }
.btn-block{ width:100%; justify-content:center; }
.btn-lg{ padding:18px 34px; font-size:15px; }

.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
  border:1px solid var(--line); color:var(--cream-dim);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* ---------- divider rule ---------- */
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* texture: soft warm/cool glows on light sections */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(217,138,43,.06), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(240,72,154,.06), transparent 60%);
}

/* glow blob */
.blob{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }

/* product floating shadow under transparent renders */
.prod-shadow{ filter:var(--shadow-prod); }

/* ---------- animated-asset placeholder slot ---------- */
.anim-slot{ position:relative; width:100%; border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(135deg, rgba(217,138,43,.06) 0 12px, rgba(217,138,43,.02) 12px 24px),
    radial-gradient(70% 70% at 50% 45%, rgba(240,72,154,.08), transparent 70%);
  border:1px dashed rgba(217,138,43,.5); }
.anim-slot__pulse{ position:absolute; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(217,138,43,.16), transparent 70%); animation:aspulse 2.6s ease-in-out infinite; }
@keyframes aspulse{ 0%,100%{ transform:scale(.85); opacity:.6; } 50%{ transform:scale(1.1); opacity:1; } }
.anim-slot__play{ position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:var(--gold); display:grid; place-items:center; padding-left:4px; box-shadow:0 10px 30px -8px rgba(217,138,43,.6); }
.anim-slot__play svg{ fill:var(--on-dark); }
.anim-slot__label{ position:relative; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:8px; }
.anim-slot__sub{ position:relative; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-faint); }
.anim-slot__corner{ position:absolute; width:14px; height:14px; border:1.5px solid var(--gold); opacity:.6; }
.anim-slot__corner--tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.anim-slot__corner--tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.anim-slot__corner--bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.anim-slot__corner--br{ bottom:10px; right:10px; border-left:0; border-top:0; }

/* expose hooks placeholder (set by ui.jsx) */