/* ============================================================
   CURIO — Design System
   Bold, bubbly, candy-3D. Orange + cream, sparing yellow pop.
   Type: Fredoka (display, chunky/rounded) + Nunito (body).
   ============================================================ */

/* fonts are self-hosted: see fonts.css (loaded by each page) */

:root{
  /* Brand orange (from logo) */
  --orange:        #F7731F;
  --orange-bright: #FF8C3A;
  --orange-deep:   #E85D12;
  --orange-dark:   #C8431A;   /* the logo outline/extrude colour */
  --orange-700:    #A6350E;

  /* Tints + surfaces */
  --tint:    #FFE6D2;
  --tint-2:  #FFF1E6;
  --cream:   #FFF8F1;
  --paper:   #FFFFFF;

  /* Ink (warm near-blacks) */
  --ink:      #2E1B10;
  --ink-soft: #715845;
  --ink-faint:#9C8576;

  /* Sparing accents (fun touches) */
  --yellow:   #FFC23D;
  --yellow-dk:#E89A12;
  --teal:     #19B6A6;

  --line: #F0DECB;

  /* Radii */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 34px;
  --r-xl: 46px;

  /* Candy extrude depth */
  --pop: 6px;

  --shadow-soft: 0 18px 40px -18px rgba(200,67,26,.30);
  --shadow-card: 0 26px 60px -28px rgba(122,40,12,.40);

  --maxw: 1200px;
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fredoka',system-ui,sans-serif;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Display type scale ---------- */
.display{ font-size:clamp(2.7rem,6.4vw,5.4rem); font-weight:700; letter-spacing:-.02em; }
.h-xl{ font-size:clamp(2.1rem,4.2vw,3.4rem); font-weight:700; }
.h-lg{ font-size:clamp(1.7rem,3vw,2.5rem); font-weight:600; }
.eyebrow{
  font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep);
}
.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft); font-weight:500; }
.ink-grad{
  background:linear-gradient(180deg,var(--orange-bright),var(--orange-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Candy buttons ---------- */
.btn{
  --bg:var(--orange); --edge:var(--orange-dark);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.06rem;
  color:#fff;
  /* sheen baked into the background so it never covers the fill */
  background-color:var(--bg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 50%);
  border:none; border-radius:999px; cursor:pointer;
  padding:15px 30px;
  box-shadow:0 var(--pop) 0 var(--edge), 0 calc(var(--pop) + 8px) 18px -6px rgba(200,67,26,.45);
  transition:transform .12s var(--ease-pop), box-shadow .12s var(--ease-pop), background-color .2s;
}
.btn:hover{ transform:translateY(2px); box-shadow:0 calc(var(--pop) - 2px) 0 var(--edge), 0 10px 16px -8px rgba(200,67,26,.5); }
.btn:active{ transform:translateY(var(--pop)); box-shadow:0 0 0 var(--edge); }
.btn.lg{ font-size:1.18rem; padding:18px 38px; --pop:7px; }

.btn.ghost{
  background-color:var(--paper); color:var(--orange-deep);
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 60%);
  --edge:var(--tint);
  box-shadow:0 var(--pop) 0 var(--line), inset 0 0 0 2px var(--tint);
}
.btn.ghost:hover{ color:var(--orange); }

.btn.yellow{ --bg:var(--yellow); --edge:var(--yellow-dk); color:var(--ink); }
.btn.white{ --bg:#fff; --edge:#F3C9AE; color:var(--orange-deep); }

/* ---------- Pills / chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Fredoka',sans-serif; font-weight:500; font-size:.86rem;
  padding:8px 16px; border-radius:999px;
  background:var(--paper); color:var(--orange-deep);
  box-shadow:inset 0 0 0 2px var(--tint), 0 6px 16px -10px rgba(200,67,26,.5);
}
.chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(247,115,31,.18); }
.chip.live .dot{ background:#1fb86a; box-shadow:0 0 0 4px rgba(31,184,106,.2); animation:pulse 1.8s infinite; }

/* ---------- Cards ---------- */
.card{
  background:var(--paper); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  border:2px solid #fff;
  position:relative;
}
.card.edge{ box-shadow:0 10px 0 var(--tint), var(--shadow-card); }

/* ---------- Sections ---------- */
section{ position:relative; }
.section-pad{ padding:clamp(64px,9vw,120px) 0; }

/* ---------- Decorative bits ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; pointer-events:none; z-index:0; }
.bubble{ position:absolute; border-radius:50%; pointer-events:none; }

/* squiggle underline */
.squiggle{ display:inline-block; position:relative; }
.squiggle svg{ position:absolute; left:-2%; bottom:-.06em; width:104%; height:.28em; overflow:visible; }

/* ---------- Motion utilities ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s var(--ease-pop); }
.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; }

@keyframes float-y{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)); } }
@keyframes wave-bob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-16px) rotate(2deg); } }
@keyframes drift{ 0%{ transform:translateY(0) } 100%{ transform:translateY(-120vh) } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.35); opacity:.5 } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes wiggle{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

.float{ animation:float-y 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .float,.bubble,[class*="anim-"]{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

.no-motion .float,.no-motion .bubble,.no-motion [class*="anim-"]{ animation:none !important; }
.no-motion .reveal{ opacity:1 !important; transform:none !important; }