/* =========================================================
   CHESS BEE — Advanced Animation Layer
   Loaded AFTER styles.css. All effects are transform/opacity
   based for 60fps, auto-disabled under reduced-motion.
   ========================================================= */

/* ---------- 1. shimmer headline text ---------- */
.hero h1 .hl span{
  background:linear-gradient(90deg,#F49300 0%,#B45309 22%,#FFD166 38%,#EF8C00 60%,#9A3412 82%,#F49300 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:cb-shimmer 5.5s linear infinite;
}
@keyframes cb-shimmer{to{background-position:220% center;}}

/* ---------- 2. button sheen sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::after{
  content:"";position:absolute;top:-45%;left:-40%;width:34%;height:190%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:rotate(22deg) translateX(-320%);
  animation:cb-sheen 4.2s ease-in-out infinite;
  pointer-events:none;z-index:1;
}
@keyframes cb-sheen{0%,55%{transform:rotate(22deg) translateX(-320%);}90%,100%{transform:rotate(22deg) translateX(560%);}}
.btn:active::after{animation:none;}
.btn[disabled]{animation:cb-softpulse 1.4s ease-in-out infinite;}
@keyframes cb-softpulse{0%,100%{opacity:1;}50%{opacity:.55;}}

/* ---------- 3. nav link animated underline ---------- */
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:3px;height:3px;width:0;
  background:linear-gradient(90deg,var(--honey-400),var(--honey-700));
  border-radius:3px;transform:translateX(-50%);transition:width .28s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover::after,.nav-links a.active::after{width:46%;}

/* ---------- 4. navigation highlight pop ---------- */
.nav-links a.active{animation:cb-navpop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes cb-navpop{0%{transform:scale(.94);}55%{transform:scale(1.06);}100%{transform:scale(1);}}

/* ---------- 5. hexagon spinning orbit rings ---------- */
.hex-stage::before,.hex-stage::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
}
.hex-stage::before{width:138%;height:138%;border:3px dashed rgba(255,159,28,.5);animation:cb-spin 26s linear infinite;}
.hex-stage::after{width:112%;height:112%;border:2px dotted rgba(251,154,0,.4);animation:cb-spin 17s linear infinite reverse;}
@keyframes cb-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* ---------- 6. ambient floating bubbles ---------- */
.ambient-zone{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bubble{
  position:absolute;bottom:-70px;
  display:grid;place-items:center;line-height:1;
  animation-name:cb-float;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform,opacity;filter:drop-shadow(0 6px 8px rgba(58,42,6,.18));
}
@keyframes cb-float{
  0%{transform:translateY(0) translateX(0) rotate(-10deg);opacity:0;}
  10%{opacity:var(--o,.35);}
  85%{opacity:var(--o,.3);}
  100%{transform:translateY(-118vh) translateX(var(--sway,20px)) rotate(12deg);opacity:0;}
}

/* ---------- 7. honey-drip hero highlight pulse ---------- */
.hero h1 .hl::after{animation:cb-drippulse 3.2s ease-in-out infinite;}
@keyframes cb-drippulse{0%,100%{filter:none;}50%{filter:drop-shadow(0 6px 10px rgba(239,140,0,.55));}}

/* ---------- 8. interactive board — glowing legal squares ---------- */
.board .sq.hl{
  animation:cb-glow 1.6s ease-in-out infinite;
  box-shadow:inset 0 0 0 3px rgba(255,183,3,.95), 0 0 14px rgba(255,183,3,.55);
}
@keyframes cb-glow{0%,100%{box-shadow:inset 0 0 0 3px rgba(255,183,3,.95),0 0 8px rgba(255,183,3,.4);}50%{box-shadow:inset 0 0 0 3px rgba(255,183,3,1),0 0 20px rgba(255,183,3,.85);}}

/* ---------- 9. 3D tilt base + glare ---------- */
.tilt{position:relative;transition:transform .22s cubic-bezier(.2,.7,.3,1);will-change:transform;transform-style:preserve-3d;}
.tilt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .28s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,215,130,.6),rgba(255,215,130,.12) 42%,transparent 62%);
  z-index:1;
}
.tilt:hover::before,.tilt.on-tilt::before{opacity:1;}

/* ---------- 10. magnetic buttons (JS sets transform) ---------- */
.magnetic{transition:transform .22s cubic-bezier(.2,.7,.3,1);will-change:transform;}

/* ---------- 11. card icon wiggle on hover ---------- */
.card:hover .icon{animation:cb-wiggle .55s cubic-bezier(.34,1.56,.64,1);}
.hexbadge{animation:cb-breathe 4.5s ease-in-out infinite;}
@keyframes cb-wiggle{0%,100%{transform:rotate(0) scale(1);}30%{transform:rotate(-12deg) scale(1.14);}60%{transform:rotate(10deg) scale(1.06);}80%{transform:rotate(-4deg);}}
@keyframes cb-breathe{0%,100%{box-shadow:0 0 0 0 rgba(251,154,0,.28);}50%{box-shadow:0 0 0 10px rgba(251,154,0,0);}}
.hexbadge .em{display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.hexbadge:hover .em{transform:translateY(-4px) scale(1.35) rotate(-8deg);}

/* ---------- 12. marquee pause on hover ---------- */
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ---------- 13. error shake ---------- */
.field.err{animation:cb-shake .45s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes cb-shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}

/* ---------- 14. accordion smooth open ---------- */
@supports (interpolate-size: allow-keywords){
  details{interpolate-size:allow-keywords;}
}
.acc[open] .acc-body{animation:cb-dropin .32s ease;}
@keyframes cb-dropin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---------- 15. staggering reveals (JS adds per-child delay) ---------- */
.reveal-in{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}

/* ---------- 16. typing rotator ---------- */
.rotator-line{
  font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:900;color:var(--ink-soft);
  min-height:1.7em;margin:0 0 1.4rem;display:flex;align-items:center;gap:.35ch;flex-wrap:wrap;
}
.rotator{display:inline-flex;align-items:center;position:relative;color:var(--honey-700);min-width:1ch;}
.rotator::after{
  content:"";margin-left:3px;width:3px;height:1.15em;border-radius:3px;
  background:var(--honey-700);animation:cb-caret 1s steps(1) infinite;
}
@keyframes cb-caret{0%,100%{opacity:1;}50%{opacity:0;}}

/* ---------- 17. scroll progress bar ---------- */
#honeyProgress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--honey-400),var(--honey),var(--honey-700));
  box-shadow:0 0 12px rgba(251,154,0,.6);border-radius:0 4px 4px 0;pointer-events:none;
}

/* ---------- 18. back-to-top bee ---------- */
#beeTop{
  position:fixed;right:20px;bottom:20px;z-index:1100;width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;padding:0;background:linear-gradient(135deg,var(--honey-300),var(--honey-600));
  box-shadow:0 10px 24px rgba(251,154,0,.45),inset 0 0 0 3px #fff;
  display:grid;place-items:center;font-size:1.6rem;opacity:0;transform:translateY(24px) scale(.6);
  transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
#beeTop.show{opacity:1;transform:none;pointer-events:auto;}
#beeTop:hover{animation:cb-buzz .45s ease-in-out infinite;}
#beeTop img{width:34px;height:34px;}
@keyframes cb-buzz{0%,100%{transform:rotate(0) translateY(0);}25%{transform:rotate(-8deg) translateY(-2px);}75%{transform:rotate(8deg) translateY(-1px);}}

/* ---------- 19. parallax depth helper ---------- */
.cb-parallax{will-change:transform;}

/* ---------- 20. flying bee blur-shadow for more depth ---------- */
.flyer{filter:drop-shadow(0 10px 16px rgba(58,42,6,.22));}

/* ---------- 21. piece card entrance pop ---------- */
.piece-card{animation:cardFloat 5.5s ease-in-out infinite, cb-piecein .7s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes cb-piecein{from{opacity:0;transform:translateY(18px) scale(.6);}}

/* ---------- 22. CTA band gentle pulse ring ---------- */
.cta-band{animation:cb-breathe 5s ease-in-out infinite;}

/* reduced motion: kill decorative animation */
@media (prefers-reduced-motion:reduce){
  .hero h1 .hl span,.btn::after,.hexbadge,.cta-band,.hero h1 .hl::after,.board .sq.hl{animation:none;}
  .bubble{display:none;}
  #honeyProgress,#beeTop{transition:none;}
}

/* ---------- 23. chess piece SVG sizing ---------- */
.glyph,.mq-ico,.pb-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;overflow:hidden;}
.glyph{width:27px;height:27px;font-size:0;}
.mq-ico{width:20px;height:20px;vertical-align:-3px;margin-right:5px;}
.pb-ico{width:23px;height:23px;flex:0 0 23px;}
.glyph svg,.mq-ico svg,.pb-ico svg{width:100%;height:100%;margin:auto;}

/* ---------- 24. grown-up bees teaser ---------- */
.adults-teaser{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;background:linear-gradient(150deg,#FFF3D0,#FFE1A1);border:1.5px dashed var(--honey-300);border-radius:28px;padding:40px;}
.adults-teaser h2{margin:.1em 0 .25em;}
.adults-teaser p{color:var(--ink-soft);font-weight:600;max-width:46ch;}
.at-badges{display:grid;gap:12px;}
.at-chip{background:#fff;border:1.5px solid var(--line-strong);border-radius:999px;padding:.8em 1.3em;font-family:var(--font-head);font-weight:600;font-size:1rem;text-align:center;box-shadow:var(--shadow-sm);}
.at-chip:nth-child(odd){transform:rotate(-1.2deg);}
.at-chip:nth-child(even){transform:rotate(1.2deg);}
@media (max-width:820px){.adults-teaser{grid-template-columns:1fr;padding:28px;}}

/* ---------- 25. play chess (lichess-style, honey theme) ---------- */
.mode-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px;}
.mode-btn{border:2px solid var(--line-strong);background:#fff;border-radius:999px;padding:.55em 1.25em;font-family:var(--font-head);font-weight:600;font-size:.93rem;cursor:pointer;transition:.18s;box-shadow:var(--shadow-sm);}
.mode-btn:hover{border-color:var(--honey);background:var(--honey-50);transform:translateY(-2px);}
.mode-btn.on{background:linear-gradient(135deg,var(--honey),var(--amber));border-color:var(--honey-700);color:#2A1F00;}

.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:calc(1.2% + 18px);align-items:start;justify-content:center;}
.game-board-col{max-width:560px;margin:0 auto;width:100%;}
.board-shell{position:relative;}
.board{width:min(74vh,520px);max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);box-shadow:0 22px 50px rgba(58,42,6,.28);border:6px solid #6B4A1F;background:#F6E3B4;}
.board .sq{position:relative;display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
.board .sq.light{background:#F6E3B4;}
.board .sq.dark{background:#C08A45;}
.board .sq svg{width:80%;height:80%;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(58,42,6,.3));}
.board .sq .coord{position:absolute;font-family:var(--font-head);font-weight:700;font-size:.62em;line-height:1;pointer-events:none;letter-spacing:0;}
.board .sq .coord.cr{top:3px;left:5px;}
.board .sq .coord.cf{bottom:2px;right:5px;}
.board .sq.light .coord{color:#A9742F;}
.board .sq.dark .coord{color:#F6E3B4;}
.board .sq:hover{filter:brightness(1.06);}
.board .sq.last{background:#FFD166;box-shadow:inset 0 0 0 3px rgba(214,146,22,.5);}
.board .sq.sel{box-shadow:inset 0 0 0 4px var(--honey);z-index:2;}
.board .sq.check{box-shadow:inset 0 0 0 5px #E5484D;animation:cb-flash 1.1s ease-in-out infinite alternate;}
@keyframes cb-flash{from{box-shadow:inset 0 0 0 5px #E5484D;}to{box-shadow:inset 0 0 0 9px rgba(229,72,77,.55);}}
.board .sq.target::after{content:"";position:absolute;width:27%;height:27%;left:36.5%;top:36.5%;border-radius:50%;background:rgba(63,191,107,.85);box-shadow:0 0 0 4px rgba(63,191,107,.3);}
.board .sq.cap::after{content:"";position:absolute;inset:7%;border-radius:9px;border:3px solid rgba(229,72,77,.9);}

.ply-overlay{position:absolute;inset:0;border-radius:12px;background:rgba(255,249,236,.68);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:6;}
.ply-overlay.show{display:flex;animation:cb-ov-in .25s ease;}
@keyframes cb-ov-in{from{opacity:0;}to{opacity:1;}}
.ply-card{background:#fff;border:2px solid var(--honey-300);border-radius:22px;padding:26px 34px;text-align:center;box-shadow:0 24px 50px rgba(58,42,6,.25);}
.ply-title{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--ink);}
.ply-sub{color:var(--ink-soft);font-weight:700;margin:6px 0 16px;}

.player-bar{display:flex;align-items:center;gap:10px;padding:.55em .9em;border-radius:14px;font-family:var(--font-head);font-weight:600;font-size:.92rem;margin:10px 0;min-height:46px;}
.player-bar.black{background:linear-gradient(135deg,#2A2417,#1B1710);color:#FFF3C4;border:1.5px solid rgba(255,243,196,.25);}
.player-bar.white{background:linear-gradient(135deg,#FFF9EC,#FFEFC0);color:#231F14;border:1.5px solid var(--line-strong);}
.player-bar.active{box-shadow:0 0 0 3px var(--honey);}
.player-bar .pb-name{white-space:nowrap;}
.player-bar .pb-ics{display:inline-flex;gap:2px;flex:1;min-width:0;overflow:hidden;}
.player-bar .adv{background:var(--honey);color:#2A1F00;border-radius:999px;padding:.05em .55em;font-weight:800;font-size:.85em;}
.cap-ico{display:inline-block;width:22px;height:22px;flex:0 0 22px;}
.cap-ico svg{width:100%;height:100%;}

.board-ctr-wrap{display:flex;justify-content:center;margin-top:10px;}

.game-side-col{display:grid;gap:14px;min-width:0;}
.status-chip{font-family:var(--font-head);font-weight:600;font-size:1rem;background:var(--honey-100);border:1.5px solid var(--honey-300);color:var(--honey-700);padding:.5em 1em;border-radius:12px;text-align:center;}
.status-chip.check{background:#FFF0E8;border-color:#E5484D;color:#C02B30;animation:cb-flash2 1s ease-in-out infinite alternate;}
@keyframes cb-flash2{from{box-shadow:none;}to{box-shadow:0 0 0 4px rgba(229,72,77,.25);}}
.status-chip.over{background:var(--leaf);border-color:var(--leaf);color:#fff;}
.movetable-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.movetable-head{display:grid;grid-template-columns:40px 1fr 1fr;gap:4px;padding:.5em .8em .3em;border-bottom:1.5px solid var(--line);background:var(--honey-50);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);}
.movetable{max-height:320px;overflow-y:auto;}
.mt-row{display:grid;grid-template-columns:40px 1fr 1fr;gap:4px;padding:.28em .8em;font-family:var(--font-head);font-weight:600;font-size:.92rem;border-bottom:1px solid rgba(35,31,20,.05);}
.mt-row:nth-child(even){background:#FFFDF3;}
.mt-row .r{color:var(--ink-mute);}
.mt-row .w{color:var(--ink);}
.mt-row:last-child .w,.mt-row:last-child .b{color:var(--honey-700);}
.captured-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;}
.captured-line .cap-em{color:var(--ink-mute);font-weight:700;font-size:.82rem;}
.captured-line .adv.big{background:var(--honey-100);border:1.5px solid var(--honey-300);color:var(--honey-700);border-radius:999px;padding:.05em .6em;font-weight:800;font-size:.85rem;}
.game-ctl{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:960px){.play-layout{grid-template-columns:1fr;}.board{width:min(86vw,74vh);}}
@media (max-width:820px){.board{width:min(92vw,540px);}}

/* ---------- 26. board variants ---------- */
.board-learn{width:min(62vh,470px);}
.board-xs{width:min(40vh,320px);}

/* ---------- 27. home hero background pieces ---------- */
.hero .bg-pieces{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.bg-piece{position:absolute;opacity:.08;filter:drop-shadow(0 6px 10px rgba(58,42,6,.28));line-height:0;animation:bgdrift 9s ease-in-out infinite alternate;}
.bg-piece svg{width:100%;height:100%;}
.bg-piece.p-a{width:150px;height:150px;top:6%;left:-28px;transform:rotate(-14deg);}
.bg-piece.p-b{width:112px;height:112px;top:16%;right:-14px;transform:rotate(10deg);animation-delay:1.6s;}
.bg-piece.p-c{width:96px;height:96px;top:50%;left:2%;transform:rotate(8deg);animation-delay:3.2s;}
.bg-piece.p-d{width:132px;height:132px;bottom:4%;right:4%;transform:rotate(-10deg);animation-delay:2.4s;}
.bg-piece.p-e{width:80px;height:80px;bottom:14%;left:44%;transform:rotate(16deg);animation-delay:4.1s;}
@keyframes bgdrift{from{translate:0 0;}to{translate:0 -10px;}}
@media (max-width:820px){
  .bg-piece.p-a{width:104px;height:104px;}.bg-piece.p-b{width:78px;height:78px;top:8%;}
  .bg-piece.p-c{width:70px;height:70px;}.bg-piece.p-d{width:92px;height:92px;}.bg-piece.p-e{width:60px;height:60px;left:38%;}
}

/* ---------- 28. register kids / adult toggle ---------- */
.reg-toggle{display:flex;gap:10px;margin:4px 0 8px;}
.reg-tab{flex:1;border:2px solid var(--line-strong);background:#fff;border-radius:14px;padding:.8em 1em;font-family:var(--font-head);font-weight:600;font-size:.95rem;text-align:left;cursor:pointer;transition:.18s;line-height:1.35;}
.reg-tab small{display:block;color:var(--ink-mute);font-weight:600;font-size:.78rem;margin-top:2px;}
.reg-tab:hover{border-color:var(--honey);transform:translateY(-2px);}
.reg-tab.on{background:linear-gradient(135deg,var(--honey),var(--amber));border-color:var(--honey-700);color:#2A1F00;box-shadow:var(--shadow-sm);}
.reg-tab.on small{color:rgba(42,31,0,.8);}
.reg-panel{display:none;}
.reg-panel.on{display:block;animation:cb-panel .35s ease;}
@keyframes cb-panel{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (max-width:560px){.reg-toggle{flex-direction:column;}}