/* ==========================================================================
   WAI — Who Am I?  |  A storybook journal for kids
   Warm cream paper, five-element accents, handwritten touches.
   ========================================================================== */

:root{
  /* paper & ink */
  --paper:#FBF3E2;
  --paper-2:#F6E9CF;
  --ink:#4A3728;
  --ink-soft:#6E5945;
  --ink-faint:#9C876B;
  --line:#E4D3AE;
  --card:#FFFDF6;

  /* five elements */
  --earth:#C1683B;
  --water:#2E8B93;
  --fire:#E4832B;
  --air:#7F9C6B;
  --space:#6C63A6;

  /* warm brand */
  --marigold:#F2A73B;
  --terracotta:#D9734A;
  --rose:#E5897B;

  --radius:18px;
  --shadow:0 10px 30px -12px rgba(74,55,40,.35);
  --shadow-lift:0 18px 44px -16px rgba(74,55,40,.45);

  --font-display:'Fraunces', Georgia, serif;
  --font-hand:'Caveat', cursive;
  --font-body:'Nunito', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--paper);
  /* layered paper texture: warm gradient wash + faint dotted grid */
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(242,167,59,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(46,139,147,.10), transparent 55%),
    radial-gradient(circle at 1px 1px, rgba(74,55,40,.055) 1px, transparent 0);
  background-size:auto, auto, 22px 22px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* faint grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.wrap, header, footer, main{position:relative;z-index:1}

a{color:var(--terracotta);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.12;font-weight:600;margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.5px}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.hand{font-family:var(--font-hand);color:var(--terracotta)}
.muted{color:var(--ink-soft)}
.center{text-align:center}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
section{padding:64px 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:800;font-size:1rem;
  padding:.72em 1.35em;border-radius:999px;border:2px solid var(--ink);
  background:var(--marigold);color:var(--ink);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);text-decoration:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--terracotta);color:#fff}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{box-shadow:3px 3px 0 var(--ink)}
.btn.small{padding:.45em .9em;font-size:.9rem;box-shadow:2px 2px 0 var(--ink)}
.btn.block{display:flex;width:100%;justify-content:center}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- header / nav ---------- */
.site-header{padding:16px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%, #fff3, transparent), var(--terracotta);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-display);font-weight:600;color:#fff;font-size:1.5rem;
}
.brand .txt b{font-family:var(--font-display);font-size:1.35rem;color:var(--ink);display:block;line-height:1}
.brand .txt span{font-family:var(--font-hand);font-size:1.15rem;color:var(--terracotta)}
.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-links a{padding:.4em .8em;border-radius:999px;color:var(--ink);font-weight:700}
.nav-links a:hover{background:var(--paper-2);text-decoration:none}

/* ---------- washi tape + cards ---------- */
.card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);position:relative;
}
.tape{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:120px;height:26px;background:rgba(242,167,59,.55);
  border:1px dashed rgba(74,55,40,.35);border-radius:3px;
}
.tape.left{left:34px;transform:rotate(-6deg)}

/* ---------- hero ---------- */
.hero{padding-top:20px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero .eyebrow{font-family:var(--font-hand);font-size:1.5rem;color:var(--water)}
.hero h1 .u{background:linear-gradient(transparent 62%, rgba(242,167,59,.55) 0);padding:0 .1em}
.hero p.lead{font-size:1.2rem;color:var(--ink-soft);max-width:34ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* the elements "medallion" in the hero */
.medallion{
  aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;
  background:
    conic-gradient(from -90deg,
      var(--earth) 0 20%, var(--water) 20% 40%, var(--fire) 40% 60%,
      var(--air) 60% 80%, var(--space) 80% 100%);
  border:3px solid var(--ink);box-shadow:var(--shadow-lift);
  padding:16px;max-width:380px;margin:0 auto;
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.medallion .core{
  position:absolute;inset:22%;border-radius:50%;background:var(--paper);
  border:2px dashed var(--ink);display:grid;place-items:center;text-align:center;
  animation:spin 60s linear infinite reverse;
}
.medallion .core b{font-family:var(--font-display);font-size:2.6rem;line-height:.9;color:var(--ink)}
.medallion .core span{font-family:var(--font-hand);color:var(--terracotta);font-size:1.4rem}
.medallion .dot{position:absolute;font-size:1.7rem}

/* ---------- elements strip ---------- */
.elements-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.el-card{
  background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:18px 14px;
  text-align:center;box-shadow:4px 4px 0 var(--el);transition:transform .15s ease;
  border-top:7px solid var(--el);
}
.el-card:hover{transform:translateY(-4px)}
.el-card .em{font-size:2.2rem;display:block}
.el-card b{font-family:var(--font-display);font-size:1.2rem;display:block;margin-top:6px}
.el-card .en{font-family:var(--font-hand);color:var(--el);font-size:1.15rem}
.el-card small{display:block;color:var(--ink-soft);margin-top:8px;font-size:.82rem;line-height:1.4}

/* the inside/outside two-column poem */
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.io-col h3{display:flex;align-items:center;gap:10px}
.io-list{list-style:none;padding:0;margin:0}
.io-list li{padding:12px 0;border-bottom:1px dashed var(--line);display:flex;gap:12px;align-items:flex-start}
.io-list .em{font-size:1.5rem;flex:0 0 auto}

/* ---------- age ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rung{
  background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:18px 14px;
  box-shadow:var(--shadow);text-align:center;position:relative;
}
.rung .age{font-family:var(--font-display);font-size:1.5rem;color:var(--terracotta)}
.rung .blurb{font-size:.85rem;color:var(--ink-soft)}
.rung .n{position:absolute;top:-14px;left:-10px;width:34px;height:34px;border-radius:50%;
  background:var(--marigold);border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;box-shadow:2px 2px 0 var(--ink)}

/* ---------- class cards ---------- */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.class-card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .15s ease, box-shadow .15s ease;
}
.class-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.class-card .top{padding:16px 18px;border-bottom:2px dashed var(--line);background:var(--el-tint);position:relative}
.class-card .badge{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.78rem;
  padding:.28em .7em;border-radius:999px;background:var(--el);color:#fff;border:2px solid var(--ink);
}
.class-card .when{font-family:var(--font-hand);font-size:1.35rem;color:var(--ink);margin-top:10px}
.class-card .body{padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:10px}
.class-card h3{margin:0;font-size:1.25rem}
.class-card .meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--ink-soft)}
.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.2em .7em;font-weight:700}
.class-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.price{font-family:var(--font-display);font-size:1.35rem;color:var(--ink)}
.price small{font-size:.7rem;color:var(--ink-soft);font-weight:700}
.seats{font-size:.78rem;color:var(--ink-soft)}
.seats.low{color:var(--terracotta);font-weight:800}

/* ---------- audio player ---------- */
.audio-hero{background:var(--paper-2);border:2px solid var(--ink);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.audio-row{display:flex;align-items:center;gap:16px;padding:14px;border:2px solid var(--ink);border-radius:16px;background:var(--card);box-shadow:3px 3px 0 var(--ink);margin-bottom:12px}
.audio-row .play{width:52px;height:52px;flex:0 0 auto;border-radius:50%;border:2px solid var(--ink);background:var(--el,var(--marigold));color:#fff;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
.audio-row .play:hover{transform:translateY(-1px)}
.audio-row .info b{display:block;font-family:var(--font-display);font-size:1.1rem}
.audio-row .info small{color:var(--ink-soft)}
audio{width:100%;margin-top:8px}

/* ---------- forms ---------- */
.form{max-width:460px;margin:0 auto}
label{display:block;font-weight:800;margin:14px 0 6px;font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=datetime-local],input[type=date],input[type=url],input[type=file],select,textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:.7em .85em;border:2px solid var(--ink);border-radius:12px;background:var(--card);
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(242,167,59,.5)}
textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help{font-size:.82rem;color:var(--ink-soft);margin-top:4px}

/* ---------- flash / alerts ---------- */
.flash{padding:12px 16px;border-radius:12px;border:2px solid var(--ink);margin:14px 0;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.flash.ok{background:#E7F0E1}
.flash.err{background:#F8E0D8}
.notice{background:var(--paper-2);border:2px dashed var(--ink);border-radius:14px;padding:14px 16px;font-size:.9rem}

/* ---------- dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1fr;gap:26px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{margin:0}

/* diary */
.diary-entry{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;box-shadow:3px 3px 0 var(--ink);margin-bottom:14px;
  background-image:repeating-linear-gradient(var(--card) 0 30px, var(--line) 30px 31px);background-attachment:local}
.diary-entry h4{margin:0 0 4px}
.diary-entry .date{font-family:var(--font-hand);color:var(--water);font-size:1.1rem}
.diary-entry p{white-space:pre-wrap;margin:.4em 0 0}

/* mood/element picker */
.el-pick{display:flex;gap:8px;flex-wrap:wrap}
.el-pick label{margin:0;cursor:pointer}
.el-pick input{display:none}
.el-pick span{display:inline-flex;align-items:center;gap:6px;padding:.4em .8em;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;font-size:.9rem}
.el-pick input:checked + span{background:var(--el);color:#fff}

/* tables (teacher) */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
.tbl th{background:var(--paper-2);font-family:var(--font-display)}
.tag{display:inline-block;padding:.15em .6em;border-radius:999px;font-size:.75rem;font-weight:800;border:1px solid var(--ink)}
.tag.paid{background:#D7EBD0}.tag.reserved{background:#FBE6C4}.tag.cancelled{background:#F3D6CE}

/* ---------- footer ---------- */
footer{background:var(--paper-2);border-top:3px solid var(--ink);padding:44px 0 30px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a{color:var(--ink);font-weight:700}
.foot-small{color:var(--ink-soft);font-size:.85rem;margin-top:22px}

/* ---------- reveal on load ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .elements-grid{grid-template-columns:repeat(2,1fr)}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .io-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .medallion{max-width:300px}
}
@media(max-width:520px){
  section{padding:44px 0}
  .elements-grid{grid-template-columns:1fr}
  .nav-links{gap:2px}
  .nav-links a{padding:.35em .55em;font-size:.9rem}
}

/* ==========================================================================
   v4 — "stunning" pass: living mandala, scroll-reveal, playful motion
   ========================================================================== */

/* shared keyframes */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes bob       { 0%,100% { transform: translateY(-6%); } 50% { transform: translateY(6%); } }
@keyframes breathe   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes twinkle   { 0%,100% { opacity:.2; transform: scale(.65) rotate(0); } 50% { opacity:1; transform: scale(1.15) rotate(20deg); } }
@keyframes floaty    { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes pulse-ring{ 0% { transform: scale(.85); opacity:.55; } 100% { transform: scale(1.5); opacity:0; } }
@keyframes drawline  { from { width:0; } to { width:100%; } }

/* ---------- the element MANDALA (replaces the flat medallion) ---------- */
.mandala{ position:relative; width:min(440px,86vw); aspect-ratio:1; margin:0 auto; isolation:isolate; }
.mandala .halo{
  position:absolute; inset:-8%; border-radius:50%; z-index:-2;
  background:radial-gradient(circle at 50% 44%, rgba(242,167,59,.38), rgba(46,139,147,.14) 46%, transparent 70%);
  filter:blur(4px); animation:breathe 6s ease-in-out infinite;
}
.mandala .ring{ position:absolute; border-radius:50%; }
.mandala .ring1{ inset:9%;  border:2px dashed rgba(74,55,40,.30); animation:spin 46s linear infinite; }
.mandala .ring2{ inset:0;   border:2px dotted rgba(74,55,40,.18); animation:spin 80s linear infinite reverse; }
.mandala .orbit{ position:absolute; inset:9%; animation:spin 60s linear infinite; }
.mandala .planet{ position:absolute; width:30%; aspect-ratio:1; transform:translate(-50%,-50%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.mandala .planet:hover{ transform:translate(-50%,-50%) scale(1.16); z-index:3; }
.mandala .planet-spin{ width:100%; height:100%; animation:spin 60s linear infinite reverse; }
.mandala .bob{
  width:100%; height:100%; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), transparent 58%), var(--el);
  border:2.5px solid var(--ink);
  box-shadow:4px 5px 0 rgba(74,55,40,.25), inset 0 -7px 13px rgba(0,0,0,.14), inset 0 5px 10px rgba(255,255,255,.35);
  animation:bob 4.6s ease-in-out infinite; animation-delay:var(--d);
}
.mandala .pe{ font-size:clamp(1.5rem,4.6vw,2.1rem); line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mandala .pl{ display:block; font-family:var(--font-hand); color:#fff; font-size:clamp(.85rem,2.4vw,1.08rem); margin-top:1px; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.mandala .core{
  position:absolute; inset:31%; border-radius:50%; display:grid; place-content:center; text-align:center; z-index:2;
  background:radial-gradient(circle at 50% 38%, #fffdf6, #f4e6c9);
  border:3px solid var(--ink);
  box-shadow:0 12px 26px -8px rgba(74,55,40,.55), inset 0 2px 7px #fff;
  animation:breathe 6s ease-in-out infinite;
}
.mandala .core b{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,6vw,2.7rem); line-height:.85; color:var(--ink); }
.mandala .core span{ font-family:var(--font-hand); color:var(--terracotta); font-size:clamp(1.05rem,3.4vw,1.45rem); }
.mandala .sun{
  position:absolute; inset:-16%; z-index:-1; border-radius:50%; opacity:.45;
  background:repeating-conic-gradient(from 0deg, rgba(242,167,59,.5) 0 2deg, transparent 2deg 18deg);
  -webkit-mask:radial-gradient(circle, transparent 52%, #000 54%);
          mask:radial-gradient(circle, transparent 52%, #000 54%);
  animation:spin 34s linear infinite;
}
.mandala .spk{ position:absolute; font-style:normal; font-size:1.25rem; color:var(--marigold); animation:twinkle 3.2s ease-in-out infinite; }
.mandala .spk1{ top:1%;  left:24%; animation-delay:.2s; }
.mandala .spk2{ top:14%; right:5%; color:var(--water);  animation-delay:1.1s; }
.mandala .spk3{ bottom:7%; left:7%; color:var(--space);  animation-delay:.6s; }
.mandala .spk4{ bottom:19%; right:13%; color:var(--terracotta); animation-delay:1.7s; }

/* ---------- hero atmosphere ---------- */
.hero{ position:relative; overflow:hidden; }
.floaties{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.floaties .fl{ position:absolute; font-size:1.8rem; opacity:.7; animation:floaty 8s ease-in-out infinite; }
.floaties .fl1{ top:10%;  left:3%;  font-size:2.4rem; opacity:.6; animation-delay:.2s; }
.floaties .fl2{ top:70%;  left:40%; color:var(--marigold); animation-delay:1.3s; }
.floaties .fl3{ top:6%;   right:40%; font-size:2rem; opacity:.55; animation-delay:.7s; }
.floaties .fl4{ bottom:16%; left:24%; animation-delay:2s; opacity:.5; }
.floaties .fl5{ bottom:10%; right:4%; font-size:2.2rem; opacity:.5; animation-delay:1s; }

/* ---------- scroll reveal (JS adds .reveal-up, then .in) ---------- */
.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-up.in{ opacity:1; transform:none; }

/* ---------- element cards: emoji badges + lively hover ---------- */
.el-card{ position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.el-card .em{
  width:66px; height:66px; margin:2px auto 6px; border-radius:50%; display:grid; place-items:center; font-size:2rem;
  background:radial-gradient(circle at 32% 26%, #fff, color-mix(in srgb, var(--el) 24%, #fff));
  border:2px solid var(--ink); box-shadow:3px 3px 0 var(--el);
  animation:bob 5s ease-in-out infinite;
}
.el-card:nth-child(2) .em{ animation-delay:.4s; } .el-card:nth-child(3) .em{ animation-delay:.8s; }
.el-card:nth-child(4) .em{ animation-delay:1.2s; } .el-card:nth-child(5) .em{ animation-delay:1.6s; }
.el-card:hover{ transform:translateY(-7px) rotate(-1deg); box-shadow:8px 11px 0 var(--el); }

/* ---------- age ladder: a dotted journey trail + bobbing steps ---------- */
.ladder{ position:relative; }
.ladder::before{
  content:""; position:absolute; top:40px; left:6%; right:6%; height:3px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--terracotta) 0 9px, transparent 9px 20px); opacity:.4;
}
.rung{ position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease; }
.rung:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.rung .n{ animation:bob 4s ease-in-out infinite; }
.rung:nth-child(2) .n{ animation-delay:.3s; } .rung:nth-child(3) .n{ animation-delay:.6s; }
.rung:nth-child(4) .n{ animation-delay:.9s; } .rung:nth-child(5) .n{ animation-delay:1.2s; }

/* ---------- class cards: shine sweep on hover ---------- */
.class-card{ position:relative; }
.class-card .top::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-60%); 
}
.class-card:hover .top::after{ opacity:1; animation:sweep .7s ease; }
@keyframes sweep{ to { transform:translateX(60%); } }

/* ---------- audio rows: nudge + pulsing play ring ---------- */
.audio-row{ transition:transform .16s ease, box-shadow .16s ease; }
.audio-row:hover{ transform:translateX(5px); box-shadow:5px 5px 0 var(--ink); }
.audio-row .play{ position:relative; transition:transform .15s ease; }
.audio-row .play::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--el,var(--marigold));
  opacity:0; 
}
.audio-row:hover .play{ transform:scale(1.06); }
.audio-row:hover .play::after{ opacity:1; animation:pulse-ring 1.8s ease-out infinite; }

/* ---------- headings: hand-drawn underline draw-in for eyebrows ---------- */
.eyebrow.hand{ position:relative; display:inline-block; }

/* ---------- hero CTA: gentle attention wiggle ---------- */
.hero-cta .btn.primary{ position:relative; }
.hero-cta .btn.primary::after{
  content:"✦"; position:absolute; top:-8px; right:-6px; font-size:.9rem; color:var(--marigold);
  animation:twinkle 2.4s ease-in-out infinite;
}

/* ---------- the join CTA: soft glow ---------- */
#classes + section + section .card, .join-cta{ position:relative; }

/* ---------- responsive + reduced motion ---------- */
@media (max-width:860px){
  .ladder::before{ display:none; }
  .floaties .fl2, .floaties .fl4{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   Mobile hamburger navigation (CSS-only toggle; works without JS)
   ========================================================================== */
.hamburger{ display:none; }
@media (max-width:860px){
  .site-header .nav{ position:relative; flex-wrap:nowrap; }
  .hamburger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:48px; height:48px; padding:0 12px; cursor:pointer; flex:0 0 auto;
    background:var(--card); border:2px solid var(--ink); border-radius:12px; box-shadow:2px 2px 0 var(--ink);
    transition:box-shadow .12s ease, transform .12s ease;
  }
  .hamburger:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
  .hamburger span{ display:block; height:3px; border-radius:3px; background:var(--ink);
    transition:transform .25s ease, opacity .2s ease; }
  .nav-links{
    position:absolute; top:calc(100% + 12px); right:0; left:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); border:2px solid var(--ink); border-radius:16px; padding:12px;
    box-shadow:var(--shadow-lift); display:none;
  }
  .nav-links a{ padding:.75em .9em !important; border-radius:10px; font-size:1.05rem !important; }
  .nav-links a:hover{ background:var(--paper-2); }
  .nav-links .btn{ margin-top:4px; justify-content:center; }
  .nav-toggle:checked ~ .nav-links{ display:flex; animation:navdrop .22s ease; }
  .nav-toggle:checked ~ .hamburger{ box-shadow:0 0 0 var(--ink); }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
@keyframes navdrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* Keep the header (and its mobile dropdown) above the page content */
.site-header{ position:relative; z-index:50; }