/* Apprentice One — on top of site.css: the same structure, a calmer palette (ink blue and amber)
   and its own mark. Tokens only, plus the few things the library adds. */
:root {
  --bg: #0c1018; --bg-2: #111725; --surface: #161d2c; --surface-2: #1d2639; --line: #2a3550;
  --ink: #eef1f7; --ink-2: #b4bccd; --ink-3: #7f899e;
  --accent: #ffc857; --accent-ink: #1a1405; --accent-soft: #3a2f12;
  --up: #7fd8a4; --focus: #9ad4ff;
}
/* the logos: ten, one per page load (html[data-logo], set in base.html's head; the book without
   script); logo.js adds .go and the intro plays once. The resting state is the finished logo. */
html:not([data-logo]) .brand .v-book, [data-logo="book"] .brand .v-book, [data-logo="bulb"] .brand .v-bulb,
[data-logo="owl"] .brand .v-owl, [data-logo="chalk"] .brand .v-chalk,
[data-logo="atom"] .brand .v-atom { display: inline-flex; }
.brand .logo .word { font: 700 calc(var(--s) * .62)/1 var(--font); letter-spacing: -.01em; color: var(--ink); }
.brand .logo .word b { color: var(--accent); }

/* the book: the right page turns over to the left, then the spark */
.v-book .pg-turn { transform-origin: 16px 18px; transform-box: view-box; opacity: 0; }
.v-book.go .pg-turn { animation: book-turn .55s ease-in-out 2 both; }
.v-book.go .spark { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; transform-origin: 16px 6px; transform-box: view-box; }
@keyframes book-turn { 0% { opacity: 1; transform: perspective(60px) rotateY(0); } 99% { opacity: 1; transform: perspective(60px) rotateY(-178deg); } 100% { opacity: 0; transform: perspective(60px) rotateY(-180deg); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }

/* the bulb: the filament draws, the glass flickers on, the rays come out */
.brand .v-bulb .word { font: 600 calc(var(--s) * .66)/1 var(--logo-space); letter-spacing: .01em; }
.brand .v-bulb .word b { font-weight: 800; margin-left: .18em; }
.v-bulb > svg { filter: drop-shadow(0 0 calc(var(--s) * .2) rgb(255 200 87 / .45)); }
.v-bulb .glass { fill: rgb(255 200 87 / .22); }
.v-bulb.go > svg { animation: bulb-glow 1.4s ease-out both; }
.v-bulb.go .fil { stroke-dasharray: 1; animation: draw .6s ease-out both; }
.v-bulb.go .glass { animation: bulb-on 1.1s steps(1) .55s both; }
.v-bulb.go .rays { animation: rays .5s ease-out 1.05s both; transform-origin: 16px 14px; transform-box: view-box; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bulb-on { 0% { fill: rgb(255 200 87 / 0); } 15% { fill: rgb(255 200 87 / .35); } 25% { fill: rgb(255 200 87 / .02); } 40% { fill: rgb(255 200 87 / .3); } 100% { fill: rgb(255 200 87 / .22); } }
@keyframes bulb-glow { 0%, 45% { filter: none; } 100% { filter: drop-shadow(0 0 calc(var(--s) * .2) rgb(255 200 87 / .45)); } }
@keyframes rays { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }

/* the owl: looks left and right, blinks twice, tilts its head */
.brand .v-owl .word { font: 400 calc(var(--s) * .6)/1 var(--logo-russo); letter-spacing: .02em; }
.v-owl .lids rect { transform: scaleY(0); transform-origin: center top; transform-box: fill-box; }
.v-owl.go .lids rect { animation: blink 1.6s ease-in-out .2s both; }
.v-owl.go .pupils { animation: look 1.6s ease-in-out both; }
.v-owl.go .head { animation: tilt 1.8s ease-in-out both; transform-origin: 16px 28px; transform-box: view-box; }
@keyframes blink { 0%, 30%, 40%, 62%, 72%, 100% { transform: scaleY(0); } 35%, 67% { transform: scaleY(1); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 15%, 30% { transform: translateX(-1.4px); } 45%, 60% { transform: translateX(1.4px); } 80% { transform: translateX(0); } }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg); } 92% { transform: rotate(4deg); } }

/* the chalkboard: A1 is chalked, the chalk taps down, the name is written left to right */
.brand .v-chalk .word { font: 400 calc(var(--s) * .66)/1 var(--logo-marker); letter-spacing: .02em; color: #f3f1e8; }
.brand .v-chalk .word b { color: var(--accent); font-weight: 400; }
.v-chalk .word .ink { display: inline-block; }
.v-chalk.go .a1 { stroke-dasharray: 1; animation: draw .9s ease-in-out both; }
.v-chalk.go .stick { animation: chalk-tap .4s ease-in-out .85s 2 both; transform-box: fill-box; transform-origin: center; }
.v-chalk.go .word .ink { animation: write 1.1s steps(18) .9s both; }
@keyframes chalk-tap { 50% { transform: translateY(-2px) rotate(-12deg); } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the atom: three electrons race round their orbits and come to rest */
.brand .v-atom .word { font: 600 calc(var(--s) * .52)/1 var(--logo-mono); letter-spacing: -.02em; }
.v-atom .e > g > g, .v-atom .e > .o1 { offset-path: path("M29,16 A13,5 0 1,1 3,16 A13,5 0 1,1 29,16"); offset-rotate: 0deg; }
.v-atom .o1 { offset-distance: 8%; } .v-atom .o2 { offset-distance: 41%; } .v-atom .o3 { offset-distance: 74%; }
.v-atom.go .o1 { animation: orbit1 1.6s cubic-bezier(.2, .7, .3, 1) both; }
.v-atom.go .o2 { animation: orbit2 1.6s cubic-bezier(.2, .7, .3, 1) .08s both; }
.v-atom.go .o3 { animation: orbit3 1.6s cubic-bezier(.2, .7, .3, 1) .16s both; }
.v-atom.go > svg { animation: spin-in 1.6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes orbit1 { from { offset-distance: -292%; } to { offset-distance: 8%; } }
@keyframes orbit2 { from { offset-distance: -259%; } to { offset-distance: 41%; } }
@keyframes orbit3 { from { offset-distance: -226%; } to { offset-distance: 74%; } }
@keyframes spin-in { from { transform: rotate(-90deg) scale(.7); } to { transform: none; } }

/* the second five: the cap is thrown and its tassel swings, the pencil ticks the box, the keys are
   typed and the name types out, the puzzle pieces click together, the sprout grows to the sun */
[data-logo="cap"] .brand .v-cap, [data-logo="pencil"] .brand .v-pencil, [data-logo="keys"] .brand .v-keys,
[data-logo="puzzle"] .brand .v-puzzle, [data-logo="sprout"] .brand .v-sprout { display: inline-flex; }

.brand .v-cap .word { font: 400 calc(var(--s) * .6)/1 "Audiowide", var(--font); letter-spacing: .01em; }
.v-cap .cap, .v-cap .tassel, .v-cap .conf { transform-box: view-box; }
.v-cap .tassel { transform-origin: 26px 14px; }
.v-cap.go .cap { animation: cap-throw 1s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 16px 16px; }
.v-cap.go .tassel { animation: tassel 1.2s ease-in-out .75s both; }
.v-cap.go .conf { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) .85s both; transform-origin: 16px 6px; }
@keyframes cap-throw { 0% { transform: translateY(18px) rotate(-35deg) scale(.6); opacity: 0; } 45% { transform: translateY(-9px) rotate(200deg) scale(1); opacity: 1; }
  75% { transform: translateY(1.5px) rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes tassel { 0% { transform: rotate(0); } 20% { transform: rotate(-28deg); } 45% { transform: rotate(16deg); } 70% { transform: rotate(-7deg); } 100% { transform: rotate(0); } }

.brand .v-pencil .word { font: 700 calc(var(--s) * .64)/1 "Chakra Petch", var(--font); letter-spacing: .01em; }
.v-pencil .pen { offset-path: path("M7 17.5l4.5 4.5L21 11"); offset-rotate: 0deg; offset-distance: 100%; offset-anchor: 0 0; }
.v-pencil.go .tick { stroke-dasharray: 1; animation: draw .75s cubic-bezier(.5, 0, .5, 1) .35s both; }
.v-pencil.go .pen { animation: pen-in .35s ease-out both, pen-write .75s cubic-bezier(.5, 0, .5, 1) .35s both, pen-tap .3s ease-in-out 1.15s; }
@keyframes pen-in { from { opacity: 0; translate: 6px -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes pen-write { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes pen-tap { 50% { translate: 1.2px -1.2px; } }

.brand .v-keys .word { font: 500 calc(var(--s) * .52)/1 var(--logo-mono); letter-spacing: -.02em; }
.v-keys .k { transform-box: view-box; }
.v-keys.go .k1 { animation: key .26s ease-in-out .15s; }
.v-keys.go .k2 { animation: key .26s ease-in-out .45s; }
.v-keys.go .k3 { animation: key .26s ease-in-out .75s; }
@keyframes key { 45% { transform: translateY(1.6px); filter: brightness(1.35); } }
.brand .v-keys .word b { margin-left: .45em; }
.v-keys .typed { display: inline-block; position: relative; padding-right: .12em; }
.v-keys.go .typed { animation: type 1.1s steps(13, end) .25s both; }
.v-keys.go .typed::after { content: ""; position: absolute; right: 0; top: -.05em; bottom: -.1em; width: .1em; background: var(--accent); animation: caret .5s steps(1) 0s 4 both; }
@keyframes type { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em 0 -.3em 0); } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

.brand .v-puzzle .word { font: 400 calc(var(--s) * .56)/1 "Bungee", var(--font); letter-spacing: .01em; }
.brand .v-puzzle .word b { color: var(--sky); }
.v-puzzle .pl, .v-puzzle .pr, .v-puzzle > svg { transform-box: view-box; }
.v-puzzle.go .pl { animation: pz-left .7s cubic-bezier(.3, .8, .4, 1) both; }
.v-puzzle.go .pr { animation: pz-right .7s cubic-bezier(.3, .8, .4, 1) both; transform-origin: 22px 16px; }
.v-puzzle.go > svg { animation: pz-click .3s ease-out .68s; }
.v-puzzle.go .snap { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) .72s both; transform-origin: 15px 5px; transform-box: view-box; }
@keyframes pz-left { from { transform: translateX(-7px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pz-right { from { transform: translate(9px, -6px) rotate(25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pz-click { 40% { transform: scale(1.12); } }

.brand .v-sprout .word { font: 600 calc(var(--s) * .64)/1 var(--logo-space); letter-spacing: .01em; }
.brand .v-sprout .word b { color: var(--up); }
.v-sprout .leaf, .v-sprout .sun { transform-box: view-box; }
.v-sprout .l1 { transform-origin: 16px 21.5px; } .v-sprout .l2 { transform-origin: 16px 17px; }
.v-sprout.go .stem { stroke-dasharray: 1; animation: draw .6s ease-out both; }
.v-sprout.go .l1 { animation: unfurl .45s cubic-bezier(.3, 1.5, .5, 1) .45s both; }
.v-sprout.go .l2 { animation: unfurl .45s cubic-bezier(.3, 1.5, .5, 1) .7s both; }
.v-sprout.go .sun { animation: rise .7s ease-out .9s both; transform-origin: 25.5px 6.5px; }
@keyframes unfurl { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
@keyframes rise { from { transform: translateY(6px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v-cap.go *, .v-pencil.go *, .v-keys.go *, .v-keys.go .typed::after, .v-puzzle.go *, .v-sprout.go *, .v-puzzle.go > svg { animation: none !important; } }

.subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.subjects a { padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: .92rem; }
.subjects a:hover { border-color: var(--ink-3); color: var(--ink); }
.subjects a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.progress-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: .8rem; font-weight: 600; }
/* a phone: the mark alone, so Studio, Sign in and Join fit (the link still says the name) */
@media (max-width: 440px) { .brand .logo .word { display: none; } }
/* the reminder to sign in, over a lesson in play (site.js): once, at the foot, never in the way */
.learn-remind { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; width: min(560px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 8px 30px rgb(0 0 0 / .5); color: var(--ink);
  animation: remind-in .35s ease-out both; }
.learn-remind p { margin: 0; flex: 1 1 100%; font-size: .95rem; line-height: 1.4; }
.learn-remind p b { color: var(--accent); }
@keyframes remind-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .learn-remind { animation: none; } }