/* ============================================================
   monopole.tech — bedazzled instrument panel of a particle hunt
   McBling · broken-grid · playful-rounded · dopamine-neon
   ============================================================ */

:root{
  --paper:#FBF7EE;
  --ruled:#C9D6E8;
  --ink:#1B1320;
  --bubblegum:#FF3FA4;
  --electric-cyan:#13E0E8;
  --acid-lime:#C6FF1A;
  --hot-tangerine:#FF7A00;
  --chrome-hi:#F2F4FF;
  --chrome-lo:#A9B3D6;

  --holo:conic-gradient(from 0deg,#FF3FA4,#13E0E8,#C6FF1A,#FF7A00,#FF3FA4);
  --chrome:linear-gradient(135deg,#F2F4FF 0%,#C9D6E8 38%,#A9B3D6 60%,#F2F4FF 100%);

  --ff-display:'Fredoka', system-ui, sans-serif;
  --ff-puffy:'Baloo 2', system-ui, sans-serif;
  --ff-body:'Spline Sans', system-ui, sans-serif;
  --ff-pen:'Caveat', cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* faint paper grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:multiply;
}

/* ruled-line broken-grid stage (visible but ignored) */
.ruled-stage{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--ruled) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--ruled) 38%, transparent) 1px, transparent 1px);
  background-size:calc(100%/12) 100%, 100% 2.1rem;
}
.ruled-faint{ opacity:.5; }

main{ position:relative; z-index:1; }

section{
  position:relative;
  padding:7rem clamp(1.2rem,7vw,8rem) 7rem;
  overflow:hidden;
}

/* ===================== chips (numbered, rhinestoned) ===================== */
.chip{
  position:absolute; top:1.6rem; left:clamp(1.2rem,7vw,8rem);
  z-index:30;
  font-family:var(--ff-puffy); font-weight:700; font-size:1.05rem;
  color:var(--ink);
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:11px;
  padding:.18rem .6rem .26rem;
  transform:rotate(calc(var(--rot,-4) * 1deg));
  box-shadow:3px 3px 0 var(--ink);
}
.chip::before,.chip::after{
  content:""; position:absolute; width:8px; height:8px;
  background:var(--chrome); transform:rotate(45deg);
  border-radius:1px;
}
.chip::before{ top:-5px; left:-5px; }
.chip::after{ bottom:-5px; right:-5px; }
.chip-hero{ top:auto; bottom:9%; left:auto; right:8%; font-size:1.3rem; padding:.3rem .8rem .4rem; }

/* ===================== section titles ===================== */
.section-title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.8rem,4.5vw,3.4rem);
  line-height:1.02; letter-spacing:-0.01em;
  margin-bottom:1.4rem;
  transform:rotate(calc(var(--rot,0) * 1deg));
  color:var(--ink);
  position:relative; z-index:5;
}
.section-lede,.section-lede{
  font-size:1.05rem; max-width:60ch; color:color-mix(in srgb,var(--ink) 86%, transparent);
  margin-bottom:2.6rem; position:relative; z-index:5;
}

/* ===================== HERO ===================== */
.hero{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding-top:8rem; padding-bottom:5rem;
}
.hero-inner{ position:relative; z-index:10; max-width:1100px; }
.wordmark{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(2.6rem,12vw,8.5rem);
  line-height:.92; letter-spacing:-0.02em;
  color:var(--ink);
  display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:center;
}
.tld{ color:var(--bubblegum); }
.dot-bead{
  display:inline-block; width:.42em; height:.42em; border-radius:50%;
  background:var(--chrome);
  box-shadow:0 .04em .12em rgba(27,19,32,.35), inset -0.06em -0.08em 0.12em rgba(27,19,32,.25);
  position:relative; margin:0 .02em;
  transform:translateY(-0.02em);
}
.dot-bead .bead-hi{
  position:absolute; top:14%; left:22%; width:26%; height:26%;
  border-radius:50%; background:#fff; opacity:.92; filter:blur(.4px);
}
.hero-prose{
  font-family:var(--ff-body); font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  max-width:46ch; margin:1.8rem auto 0;
  color:var(--ink);
  line-height:1.55;
}

/* hero stickers */
.sticker{
  position:absolute; z-index:8; pointer-events:none;
  filter:drop-shadow(4px 6px 8px rgba(27,19,32,.22));
  transform:rotate(calc(var(--rot,0) * 1deg));
}
.sticker svg{ display:block; }
.sticker-N{
  top:13%; left:9%;
  font-family:var(--ff-puffy); font-weight:700; font-size:clamp(3rem,8vw,6.5rem);
  width:1.4em; height:1.4em; line-height:1.4em; text-align:center;
  color:#fff; border-radius:30% 36% 30% 40%;
  background:var(--holo); background-size:220% 220%; background-position:30% 40%;
  border:4px solid #fff;
  -webkit-text-stroke:1px rgba(27,19,32,.3);
}
.sticker-heart{
  bottom:14%; left:13%; width:clamp(70px,9vw,128px); height:auto;
}
.sticker-heart svg path{
  fill:var(--bubblegum);
  stroke:#fff; stroke-width:5;
}
.sticker-heart::after{
  content:""; position:absolute; top:18%; left:24%; width:18%; height:14%;
  background:#fff; border-radius:50%; opacity:.85; filter:blur(1px);
}
.sticker-rosette{
  top:18%; right:8%; width:clamp(96px,11vw,150px); height:auto;
  display:flex; align-items:center; justify-content:center;
}
.sticker-rosette svg{ width:100%; height:auto; }
.sticker-rosette svg g path{ fill:var(--acid-lime); stroke:#fff; stroke-width:3; }
.rosette-text{
  position:absolute; font-family:var(--ff-puffy); font-weight:700;
  font-size:.62rem; color:var(--ink); text-align:center; width:80%;
  letter-spacing:.02em; line-height:1.05;
}

/* gel-pen scrawls */
.scrawl{
  font-family:var(--ff-pen); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,2rem);
  color:var(--electric-cyan);
  position:absolute; display:inline-flex; align-items:center; gap:.2em;
  z-index:9; pointer-events:none;
  text-shadow:0 1px 0 rgba(27,19,32,.12);
}
.scrawl svg{ width:2.4em; height:1.6em; overflow:visible; color:var(--electric-cyan); }
.scrawl-north{ top:42%; right:11%; transform:rotate(-7deg); }
.scrawl-dirac{ color:var(--bubblegum); bottom:1rem; right:1.4rem; transform:rotate(5deg); font-size:1.4rem; }
.scrawl-dirac svg{ color:var(--bubblegum); }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-decoration:none; z-index:10;
}
.cue-chain{ width:2px; height:42px; background:linear-gradient(var(--chrome-lo),var(--chrome-hi)); border-radius:2px; transform-origin:top center; }
.cue-bead{ width:14px; height:14px; border-radius:50%; background:var(--chrome); box-shadow:0 1px 2px rgba(27,19,32,.3); position:relative; }
.cue-bead::after{ content:""; position:absolute; top:18%; left:22%; width:30%; height:30%; background:#fff; border-radius:50%; opacity:.9; }
.cue-text{ font-family:var(--ff-pen); font-weight:600; font-size:1.1rem; color:var(--ink); opacity:.6; }
.cue-chain.sway{ animation:swayChain 3.4s ease-in-out infinite; }
@keyframes swayChain{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } }

/* ===================== BRACELET RAIL ===================== */
.bracelet{
  position:fixed; top:50%; left:14px; transform:translateY(-50%);
  z-index:120;
}
.bracelet-vine{
  position:absolute; left:-6px; top:-12px; width:60px; height:108%;
  z-index:0; opacity:.55; pointer-events:none;
}
.bracelet-strand{
  list-style:none; display:flex; flex-direction:column; gap:.55rem;
  position:relative; z-index:1;
  background:linear-gradient(var(--chrome-lo),var(--chrome-hi),var(--chrome-lo));
  padding:.7rem .25rem; border-radius:18px;
  box-shadow:0 4px 14px rgba(27,19,32,.18), inset 0 0 0 1px rgba(255,255,255,.4);
}
.bead{
  display:flex; align-items:center; gap:0; text-decoration:none;
  position:relative;
}
.bead-pip{
  width:14px; height:14px; border-radius:50%;
  background:var(--paper);
  border:2.5px solid var(--ink);
  display:block; flex:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1), background .25s, box-shadow .25s, width .25s, height .25s;
}
.bead-label{
  position:absolute; left:24px; top:50%; transform:translateY(-50%) scale(.85);
  transform-origin:left center;
  font-family:var(--ff-puffy); font-weight:700; font-size:.72rem;
  letter-spacing:.06em;
  background:var(--ink); color:var(--paper);
  padding:.15rem .5rem .2rem; border-radius:8px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
  box-shadow:2px 2px 0 rgba(27,19,32,.25);
}
.bead:hover .bead-label{ opacity:1; }
.bead:hover .bead-pip{ transform:scale(1.25); }
.bead.active .bead-pip{
  width:20px; height:20px;
  background:var(--bubblegum);
  border-color:var(--bubblegum);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--acid-lime) 55%, transparent), 0 0 14px color-mix(in srgb,var(--bubblegum) 70%, transparent);
}
.bead.active .bead-label{ opacity:1; }

/* mobile charm */
.charm-toggle{
  display:none;
  position:fixed; bottom:22px; right:22px; z-index:130;
  background:none; border:none; cursor:pointer;
  flex-direction:column; align-items:center;
}
.charm-chain{ width:2px; height:26px; background:linear-gradient(var(--chrome-lo),var(--chrome-hi)); }
.charm-bead{
  width:46px; height:46px; border-radius:50%;
  background:var(--bubblegum); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  box-shadow:0 4px 12px rgba(27,19,32,.3), inset 0 0 0 3px #fff, 0 0 0 4px var(--acid-lime);
  animation:swayChain 3s ease-in-out infinite;
}

/* ===================== THEORY ===================== */
.theory-grid{
  position:relative; z-index:5;
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:0; margin-top:1rem; min-height:480px;
}
.frame{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:18px;
  padding:1.6rem 1.8rem;
  box-shadow:5px 6px 0 var(--ink);
  position:relative;
  transform:rotate(calc(var(--rot,0) * 1deg));
}
.frame-diagram{
  width:min(430px,90vw);
  margin-right:-46px; margin-top:18px;
  display:flex; flex-direction:column; align-items:center;
  background:#fff;
}
.bloom-canvas{ width:100%; max-width:380px; height:auto; aspect-ratio:1/1; display:block; }
.frame-cap{
  font-family:var(--ff-pen); font-weight:600; font-size:1.05rem;
  color:var(--ink); opacity:.6; margin-top:.7rem; text-align:center;
}
.frame-text{
  width:min(560px,92vw);
  margin-left:-30px; margin-top:90px;
}
.frame-text p{ margin-bottom:1rem; max-width:62ch; }
.frame-text p:last-of-type{ margin-bottom:0; }
.emph{ font-weight:600; font-size:1.12rem; }
.annot{
  font-family:var(--ff-pen); font-weight:700;
  font-size:1.15em; color:var(--electric-cyan);
  padding:0 .15em;
}

/* corner studs */
.stud{
  position:absolute; width:11px; height:11px;
  background:var(--chrome); transform:rotate(45deg);
  border-radius:1.5px;
  box-shadow:0 1px 2px rgba(27,19,32,.3), inset 1px 1px 1px rgba(255,255,255,.6);
}
.stud-tl{ top:-6px; left:-6px; } .stud-tr{ top:-6px; right:-6px; }
.stud-bl{ bottom:-6px; left:-6px; } .stud-br{ bottom:-6px; right:-6px; }

/* one-sided glitter */
.glint{
  position:absolute; width:10px; height:10px; pointer-events:none;
  background:radial-gradient(circle,#fff 0 25%, var(--acid-lime) 26% 60%, transparent 62%);
  border-radius:50%;
}
.glint::after{ content:"✦"; position:absolute; inset:0; color:#fff; font-size:14px; line-height:10px; transform:translate(-2px,-3px); }
.g1{ top:-14px; right:18px; } .g2{ top:30px; right:-12px; }
.g3{ top:90px; right:-16px; transform:scale(.7); } .g4{ top:150px; right:-8px; transform:scale(.5); }

/* ===================== HUNT — constellation ===================== */
.constellation{
  position:relative; z-index:5;
  min-height:560px;
  margin-top:1rem;
}
.thread-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.badge{
  position:absolute; left:var(--bx); top:var(--by);
  transform:translate(-50%,-50%) rotate(calc(var(--rot,0) * 1deg));
  background:var(--chrome);
  border:3px solid var(--ink);
  border-radius:14px;
  padding:.55rem .85rem .6rem;
  cursor:pointer;
  font-family:var(--ff-puffy); font-weight:700;
  display:flex; align-items:center; gap:.45rem;
  box-shadow:3px 4px 0 var(--ink);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, filter .28s;
  color:var(--ink);
  white-space:nowrap;
}
.badge::before{ content:""; position:absolute; top:-5px; left:-5px; width:9px; height:9px; background:var(--chrome-hi); transform:rotate(45deg); border-radius:1px; box-shadow:inset 1px 1px 1px #fff; }
.badge::after{ content:""; position:absolute; bottom:-5px; right:-5px; width:9px; height:9px; background:var(--chrome-hi); transform:rotate(45deg); border-radius:1px; box-shadow:inset 1px 1px 1px #fff; }
.badge-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--bubblegum); color:#fff;
  font-size:.8rem; font-style:italic;
}
.badge-name{ font-size:.92rem; }
.badge:hover{
  transform:translate(-50%,-50%) rotate(0deg) scale(1.12);
  box-shadow:4px 6px 0 var(--ink), 0 0 0 5px color-mix(in srgb,var(--acid-lime) 55%, transparent);
  z-index:20 !important;
}

/* ===================== NULLS — scrapbook ===================== */
.nulls{ background:color-mix(in srgb,var(--paper) 96%, var(--ink)); }
.bloom-big{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.5; pointer-events:none;
}
.scrapbook{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  gap:0; margin-top:1rem;
}
.foil{
  width:min(560px,94vw);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:14px;
  padding:1.1rem 1.5rem 1.2rem;
  margin-top:-14px;
  cursor:pointer;
  position:relative;
  transform:rotate(calc(var(--rot,0) * 1deg));
  display:flex; align-items:center; gap:1.1rem;
  box-shadow:4px 5px 0 var(--ink);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  text-align:left;
  overflow:hidden;
}
.foil:first-child{ margin-top:0; }
.foil::before{
  content:""; position:absolute; inset:0;
  background:var(--holo); background-size:300% 300%;
  opacity:.16; mix-blend-mode:screen;
  transition:background-position .6s linear;
  pointer-events:none;
}
.foil:hover{ transform:rotate(0deg) scale(1.025); box-shadow:6px 8px 0 var(--ink); z-index:10; }
.foil:hover::before{ background-position:100% 50%; }
.foil-date{
  font-family:var(--ff-puffy); font-weight:700; font-size:1.05rem;
  color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:8px;
  padding:.1rem .45rem .15rem; flex:none;
  position:relative; z-index:2;
}
.foil-stamp{
  font-family:var(--ff-puffy); font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.6rem);
  letter-spacing:.08em; color:var(--ink);
  flex:1; text-align:center;
  position:relative; z-index:2;
  -webkit-text-stroke:.5px var(--ink);
}
.foil-tag{
  font-family:var(--ff-pen); font-weight:600; font-size:1.05rem;
  color:var(--electric-cyan); flex:none; max-width:9rem; text-align:right;
  position:relative; z-index:2; line-height:1.15;
}

/* the singular Cabrera heart */
.foil-heart{
  background:var(--bubblegum);
  border-color:var(--ink);
  flex-direction:column; align-items:center;
  padding:1.6rem 1.5rem 1.4rem;
  box-shadow:5px 7px 0 var(--ink), 0 0 0 4px var(--acid-lime);
}
.foil-heart::before{ opacity:.3; }
.heart-shape{ width:clamp(70px,11vw,110px); }
.heart-shape svg path{ fill:#fff; stroke:var(--hot-tangerine); stroke-width:5; }
.heart-date{ margin-top:.5rem; background:#fff; }
.heart-cap{
  font-family:var(--ff-pen); font-weight:600; font-size:1.2rem;
  color:#fff; margin-top:.3rem; text-align:center;
  position:relative; z-index:2;
}

/* ===================== OPEN ===================== */
.open-panel{
  position:relative; z-index:5;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:20px;
  padding:2.2rem clamp(1.4rem,4vw,3rem);
  max-width:760px;
  box-shadow:6px 7px 0 var(--ink);
  transform:rotate(calc(var(--rot,0) * 1deg));
  /* notebook lines inside */
  background-image:repeating-linear-gradient(transparent 0 calc(2.1rem - 1px), color-mix(in srgb,var(--ruled) 50%, transparent) calc(2.1rem - 1px) 2.1rem);
}
.open-intro{ font-weight:500; margin-bottom:1.4rem; max-width:62ch; }
.open-list{ list-style:none; margin-bottom:1.6rem; }
.open-list li{
  position:relative; padding-left:1.8rem; margin-bottom:.95rem; max-width:62ch;
}
.bull{
  position:absolute; left:0; top:.1rem;
  font-family:var(--ff-pen); font-weight:700; font-size:1.5rem;
  color:var(--bubblegum);
}
.open-signoff{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
  transform:rotate(-1.5deg);
}
.signoff-bead{
  width:.7em; height:.7em; border-radius:50%; background:var(--chrome);
  box-shadow:inset -1px -2px 2px rgba(27,19,32,.3); position:relative;
}
.signoff-bead::after{ content:""; position:absolute; top:14%; left:22%; width:28%; height:28%; background:#fff; border-radius:50%; opacity:.9; }

/* ===================== FOOTER ===================== */
.footer{
  position:relative;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb,var(--ruled) 30%, transparent) 14px 15px),
    color-mix(in srgb,var(--paper) 92%, var(--ruled));
  border-top:3px dashed color-mix(in srgb,var(--ink) 35%, transparent);
  padding:3rem clamp(1.2rem,7vw,8rem) 3.4rem;
  overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background-image:radial-gradient(circle, var(--paper) 0 4px, transparent 5px);
  background-size:18px 8px; background-position:0 -2px;
  transform:translateY(-1px);
}
.footer-vine{ position:absolute; top:8px; left:0; width:100%; height:46px; opacity:.6; pointer-events:none; }
.footer-inner{ position:relative; z-index:2; display:flex; flex-direction:column; gap:.4rem; }
.footer-mark{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--ink); display:inline-flex; align-items:baseline;
}
.dot-bead-sm{ width:.4em; height:.4em; }
.footer-credit{
  font-family:var(--ff-body); font-weight:400; font-size:.92rem;
  color:color-mix(in srgb,var(--ink) 70%, transparent);
}

/* ===================== ZOOM-FOCUS overlay ===================== */
.focus-overlay{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.focus-overlay[hidden]{ display:none; }
.focus-scrim{
  position:absolute; inset:0;
  background:color-mix(in srgb,var(--ink) 12%, transparent);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s;
}
.focus-overlay.open .focus-scrim{ opacity:1; }
.focus-card{
  position:relative; z-index:2;
  background:var(--paper);
  border:3.5px solid var(--ink);
  border-radius:20px;
  padding:2rem clamp(1.4rem,4vw,2.6rem) 2.2rem;
  max-width:540px; width:100%;
  box-shadow:7px 9px 0 var(--ink), 0 0 0 5px color-mix(in srgb,var(--acid-lime) 50%, transparent);
  transform:rotate(-1.5deg) scale(.86);
  opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .28s;
}
.focus-overlay.open .focus-card{ transform:rotate(-1.5deg) scale(1); opacity:1; }
.focus-close{
  position:absolute; top:-16px; right:-16px;
  width:38px; height:38px; border-radius:50%;
  background:var(--bubblegum); color:#fff; border:3px solid var(--ink);
  font-size:1.4rem; line-height:1; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
}
.focus-date{
  font-family:var(--ff-pen); font-weight:700; font-size:1.3rem;
  color:var(--electric-cyan); margin-bottom:.2rem;
}
.focus-title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.05;
  color:var(--ink); margin-bottom:.8rem;
}
.focus-body{ font-size:1.02rem; line-height:1.65; color:var(--ink); }
.focus-stamp{
  display:none;
  margin-top:1rem;
  font-family:var(--ff-puffy); font-weight:700; letter-spacing:.1em;
  color:var(--hot-tangerine); font-size:1.1rem;
  transform:rotate(-3deg);
}
.focus-overlay.show-stamp .focus-stamp{ display:inline-block; }

/* ===================== reveal animations ===================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.sticker, .chip, .badge, .foil, .frame{ opacity:0; }
.bedazzle .sticker, .bedazzle .chip, .bedazzle .badge, .bedazzle .foil, .bedazzle .frame{
  opacity:1; transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.bedazzle .stud, .bedazzle .glint, .bedazzle .badge::before, .bedazzle .badge::after,
.bedazzle .chip::before, .bedazzle .chip::after{
  animation:twinkleIn .25s ease-out both;
}
@keyframes twinkleIn{ from{ transform:scale(0) rotate(45deg); } to{ transform:scale(1) rotate(45deg); } }

.vine-path{
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
.vine-draw .vine-path{ animation:vineDraw 1.1s ease-out forwards; }
@keyframes vineDraw{ to{ stroke-dashoffset:0; } }

/* ===================== responsive — broken grid flattens ===================== */
@media (max-width:860px){
  .bracelet{ display:none; }
  .charm-toggle{ display:flex; }
  .charm-toggle.expanded ~ .bracelet,
  .bracelet.expanded{
    display:block;
    position:fixed; bottom:90px; right:18px; top:auto; transform:none;
    z-index:135;
  }
  .bracelet.expanded .bead-label{ opacity:1; }

  section{ padding:5rem 1.2rem 5rem; }
  .chip{ left:1.2rem; }
  .chip-hero{ right:1.2rem; }

  .theory-grid{ flex-direction:column; align-items:center; min-height:0; }
  .frame-diagram{ margin:0 0 24px; width:min(360px,92vw); transform:rotate(-2deg); }
  .frame-text{ margin:0; width:92vw; transform:rotate(1.5deg); }

  .constellation{ min-height:0; display:flex; flex-direction:column; gap:14px; }
  .thread-svg{ display:none; }
  .badge{
    position:relative; left:auto; top:auto;
    transform:rotate(calc(clamp(-2,var(--rot,0),2) * 1deg));
    align-self:center; width:fit-content; max-width:92vw; white-space:normal;
  }
  .badge:hover{ transform:scale(1.05); }

  .foil{ transform:rotate(calc(clamp(-2,var(--rot,0),2) * 1deg)); margin-top:-10px; }
  .foil-tag{ display:none; }
  .scrawl-north{ right:4%; }

  .sticker-N{ left:2%; top:9%; }
  .sticker-rosette{ right:2%; }
  .sticker-heart{ left:4%; }
}

@media (max-width:520px){
  .foil{ flex-wrap:wrap; gap:.5rem; }
  .foil-stamp{ flex-basis:100%; text-align:left; }
  .sticker-N{ font-size:2.6rem; opacity:.85; }
  .scrawl{ font-size:1.2rem; }
}

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .sticker, .chip, .badge, .foil, .frame{ opacity:1; }
  .vine-path{ stroke-dashoffset:0; }
  .cue-chain.sway{ animation:none; }
  .charm-bead{ animation:none; }
}