/* ════════════════════════════════════════════════════════════════
   delight.css · "Snip & Sprinkle" layer for Sugar Pop
   Cut-here dividers, coupon strip, click sprinkles, micro-motion,
   hero typography play, squiggle underlines, playbook stats.
   Pure additions — no original rules are redefined except noted.
   ════════════════════════════════════════════════════════════════ */

/* ── Cut-here divider ────────────────────────────────────────── */
.cutline{
  position:relative;
  max-width:1180px;
  margin:26px auto 6px;
  padding:0 16px;
  height:46px;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 48 48'><g fill='none' stroke='%23241F15' stroke-width='3.4' stroke-linecap='round'><circle cx='10' cy='13' r='5.5'/><circle cx='10' cy='35' r='5.5'/><path d='M14 16 L44 31'/><path d='M14 32 L44 17'/></g><circle cx='27' cy='24' r='2.4' fill='%23241F15'/></svg>") 24 24, default;
}
.cut-rail{ position:relative; height:100%; }
.cut-seg{
  position:absolute; top:50%; height:0;
  border-top:2.5px dashed rgba(36,31,21,.34);
}
.cut-seg-l{
  left:0; width:var(--cutx, 6%);
  transform:translateY(3px) rotate(-.5deg);
  transform-origin:right center;
}
.cut-seg-r{ left:var(--cutx, 6%); right:0; }

.cut-scissor{
  position:absolute; top:50%; left:var(--cutx, 6%);
  width:46px; height:46px;
  transform:translate(-40%, -50%);
  pointer-events:none;
}
.cut-scissor svg{ width:100%; height:100%; display:block; overflow:visible }
.cut-scissor .blade{ transform-box:view-box; transform-origin:27px 24px; }
.cutline.live .blade-a{ animation:snip-a .3s ease-in-out infinite alternate }
.cutline.live .blade-b{ animation:snip-b .3s ease-in-out infinite alternate }
@keyframes snip-a{ from{ transform:rotate(-7deg) } to{ transform:rotate(4deg) } }
@keyframes snip-b{ from{ transform:rotate(7deg) } to{ transform:rotate(-4deg) } }

.cut-tag{
  position:absolute; right:26px; top:-9px;
  font-family:var(--disp), sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
  padding:0 10px;
  transform:rotate(.6deg);
  user-select:none;
}

/* ── Coupon divider ──────────────────────────────────────────── */
.cutline.coupon{ height:auto; margin:34px auto 10px }
.coupon-box{
  position:relative;
  width:min(560px, 100%);
  margin:14px auto 0;
  background:var(--card);
  border:2px dashed rgba(36,31,21,.38);
  border-radius:16px;
  padding:18px 34px 20px;
  text-align:center;
  transform:rotate(-1.3deg);
  box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.coupon-box:hover{ transform:rotate(.6deg) scale(1.015) }
.coupon-box::before,
.coupon-box::after{
  content:""; position:absolute; top:50%;
  width:22px; height:22px; border-radius:50%;
  background:var(--paper);
  border:2px dashed rgba(36,31,21,.38);
  transform:translateY(-50%);
}
.coupon-box::before{ left:-13px; clip-path:inset(0 0 0 50%) }
.coupon-box::after{ right:-13px; clip-path:inset(0 50% 0 0) }
.coupon-kicker{
  display:inline-block;
  font-family:var(--disp), sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase;
  background:var(--c1); color:var(--ink);
  padding:4px 14px; border-radius:999px;
  transform:rotate(-2deg);
  margin-bottom:10px;
}
.coupon-title{
  font-family:var(--disp), sans-serif; font-weight:600;
  font-size:clamp(20px, 2.6vw, 27px); line-height:1.15;
  text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 6px;
}
.coupon-meta{
  margin:0;
  font-size:13.5px; font-weight:700;
  color:var(--ink-soft);
  letter-spacing:.04em;
}

/* ── Click sprinkles ─────────────────────────────────────────── */
.sprinkle{
  position:fixed; z-index:9999;
  width:9px; height:4.5px; border-radius:3px;
  pointer-events:none;
}

/* ── Micro-motion extras ─────────────────────────────────────── */

/* the "!" hops every few seconds */
.mega .bang{
  display:inline-block;
  transform-origin:50% 90%;
  animation:bang-hop 4.2s ease-in-out infinite;
}
@keyframes bang-hop{
  0%, 86%, 100%{ transform:none }
  90%{ transform:translateY(-9%) rotate(7deg) scale(1.07) }
  95%{ transform:translateY(2%) rotate(-3deg) }
}

/* logo faces spin on hover */
.mega .face img, .mark .av img{ transition:transform .55s cubic-bezier(.34,1.56,.64,1) }
.mega .face:hover img{ transform:rotate(360deg) }
.mark:hover .av img{ transform:rotate(-360deg) }

/* corner tags sway like price tags */
.hcard-lab .corner-tag, .hcard-hire .corner-tag{
  animation:tag-sway 4.6s ease-in-out infinite;
}
@keyframes tag-sway{
  0%, 100%{ transform:rotate(8deg) }
  50%{ transform:rotate(2deg) }
}

/* marquee pauses when you catch it */
.marquee:hover .marquee-track{ animation-play-state:paused }

/* cards lean into the hover */
a.hcard:hover{ transform:translateY(-4px) rotate(-.5deg) }

/* buttons squish when pressed */
.btn:active{ transform:translateY(0) scale(.96); transition-duration:.06s }

/* nav: hand-drawn squiggle slides in under the link you're on */
.nav{ gap:0 }
.nav a{
  position:relative; overflow:visible;
  font-size:12.5px;
  padding:7px 11px;
}
.nav a::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:3px; height:5px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'><path d='M1 5 Q 8 1, 15 5 T 29 5 T 43 5 T 58 4' fill='none' stroke='%23EE8B4F' stroke-width='2.4' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.nav a:hover::after{ transform:scaleX(1) }
.nav a.active::after{
  transform:scaleX(1);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'><path d='M1 5 Q 8 1, 15 5 T 29 5 T 43 5 T 58 4' fill='none' stroke='%23F2BE45' stroke-width='2.4' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

/* nav links tilt a touch */
.nav a{ transition:background .15s ease, color .15s ease, transform .15s ease }
.nav a:hover{ transform:rotate(-1.5deg) }

/* ── Hero typography play ────────────────────────────────────── */

/* letters bounce in one by one */
.mega .ltr{
  display:inline-block;
  animation:ltr-pop .55s var(--d, 0s) cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ltr-pop{
  from{ opacity:0; transform:translateY(.5em) rotate(8deg) scale(.6) }
  to{ opacity:1; transform:none }
}

/* the red coin rolls in from stage left, keeps its jaunty tilt */
.mega .face{
  position:relative; z-index:1;
  animation:face-roll 1s .12s cubic-bezier(.22,1,.36,1) both;
}
@keyframes face-roll{
  from{ opacity:0; transform:translateX(-38vw) rotate(-536deg) }
  to{ opacity:1; transform:rotate(4deg) }
}

/* hand-drawn loop around OUT! */
.mega .l2{ position:relative; display:inline-block; align-self:flex-start }
.mega .scrib{
  position:absolute; left:-8%; top:-10%;
  width:120%; height:122%;
  pointer-events:none; overflow:visible;
}
.mega .scrib path{
  fill:none; stroke:var(--c3);
  stroke-width:7; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:scrib-draw .9s ease-out 1.1s forwards;
}
@keyframes scrib-draw{ to{ stroke-dashoffset:0 } }

/* ── Squiggle underlines on section titles ───────────────────── */
.sec-head h2 .squig{
  display:block;
  width:min(240px, 55%); height:12px;
  margin-top:8px;
  overflow:visible;
}
.sec-head h2 .squig path{
  fill:none; stroke:var(--c3);
  stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .9s ease .15s;
}
.sec-head h2 .squig.on path{ stroke-dashoffset:0 }

/* ── Playbook stats ──────────────────────────────────────────── */
.smp-stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px; margin:0 0 26px;
}
.smp-stat{
  background:var(--card);
  border-radius:18px;
  padding:14px 8px 12px;
  text-align:center;
  transform:rotate(-1.2deg);
  box-shadow:0 6px 16px rgba(36,31,21,.08);
  transition:transform .2s ease;
}
.smp-stat:nth-child(2n){ transform:rotate(1.2deg) }
.smp-stat:hover{ transform:rotate(0deg) scale(1.05) }
.smp-stat .n{
  display:block;
  font-family:var(--disp), sans-serif; font-weight:600;
  font-size:clamp(20px, 2.2vw, 27px); line-height:1.1;
  color:var(--pine);
  font-variant-numeric:tabular-nums;
}
.smp-stat .l{
  display:block; margin-top:2px;
  font-size:11.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* deck mock straightens up + bars stretch on hover */
.deck-mock{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease }
.deck-mock:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 30px 60px rgba(36,31,21,.22) }
.deck-mock .dk-bar{ transition:width .45s cubic-bezier(.34,1.56,.64,1) }
.deck-mock:hover .dk-bar{ width:76% }
.deck-mock:hover .dk-bar.b2{ width:58% }
.deck-mock:hover .dk-bar.b3{ width:66% }

/* ── Hero entrance ───────────────────────────────────────────── */
.hero-sub, .hero-intro, .hero-cta{
  animation:rise-in .6s cubic-bezier(.22,1,.36,1) both;
}
.hero-sub{ animation-delay:.5s }
.hero-intro{ animation-delay:.58s }
.hero-cta{ animation-delay:.66s }
@keyframes rise-in{
  from{ opacity:0; transform:translateY(26px) }
  to{ opacity:1; transform:none }
}

/* ── back to top ── */
.toTop{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:var(--pine); color:#FBF2D8;
  border:0; cursor:pointer;
  font-family:var(--disp), sans-serif; font-size:22px; line-height:1;
  box-shadow:0 10px 24px rgba(36,31,21,.28);
  opacity:0; transform:translateY(16px) rotate(-8deg);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.toTop.show{ opacity:1; transform:none; pointer-events:auto }
.toTop:hover{ transform:translateY(-3px) rotate(4deg) }

@media (max-width:900px){
}

@media (prefers-reduced-motion: reduce){
  .cutline.live .blade-a, .cutline.live .blade-b,
  .mega .bang,
  .hcard-lab .corner-tag, .hcard-hire .corner-tag{ animation:none }
  .mega .face img, .mark .av img{ transition:none }
  .coupon-box{ transition:none }
  .mega .ltr, .mega .face{ animation:none }
  .mega .scrib path{ animation:none; stroke-dashoffset:0 }
  .sec-head h2 .squig path{ transition:none; stroke-dashoffset:0 }
  .hero-sub, .hero-intro, .hero-cta{ animation:none }
  .toTop{ transition:none }
  .deck-mock, .deck-mock .dk-bar, .smp-stat{ transition:none }
}