/* LabCauldron — brand mark + a little potion-shop magic. Colours come from the existing tokens (purple / pink).
   Everything here is decoration: it never carries meaning and switches off for people who prefer reduced motion. */

/* ---- logo ---- */
.lc-mark{width:1.18em; height:1.18em; display:inline-block; vertical-align:-.2em; margin-right:.3em; overflow:visible; flex:none}
.lc-word{font-weight:inherit}
.logo h1,.mark{display:inline-flex; align-items:center}
.logo h1 .lc-mark{width:1.25em; height:1.25em; vertical-align:0}
.lc-b{transform-box:fill-box; transform-origin:center; animation:lcRise 3.4s ease-in infinite}
.lc-b2{animation-delay:1.1s} .lc-b3{animation-delay:2.2s}
.lc-sp{transform-box:fill-box; transform-origin:center; animation:lcTwinkle 2.6s ease-in-out infinite}
.lc-sp2{animation-delay:1.2s}
@keyframes lcRise{0%{transform:translateY(6px) scale(.4); opacity:0} 25%{opacity:1} 100%{transform:translateY(-8px) scale(1.1); opacity:0}}
@keyframes lcTwinkle{0%,100%{transform:scale(.65) rotate(0); opacity:.5} 50%{transform:scale(1.15) rotate(18deg); opacity:1}}
.home:hover .lc-mark,.mark:hover .lc-mark{animation:lcWiggle .6s ease}
@keyframes lcWiggle{0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 60%{transform:rotate(6deg)}}

/* ---- landing: floating sparkles in the hero ---- */
.hero{position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:1}
.lc-stars{position:absolute; inset:0; pointer-events:none; z-index:0}
.lc-star{position:absolute; width:var(--s); height:var(--s); opacity:0; animation:lcStar var(--du) ease-in-out var(--d) infinite;
  background:var(--eosin); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.lc-star.purple{background:var(--hema)}
@keyframes lcStar{0%,100%{opacity:0; transform:scale(.4) rotate(0)} 50%{opacity:.75; transform:scale(1) rotate(25deg)}}

/* ---- landing: a strip of brew under the hero ---- */
.lc-brew{position:relative; height:46px; margin-top:-1px; background:var(--bg); overflow:hidden}
.lc-brew svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.lc-brew .w1{fill:var(--eosin-soft)} .lc-brew .w2{fill:var(--hema-soft); opacity:.9}
.lc-brew .w1{animation:lcSway 7s ease-in-out infinite alternate} .lc-brew .w2{animation:lcSway 9s ease-in-out -3s infinite alternate}
@keyframes lcSway{from{transform:translateX(-1.5%)} to{transform:translateX(1.5%)}}
.lc-brew i{position:absolute; bottom:-8px; width:8px; height:8px; border-radius:50%; background:var(--eosin); opacity:0; animation:lcBubble 4.2s ease-in var(--d) infinite}
@keyframes lcBubble{0%{transform:translateY(0) scale(.5); opacity:0} 20%{opacity:.5} 100%{transform:translateY(-44px) scale(1.15); opacity:0}}

/* ---- landing: bubbles rising inside the call-to-action band ---- */
.cta .box{position:relative; overflow:hidden}
.cta .box > :not(.lc-bubs){position:relative; z-index:1}
.lc-bubs{position:absolute; inset:0; pointer-events:none; z-index:0}
.lc-bub{position:absolute; bottom:-24px; width:var(--s); height:var(--s); border-radius:50%; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.1); animation:lcFloat var(--du) ease-in var(--d) infinite}
@keyframes lcFloat{0%{transform:translateY(0) scale(.6); opacity:0} 15%{opacity:.9} 100%{transform:translateY(-190px) scale(1.1); opacity:0}}

/* ---- landing: sections drift in as you scroll ---- */
.js-reveal section.s{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js-reveal section.s.in{opacity:1; transform:none}
.s-head .eyebrow::before{content:"✦"; margin-right:.5em; display:inline-block; animation:lcTwinkle 3.2s ease-in-out infinite}

/* ---- app: loader, empty states, toasts, buttons, progress bar ---- */
.loading{display:flex; align-items:center; gap:10px; min-height:84px}
.loading::before{content:""; width:46px; height:46px; flex:none; background:url("/app/mark-anim.svg") center/contain no-repeat}
.empty{padding-top:64px; background-image:url("/app/mark-anim.svg"); background-repeat:no-repeat; background-position:20px 14px; background-size:40px}
.toast::before{content:"✦"; color:#F3B6CE; margin-right:8px; display:inline-block; animation:lcTwinkle 1.4s ease-in-out infinite}
.btn.primary{position:relative; overflow:hidden}
.btn.primary::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%); transform:translateX(-130%)}
.btn.primary:hover::after{transform:translateX(130%); transition:transform .75s ease}
#lt-progress{overflow:visible}
#lt-progress::after{content:"✦"; position:absolute; right:-7px; top:-8px; font-size:15px; line-height:1; color:var(--eosin); text-shadow:0 0 8px rgba(194,56,110,.7)}
.pf-btn .sp{display:inline-block; animation:lcTwinkle 2.4s ease-in-out infinite}
.pf-btn:disabled .sp{animation-duration:.9s}

@media (prefers-reduced-motion:reduce){
  .lc-b,.lc-sp,.lc-star,.lc-brew .w1,.lc-brew .w2,.lc-brew i,.lc-bub,.s-head .eyebrow::before,.toast::before,.pf-btn .sp{animation:none!important}
  .lc-star,.lc-bub,.lc-brew i{display:none}
  .js-reveal section.s{opacity:1; transform:none; transition:none}
  .btn.primary:hover::after{transition:none}
}

.mark .lc-mark{width:1.35em; height:1.35em; vertical-align:0}
.hero aside.nb{position:relative; margin-top:96px}
.lc-hero-pot{position:absolute; right:26px; bottom:calc(100% - 10px); width:132px; height:132px; pointer-events:none; filter:drop-shadow(0 10px 14px rgba(67,52,163,.2))}
@media (max-width:900px){ .hero aside.nb{margin-top:84px} .lc-hero-pot{width:112px; height:112px; right:16px} }
.lc-bub{border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.16)}
@media (max-width:900px){ .lc-star{display:none} }

/* =====================================================================
   Inside the app (teachers and students): small touches on every page
   ===================================================================== */

/* floating candles drifting above the header (desktop only) */
.brand .wrap{position:relative}
.lc-candles{position:absolute; left:46%; top:2px; width:170px; height:66px; pointer-events:none}
.lc-candles i{position:absolute; width:10px; border-radius:3px 3px 2px 2px; border:1px solid #DCD3F0; border-top-color:#EFEBFB; background:linear-gradient(#FFFFFF,#EFEBFB); box-shadow:0 3px 8px rgba(67,52,163,.14); animation:lcBob 5s ease-in-out infinite}
.lc-candles i::before{content:""; position:absolute; left:50%; top:-14px; width:8px; height:14px; transform:translateX(-50%); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFFFF 0,#F8C3D8 40%,#C2386E 68%,rgba(194,56,110,0) 74%); filter:drop-shadow(0 0 5px rgba(194,56,110,.55)); transform-origin:50% 100%; animation:lcFlame 1.3s ease-in-out infinite alternate}
.lc-candles i::after{content:""; position:absolute; left:50%; bottom:-5px; width:190%; height:5px; transform:translateX(-50%); border-radius:2px 2px 10px 10px; background:linear-gradient(#8B79D8,#4334A3); box-shadow:0 2px 5px rgba(67,52,163,.3)}
.lc-candles i:nth-child(1){left:0; top:36px; height:24px; animation-delay:0s}
.lc-candles i:nth-child(2){left:58px; top:24px; height:30px; animation-delay:-1.7s}
.lc-candles i:nth-child(3){left:118px; top:40px; height:22px; animation-delay:-3.1s}
.lc-candles i:nth-child(2)::before{animation-delay:-.5s} .lc-candles i:nth-child(3)::before{animation-delay:-.9s}
@keyframes lcBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
@keyframes lcFlame{from{transform:translateX(-50%) scale(1,1) rotate(-3deg)} to{transform:translateX(-50%) scale(.88,1.12) rotate(3deg)}}
@media (max-width:1060px){
  /* phones and tablets: three small candles float just under the header on the right, like in the Great Hall */
  .lc-candles{left:auto; right:18px; top:calc(100% - 2px); width:84px; height:46px; z-index:2}
  .lc-candles i{width:13px; border-radius:3px 3px 1px 1px; border-color:#D7CDF0; border-top:3px solid #F6F2FF; background:linear-gradient(90deg,#EDE7FB,#FFFFFF 45%,#DDD3F5); box-shadow:0 2px 6px rgba(67,52,163,.25)}
  .lc-candles i::before{top:-17px; width:9px; height:15px; background:radial-gradient(ellipse at 50% 74%,#FFF8E1 0,#FFD9A8 32%,#F08AB0 58%,#C2386E 76%,rgba(194,56,110,0) 80%); filter:drop-shadow(0 0 7px rgba(240,138,176,.85))}
  .lc-candles i:nth-child(1){left:2px; top:26px; height:13px}
  .lc-candles i:nth-child(2){left:34px; top:19px; height:19px}
  .lc-candles i:nth-child(3){left:66px; top:28px; height:11px}
  body main{padding-top:44px}
}
/* the active tab carries a little spark on its underline */
.tabs a[aria-current="page"]{position:relative}
.tabs a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:-6px; width:10px; height:10px; margin-left:-5px; background:var(--eosin);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); animation:lcTwinkle 2.4s ease-in-out infinite}

/* page titles get a pen-stroke underline; section titles get a spark */
.view > h2:first-child::after,.view > .sec-head:first-child > h2::after,.view > .sec:first-child > .sec-head:first-child > h2::after,.view > .stack:first-child > h2::after{content:""; display:block; height:3px; width:0; margin-top:7px; border-radius:3px; background:linear-gradient(90deg,var(--hema),var(--eosin)); animation:lcInk .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lcInk{to{width:72px}}
.view .sec > .sec-head > h3::before,.view .sec-head:not(:first-child) > h2::before,.view > h2:not(:first-child)::before{content:"✦"; font-size:.6em; color:var(--eosin); margin-right:.55em; vertical-align:.18em; display:inline-block; animation:lcTwinkle 3.4s ease-in-out infinite}
main .eyebrow::before{content:"✦"; margin-right:.45em; font-size:.85em; display:inline-block}

/* sections settle in one after another (opacity only, so nothing shifts while you click) */
.view > *{animation:lcFadeIn .55s ease both}
.view > *:nth-child(2){animation-delay:.05s} .view > *:nth-child(3){animation-delay:.1s} .view > *:nth-child(4){animation-delay:.15s}
.view > *:nth-child(5){animation-delay:.2s} .view > *:nth-child(6){animation-delay:.25s} .view > *:nth-child(n+7){animation-delay:.3s}
@keyframes lcFadeIn{from{opacity:0} to{opacity:1}}

/* cards glow softly when you point at them */
.panel,.stage,.idea-card,.idea,.cal-card{transition:box-shadow .25s ease, border-color .25s ease}
.panel:hover,.stage:hover,.idea-card:hover,.idea:hover,.cal-card:hover{border-color:#E3C3D3; box-shadow:0 0 0 3px rgba(194,56,110,.07), var(--shadow-2)}
@media (max-width:1060px),(hover:none){
  .panel,.stage,.idea-card,.idea,.cal-card{background-image:linear-gradient(105deg,transparent 38%,rgba(194,56,110,.10) 50%,rgba(67,52,163,.07) 56%,transparent 66%); background-size:260% 100%; background-repeat:no-repeat; background-position:130% 0; animation:lcSheen 7s ease-in-out infinite}
  .view > *:nth-child(2n) .panel,.view > *:nth-child(2n) .stage{animation-delay:1.4s}
  .view > *:nth-child(3n) .panel,.view > *:nth-child(3n) .stage{animation-delay:2.9s}
  .stage:nth-child(2n){animation-delay:.9s} .stage:nth-child(3n){animation-delay:2.2s}
  .panel:active,.stage:active,.idea-card:active,.idea:active,.cal-card:active{border-color:#E3C3D3; box-shadow:0 0 0 4px rgba(194,56,110,.14), var(--shadow-2)}
}
@keyframes lcSheen{0%,55%{background-position:130% 0} 100%{background-position:-30% 0}}
.stage.now .dots i{animation:lcDot 1.8s ease-in-out infinite}
.stage.now .dots i:nth-child(2n){animation-delay:.3s} .stage.now .dots i:nth-child(3n){animation-delay:.6s}
@keyframes lcDot{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}

/* the newest notebook entry pulses like a fresh bubble */
.tl li:first-child .dot{animation:lcPulse 2.6s ease-in-out infinite}
@keyframes lcPulse{0%,100%{box-shadow:0 0 0 0 rgba(194,56,110,.35)} 60%{box-shadow:0 0 0 7px rgba(194,56,110,0)}}

/* a save notice lets a few bubbles float up */
.toast{overflow:visible}
.toast::after{content:""; position:absolute; left:14px; right:14px; bottom:100%; height:46px; pointer-events:none;
  background:radial-gradient(circle 3.5px at 14% 80%,rgba(194,56,110,.8) 96%,transparent),radial-gradient(circle 2.5px at 38% 55%,rgba(67,52,163,.7) 96%,transparent),radial-gradient(circle 3px at 63% 75%,rgba(194,56,110,.7) 96%,transparent),radial-gradient(circle 2px at 86% 50%,rgba(67,52,163,.6) 96%,transparent);
  animation:lcToastUp 1.7s ease-out both}
@keyframes lcToastUp{0%{opacity:0; transform:translateY(14px)} 25%{opacity:1} 100%{opacity:0; transform:translateY(-14px)}}

/* footer: a tiny cauldron that keeps bubbling */
.lc-brewed{display:flex; align-items:center; gap:8px; margin:0 0 14px; font-family:var(--f-display); font-style:italic; color:var(--muted); font-size:.92rem}
.lc-brewed img{width:26px; height:26px}

@media (prefers-reduced-motion:reduce){
  .panel,.stage,.idea-card,.idea,.cal-card{animation:none!important; background-image:none!important}
  .lc-candles i,.lc-candles i::before,.tabs a[aria-current="page"]::after,.view .sec-head > h2::before,.view .sec > .sec-head > h3::before,.view > h2::before,.stage.now .dots i,.tl li:first-child .dot,.toast::after{animation:none!important}
  .view > h2:first-child::after,.view > .sec-head:first-child > h2::after,.view > .sec:first-child > .sec-head:first-child > h2::after,.view > .stack:first-child > h2::after{animation:none; width:72px}
  .view > *{animation:none}
  .toast::after{display:none}
}

/* ---- "Install app" floating button + sheet (phones and tablets only; install.js decides whether to show it) ---- */
.lc-install{position:fixed; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 96px); z-index:55; display:flex; align-items:center; transform:translateX(105%); transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lc-install.on{transform:none}
.lc-install-go{display:flex; align-items:center; gap:7px; padding:9px 12px 9px 11px; border:1px solid var(--line); border-right:0; border-radius:999px 0 0 999px; background:var(--surface); color:var(--hema); font:700 .84rem/1 var(--f-body); box-shadow:var(--shadow-2); cursor:pointer; min-height:44px}
.lc-install-go img{width:26px; height:26px; flex:none}
.lc-install-go:active{background:var(--hema-soft)}
.lc-install-x{position:absolute; top:-9px; left:-9px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); font:700 14px/1 var(--f-body); padding:0; cursor:pointer; box-shadow:var(--shadow-1)}
.lc-install.on .lc-install-go{animation:lcNudge 5s ease-in-out 3s infinite}
@keyframes lcNudge{0%,88%,100%{transform:translateX(0)} 92%{transform:translateX(-6px)} 96%{transform:translateX(0)}}
.lc-sheet{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .25s ease}
.lc-sheet.on{opacity:1}
.lc-sheet-bg{position:absolute; inset:0; background:rgba(39,33,63,.42); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.lc-sheet-card{position:relative; width:min(480px,100%); background:var(--surface); border-radius:22px 22px 0 0; padding:22px 22px calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:0 -12px 40px rgba(39,33,63,.25); transform:translateY(24px); transition:transform .3s cubic-bezier(.2,.8,.2,1); outline:0; text-align:left}
.lc-sheet.on .lc-sheet-card{transform:none}
.lc-sheet-mark{display:block; margin:-48px auto 6px; width:64px; height:64px; padding:6px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-1)}
.lc-sheet-card h2{margin:0 0 6px; text-align:center; font-size:1.35rem}
.lc-sheet-p{margin:0 0 10px; color:var(--muted); text-align:center; font-size:.95rem}
.lc-steps{margin:0 0 10px; padding-left:1.3em; display:grid; gap:9px; font-size:.97rem}
.lc-steps li::marker{color:var(--eosin); font-weight:700}
.lc-steps .ins-ic{width:1.25em; height:1.25em; vertical-align:-.28em; color:var(--hema); margin:0 .1em}
.lc-sheet-note{margin:0 0 14px; color:var(--muted); font-size:.82rem}
.lc-sheet-ok{width:100%}
.lc-sheet-go{width:100%; margin:0 0 6px; font-size:1.05rem; padding:13px 16px}
.lc-sheet-or{margin:6px 0 8px; color:var(--muted); font-size:.85rem; text-align:center}
.lc-sheet-warn{margin:0 0 10px; padding:9px 11px; border-radius:10px; background:var(--hema-soft); color:var(--ink); font-size:.88rem}
@media (min-width:700px){ .lc-sheet{align-items:center} .lc-sheet-card{border-radius:22px} }
@media (prefers-reduced-motion:reduce){ .lc-install,.lc-sheet,.lc-sheet-card{transition:none} .lc-install.on .lc-install-go{animation:none} }
@media print{ .lc-install,.lc-sheet{display:none} }

/* Webtronaut credit: bold link, and a "Built by" line in every footer */
a.lc-wt,.credit a[href*="webtronaut"]{color:var(--hema); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--eosin)}
a.lc-wt:hover{background:var(--hema-soft)}
.lc-built{margin:0 0 12px; font-family:var(--f-display); font-size:1.12rem; color:var(--muted)}
.lc-built span{font-style:italic}
.lc-built a.lc-wt{font-size:1.2rem}

/* "please confirm your email" strip */
.lc-vbar{background:var(--eosin-soft); border-bottom:1px solid #F0C9D8; color:var(--ink); font-size:.92rem}
.lc-vbar .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-block:9px}
.lc-vbar .btn{padding:5px 12px; font-size:.85rem}
@media (max-width:1060px){ .lc-vbar .wrap{padding-right:112px} }