/* The homepage's motion language (the founder, 2026-10-23: "make every click, every motion feel luxurious and elegant
   and sharp"; docs/decisions/2026-10-23-site-elegance.md). Three durations and two easings, defined here once and used
   by every transition on the page: --dur-1 for a press and a colour, --dur-2 for a hover or a change of state,
   --dur-3 for something arriving. Entrances ease out crisply; changes of state ease in and out gently. Only transform
   and opacity move; a colour may fade on a small control, which repaints it and never moves the layout. Under
   prefers-reduced-motion every state is still drawn, at once, and nothing travels. */
.building-page {
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 70ms;
  --lift: translate3d(0, -3px, 0);
  --press: translate3d(0, 0, 0) scale(0.98);
}

/* One focus ring for every control: deliberate, two pixels, clear of the edge, in the brand's oxblood; lemon on the
   dark footer. Shown for the keyboard only. */
.building-page :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.building-page .f :is(input, select, textarea):focus-visible { outline-offset: 2px; }
.building-page footer :is(a):focus-visible { outline-color: var(--lemon); }

/* Buttons: the hero's, each mission's Play, each plan's Join and the form's Send. Hover lifts and deepens, a press
   sinks at once, with no lag and no bounce. */
.building-page :is(.primary-link, .world-box-play, .plan-join, .send-row .btn) {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-1) var(--ease-in-out),
    border-color var(--dur-1) var(--ease-in-out);
}
.building-page :is(.primary-link, .world-box-play, .send-row .btn) { background: var(--ink); border-color: var(--ink); color: #fff; }
.building-page .primary-link { border-radius: var(--radius-s); min-height: 52px; padding: var(--space-3) var(--space-5); gap: var(--space-6); font: 600 16px/1.4 var(--sans); }
.building-page :is(.primary-link, .world-box-play, .plan-join, .send-row .btn) > span[aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}
/* The colour of a hovered button is set outside the hover query too, so building.css's older oxblood never shows,
   not even as a touch screen's sticky hover. */
.building-page :is(.primary-link, .world-box-play, .send-row .btn):hover { background: #1f4b41; border-color: #1f4b41; }
.building-page .plan-join:hover { background: color-mix(in srgb, var(--wi) 84%, #000); border-color: color-mix(in srgb, var(--wi) 84%, #000); }
@media (hover: hover) {
  .building-page :is(.primary-link, .world-box-play, .plan-join, .send-row .btn):hover { transform: var(--lift); box-shadow: 0 10px 20px -12px rgb(var(--shade) / 0.6); }
  .building-page .primary-link:hover > span[aria-hidden] { transform: translate3d(0, 3px, 0); }
  .building-page .plan-join:hover > span[aria-hidden] { transform: translate3d(2px, -2px, 0); }
}
.building-page :is(.primary-link, .world-box-play, .plan-join, .send-row .btn):active {
  transform: var(--press);
  box-shadow: none;
  transition-duration: var(--dur-1);
}
.building-page .send-row .btn:disabled { opacity: 0.6; transform: none; box-shadow: none; }

/* Links: an underline that draws from the left on hover, and back. */
.building-page :is(.marketing-nav a, .topic-entry, .opening-person a, .home-form-head a, footer a) { position: relative; text-decoration: none; }
.building-page :is(.marketing-nav a, .topic-entry, .opening-person a, .home-form-head a, footer a)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-2) var(--ease-in-out);
}
.building-page :is(.opening-person a, .home-form-head a) { border-bottom: 2px solid var(--lemon); }
.building-page :is(.opening-person a, .home-form-head a)::after { bottom: -2px; height: 2px; }
.building-page .home-form-head a { border-bottom-color: var(--ink); }
.building-page .topic-entry { justify-content: center; gap: var(--space-2); color: var(--ink-soft); }
.building-page .topic-entry::after { left: 18%; right: 18%; bottom: 9px; }
@media (hover: hover) {
  .building-page :is(.marketing-nav a, .topic-entry, .opening-person a, .home-form-head a, footer a):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .building-page .topic-entry:hover { color: var(--ink); }
}

/* The film plate lifts without cropping its picture; its play mark answers the pointer. */
.building-page .lesson-pop {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.building-page .lesson-pop img { transition: transform var(--dur-3) var(--ease-out); }
.building-page .lesson-play { transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .building-page .lesson-pop:hover { transform: var(--lift); box-shadow: var(--shadow-2), 0 0 0 5px #fffdf8; }
  .building-page .lesson-pop:hover .lesson-play { transform: scale(1.08); }
}
.building-page .lesson-pop:active { transform: var(--press); transition-duration: var(--dur-1); }

/* The mission cards and the plan cards: hover lifts the card, and the picture inside drifts closer. */
.building-page :is(.world-box, .price-plan, .tutoring .journey-steps li) {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.building-page .world-box-picture img { transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) {
  .building-page .world-box:hover { transform: var(--lift); }
  .building-page .world-box:hover .world-box-picture img { transform: scale(1.04); }
  .building-page .price-plan:hover { transform: var(--lift); box-shadow: var(--shadow-2), 0 0 0 1px var(--hairline); }
}
/* The plan picked in the form below is marked on its card (interest-form.js), so the choice reads in both places. */
/* The picked plan is marked by a gold check after its name: the cards carry no frame or ring (2026-10-25). */
.building-page .price-plan.is-picked { box-shadow: none; }
.building-page .price-plan.is-picked h3::after { content: " \2713"; color: var(--gold); }

/* Tabs and toggles in the learning map. */
.building-page :is(.topic-group, .topic-match, .topic-node, .grade-toggle, .topic-close, .topic-back) {
  transition: background-color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-out);
}
.building-page :is(.topic-group, .topic-match, .topic-node, .topic-close, .topic-back):active { transform: var(--press); }
.building-page .grade-toggle::after { transition: transform var(--dur-2) var(--ease-in-out); }

/* The form: fields sharpen on hover and focus; a field that needs an answer says so under itself (interest-form.js),
   and the plan picked by a Join button glows once. */
.building-page .f :is(input, select, textarea) {
  transition: border-color var(--dur-1) var(--ease-in-out), background-color var(--dur-1) var(--ease-in-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .building-page .f :is(input, select, textarea):hover { border-color: #b9b2a0; }
}
.building-page .f :is(input, select, textarea):focus { border-color: var(--ink); background-color: #fff; box-shadow: 0 0 0 4px rgb(232 198 75 / 0.35); outline: none; }
.building-page .f :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); }
.building-page .field-note { animation: note-in var(--dur-2) var(--ease-out) both; }
.building-page .f select.just-picked { animation: picked 1.2s var(--ease-in-out) both; }
.building-page .thanks:not([hidden]) { animation: rise-in var(--dur-3) var(--ease-out) both; }
@keyframes note-in { from { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes picked { 0%, 60% { background-color: #fff3c4; } }

/* The questions: the plus turns into a minus, the answer arrives. */
.building-page .build-faq summary { cursor: pointer; transition: background-color var(--dur-1) var(--ease-in-out); border-radius: var(--radius-m); }
.building-page .build-faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform var(--dur-2) var(--ease-in-out);
}
.building-page .build-faq details[open] summary::after {
  content: "";
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
  transform: rotate(180deg);
}
@media (hover: hover) {
  .building-page .build-faq summary:hover { background: #fbf8f1; }
}
.building-page .build-faq details[open] > p { animation: rise-in var(--dur-3) var(--ease-out) both; }

/* The dialogs open and close: a short rise and fade in, a quicker fade out, the backdrop with them. */
.building-page dialog.mission-dialog {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.98);
  transition:
    opacity var(--dur-2) var(--ease-in-out),
    transform var(--dur-2) var(--ease-in-out),
    overlay var(--dur-2) allow-discrete,
    display var(--dur-2) allow-discrete;
}
.building-page dialog.mission-dialog[open] {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-3);
  transition-timing-function: var(--ease-out);
}
@starting-style {
  .building-page dialog.mission-dialog[open] { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); }
}
.building-page dialog.mission-dialog::backdrop {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-in-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
}
.building-page dialog.mission-dialog[open]::backdrop { opacity: 1; transition-duration: var(--dur-3); }
@starting-style {
  .building-page dialog.mission-dialog[open]::backdrop { opacity: 0; }
}
.building-page .icon-button { transition: background-color var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-out); }
@media (hover: hover) {
  .building-page .icon-button:hover { background: var(--paper-2); }
}
.building-page .icon-button:active { transform: var(--press); }

/* Sections arrive once as they near the screen (home-motion.js adds .will-reveal only below the fold, so a visitor
   without script, or with motion reduced, reads a complete page). A group's items follow one another. */
.building-page .will-reveal { opacity: 0; transform: translate3d(0, 24px, 0); }
.building-page .will-reveal[data-reveal-items] { opacity: 1; transform: none; }
.building-page .will-reveal .reveal-item { opacity: 0; transform: translate3d(0, 20px, 0); }
.building-page .will-reveal.revealed,
.building-page .will-reveal.revealed .reveal-item {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.building-page .will-reveal.revealed .reveal-item {
  transition:
    opacity var(--dur-3) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--dur-3) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    box-shadow var(--dur-2) var(--ease-out);
}
/* A step's numeral and mark arrive a beat after its card. */
.building-page .journey-steps.will-reveal :is(.step-number, .step-mark) { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.9); }
.building-page .journey-steps.will-reveal.revealed :is(.step-number, .step-mark) {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-3) var(--ease-out) calc((var(--i, 0) + 2) * var(--stagger)),
    transform var(--dur-3) var(--ease-out) calc((var(--i, 0) + 2) * var(--stagger));
}

/* The dragon: it blinks now and then, the egg rocks once it is on screen, it bobs while it walks the steps' path,
   and it hops once when the form comes into view. */
.building-page .home-dragon .dragon-blink { animation: dragon-blink 5.6s steps(1, end) infinite; }
.building-page .dragon-walk .dragon-blink { animation-delay: -2.4s; }
.building-page .dragon-egg .dragon-body { transform-origin: 50% 90%; animation: egg-rock 4.8s var(--ease-in-out) 1.2s infinite; }
.building-page .dragon-walk { will-change: transform; }
.building-page .dragon-walk.is-walking .dragon-body { animation: dragon-step 300ms var(--ease-in-out) infinite alternate; }
.building-page .dragon-cheer.cheer-now .dragon-body { animation: dragon-hop 640ms var(--ease-out) 2; }
@keyframes dragon-blink { 0%, 100% { opacity: 0; } 96% { opacity: 1; } 98.5% { opacity: 0; } }
@keyframes egg-rock { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(6deg); } 88% { transform: rotate(-3deg); } }
@keyframes dragon-step { from { transform: scaleX(-1) translate3d(0, 0, 0) rotate(0); } to { transform: scaleX(-1) translate3d(0, -5px, 0) rotate(4deg); } }
@keyframes dragon-hop { 0%, 100% { transform: translate3d(0, 0, 0); } 40% { transform: translate3d(0, -14px, 0); } 70% { transform: translate3d(0, 0, 0) scale(1.04, 0.96); } }

@media (prefers-reduced-motion: reduce) {
  .building-page *,
  .building-page *::before,
  .building-page *::after,
  .building-page dialog.mission-dialog,
  .building-page dialog.mission-dialog::backdrop {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .building-page :is(.primary-link, .world-box-play, .plan-join, .send-row .btn, .lesson-pop, .world-box, .price-plan):is(:hover, :active) { transform: none; }
  .building-page :is(.lesson-pop, .world-box):hover img,
  .building-page .lesson-pop:hover .lesson-play { transform: none; }
  .building-page .will-reveal,
  .building-page .will-reveal .reveal-item { opacity: 1; transform: none; }
}