/* Seulguksaeng motion: all original copy and numeric values stay visible. */
:root {
  --motion-spring: cubic-bezier(.22, 1, .36, 1);
  --motion-smooth: cubic-bezier(.4, 0, .2, 1);
  --motion-accent: #ff650a;
}

section[id] { scroll-margin-top: 118px; }
.motion-scroll-progress {
  position: fixed; z-index: 300; inset: 0 0 auto; height: 3px;
  overflow: hidden; pointer-events: none;
}
.motion-scroll-progress > span {
  display: block; width: 100%; height: 100%; transform: scaleX(0);
  transform-origin: left; border-radius: 0 99px 99px 0;
  background: linear-gradient(90deg, #ff4f00, #ff9a42, #ffd4b7);
}
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.mobile-nav a {
  padding: 6px 11px; border-radius: 99px;
  transition: color .2s ease, background .2s ease;
}
.mobile-nav a.is-current { background: #ff650a14; color: var(--orange-deep); }

/* Text never starts transparent or blurred. Only a short positional entrance. */
.motion-ready .motion-reveal {
  opacity: 1; filter: none; transform: translate3d(0, 12px, 0);
  transition: transform .42s var(--motion-spring) var(--motion-delay, 0ms);
}
.motion-ready .motion-reveal.is-visible { transform: none; }
.hero-copy > .motion-reveal { transform: none; transition: none; }
.motion-ready .hero-visual.motion-reveal { transform: none; }
.motion-ready .review-card.motion-reveal,
.motion-ready .annual-board.motion-reveal,
.motion-ready .campus-grid > .motion-reveal { transform: none; }

/* Calls to action retain their click positions, including mouse hover. */
.button, .button:hover, .header-cta, .header-cta:hover,
.review-banner, .review-banner:hover, .text-link, .text-link:hover {
  transform: none;
  transition: color .2s ease, border-color .2s ease,
    background .2s ease, box-shadow .25s ease;
}
.button, .header-cta { position: relative; isolation: isolate; overflow: hidden; }
.button::before, .header-cta::before {
  content: ""; position: absolute; z-index: -1; inset: -70% auto -70% -45%;
  width: 35%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #ffffff65, transparent);
  transform: skewX(-18deg) translateX(-230%);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover::before, .header-cta:hover::before { animation: ctaShine .75s ease both; }
  .button-primary:hover, .header-cta:hover {
    box-shadow: 0 0 0 4px #ff650a10, 0 12px 30px #ff650a40;
  }
}
.button:active, .header-cta:active, .mobile-bottom-cta a:active { filter: brightness(.96); }
.faq-list summary { transition: color .2s ease; }
.faq-list summary:hover { padding-left: 0; padding-right: 0; color: var(--orange-deep); }
.faq-list details[open] > p { animation: faqOpen .3s ease; }

/* Scenes preserve the layout of the original illustrations. */
.hero-visual:hover .lesson-core { transform: translateX(-50%) rotateY(-7deg) rotateX(3deg); }
.verify-stage:hover .question-card { transform: translate(-50%, -50%) rotateY(-7deg) rotateX(3deg); }
.app-stage:hover .phone-front { transform: translate(-50%, -50%) rotateY(5deg) rotateZ(2deg); }
.report-stage:hover .report-card { transform: translate(-50%, -50%) rotateY(-5deg) rotateX(2deg); }
.range-source, .hero-float-card, .floating-note, .clinic-pill,
.lesson-halo, .lesson-aura, .hero-glow, .verify-glow,
.final-orb, .review-card::before, .app-stage::before, .report-stage::before,
.phone-speaker, .school-selector .is-active, .choice-selected,
.progress-ring, .system-flow > i, .mobile-bottom-cta a:last-child {
  animation: none;
}
.hero-glow-one { animation: atmosphereDrift 18s ease-in-out infinite alternate; animation-play-state: paused; }
.hero.is-in-view .hero-glow-one { animation-play-state: running; }
.motion-document-hidden .hero-glow-one { animation-play-state: paused !important; }
.review-card { cursor: default; }
.review-card::before { opacity: .12; }

/* Connection lines are decoration behind or alongside the existing content. */
.motion-connector {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.hero-visual > .motion-connector { z-index: -1; }
.question-card > .motion-connector { z-index: 5; }
.motion-connector .connector-track { fill: none; stroke: #ff650a23; stroke-width: 2; }
.motion-connector .connector-line {
  fill: none; stroke: #ff650a; stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
}
.motion-connector .connector-dot { fill: #ff650a; stroke: #fff3e6; stroke-width: 3; }
.scene-playing .hero-connect-one { animation: connectorDraw 1.1s var(--motion-spring) .45s both; }
.scene-playing .hero-connect-two { animation: connectorDraw 1.1s var(--motion-spring) 1.1s both; }
.scene-playing .hero-connect-three { animation: connectorDraw 1.1s var(--motion-spring) 1.85s both; }
.scene-playing .verify-connect { animation: connectorDraw 1.1s var(--motion-spring) .8s both; }

/* The book opens without obscuring its labels. */
.book-page-left { transform-origin: right center; }
.book-page-right { transform-origin: left center; }
.open-book { perspective: 1000px; }
.scene-playing .book-page-left { animation: bookOpenLeft 1.25s var(--motion-spring) both; }
.scene-playing .book-page-right { animation: bookOpenRight 1.25s var(--motion-spring) .08s both; }
.scene-playing .book-line { animation: bookInk .9s var(--motion-spring) .65s both; transform-origin: left; }
.scene-playing .book-line:nth-of-type(2) { animation-delay: .8s; }
.scene-playing .book-line:nth-of-type(3) { animation-delay: .95s; }
.scene-playing .range-source > span { animation: badgeBloom .7s ease .3s both; }
.scene-playing .hero-float-verify > span { animation: badgeBloom .7s ease 1.5s both; }
.scene-playing .hero-float-manage > span { animation: badgeBloom .7s ease 2.3s both; }
.scene-playing .lesson-result > i { animation: checkStamp .55s var(--motion-spring) 2.6s both; }
.book-page mark, .evidence-card mark { position: relative; }
.book-page mark::after, .evidence-card mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  border-radius: 9px; background: linear-gradient(90deg, #ff650a, #ffad52);
  transform-origin: left; pointer-events: none;
}
.scene-playing .book-page mark::after { animation: underlineDraw .8s var(--motion-spring) 1s both; }

/* Evidence is highlighted first, then connected to the selected answer. */
.scene-playing .evidence-card mark::after { animation: underlineDraw .8s var(--motion-spring) .3s both; }
.scene-playing .choice-selected { animation: answerConfirm 1.1s ease 1.65s both; }
.scene-playing .choice-check { animation: checkStamp .55s var(--motion-spring) 1.85s both; }
.scene-playing .floating-note > span { animation: badgeBloom .7s ease 2.1s both; }
.evidence-card p { color: #58514b; }
.evidence-card span { color: #bb4600; }
.evidence-card mark { color: #9b3b00; background: #ff650a18; }

/* The displayed 82%, 9 / 11 and all task statuses remain unchanged. */
.progress-ring.has-motion-ring { position: relative; background: #fff; }
.motion-progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.motion-progress-ring circle { fill: none; stroke-width: 8; }
.motion-progress-ring .ring-track { stroke: #ece9e5; }
.motion-progress-ring .ring-fill { stroke: #ff650a; stroke-linecap: round; stroke-dasharray: 82 100; }
.progress-ring > b { position: relative; z-index: 1; }
.scene-playing .ring-fill { animation: progressFill 1.8s var(--motion-spring) .35s both; }
.scene-playing .task-done > span { animation: checkStamp .6s var(--motion-spring) .6s both; }
.scene-playing .task-done { animation: taskConfirm 1.15s ease .55s both; }
.scene-playing .app-task:nth-of-type(5) { animation: taskConfirm 1.15s ease 1s both; }
.scene-playing .clinic-pill > span { animation: badgeBloom .7s ease 1.8s both; }

/* Animate the existing achievement wording without counting or replacing it. */
.result-badge { position: relative; overflow: visible; }
.motion-grade-start, .motion-grade-finish, .motion-grade-arrow { display: inline-block; }
.scene-playing .motion-grade-start { animation: gradeStart .7s ease .2s both; }
.scene-playing .motion-grade-arrow { animation: gradeArrow .8s var(--motion-spring) .45s both; }
.scene-playing .motion-grade-finish { animation: gradeFinish .95s var(--motion-spring) .75s both; }
.scene-playing .result-badge { animation: achievementGlow 1.4s ease .7s both; }
.result-badge::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid #ffaf64;
  border-radius: inherit; pointer-events: none; opacity: 0;
}
.scene-playing .result-badge::after { animation: achievementRipple 1.1s ease .9s both; }

/* Schedule labels stay fixed while a colored underline unfolds. */
.annual-board .phase { position: relative; animation: none; opacity: 1; transform: none; }
.annual-board .phase::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px; height: 3px;
  border-radius: 9px; background: linear-gradient(90deg, #ffb467, #fff3d2);
  transform-origin: left; pointer-events: none;
}
.annual-board.scene-playing .phase::after {
  animation: underlineDraw .85s var(--motion-spring) var(--phase-delay, 0ms) both;
}
.scene-playing .radar-shape { animation: radarSettle .9s var(--motion-spring) .2s both; }
.scene-playing .insight-list > div { animation: insightConfirm .9s ease var(--insight-delay, .5s) both; }
.scene-playing .report-status { animation: badgeBloom .7s ease 1.8s both; }

/* Scroll-linked orange route stays in the page gutters, away from text. */
body { overflow-x: clip; }
main { position: relative; isolation: isolate; overflow-x: clip; }
.motion-journey { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.motion-journey svg { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; }
.journey-track, .journey-fill { fill: none; stroke-width: 2; stroke-linecap: round; }
.journey-track { stroke: #ff650a17; }
.journey-fill { stroke: #ff650a; stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey-node { fill: #f5f5f7; stroke: #ff650a58; stroke-width: 2; }
.journey-node.is-passed { fill: #ff650a; stroke: #fff1dd; }

/* Mirror the native preference for immediate runtime changes and safe fallback. */
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after {
  animation: none !important; transition: none !important;
}
.motion-reduced .motion-reveal { transform: none !important; opacity: 1; filter: none; }
.motion-reduced .motion-scroll-progress { display: none; }
.motion-reduced .journey-fill { stroke-dashoffset: 0 !important; }

@keyframes ctaShine {
  0% { opacity: 0; transform: skewX(-18deg) translateX(-230%); }
  15% { opacity: .85; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(620%); }
}
@keyframes faqOpen { from { transform: translateY(-5px); } to { transform: none; } }
@keyframes atmosphereDrift {
  from { transform: translate3d(-8px, -6px, 0) scale(.98); }
  to { transform: translate3d(14px, 10px, 0) scale(1.04); }
}
@keyframes connectorDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes underlineDraw { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes bookOpenLeft { from { transform: rotateY(38deg); } to { transform: rotateY(0); } }
@keyframes bookOpenRight { from { transform: rotateY(-38deg); } to { transform: rotateY(0); } }
@keyframes bookInk { from { transform: scaleX(.15); background: #ffc995; } to { transform: scaleX(1); } }
@keyframes badgeBloom {
  0%, 100% { box-shadow: 0 0 0 0 #ff650a00; }
  45% { box-shadow: 0 0 0 8px #ff650a16, 0 0 26px #ff650a30; }
}
@keyframes checkStamp {
  0% { transform: scale(.85); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes answerConfirm {
  0%, 100% { box-shadow: 0 1px 0 #fff inset, 0 8px 22px #0000000b; }
  45% { box-shadow: 0 0 0 3px #ff650a25, 0 12px 32px #ff650a24; }
}
@keyframes progressFill { from { stroke-dashoffset: 82; } to { stroke-dashoffset: 0; } }
@keyframes taskConfirm {
  0%, 100% { border-color: #3c3c4319; }
  40% { border-color: #ff650a90; box-shadow: 0 0 0 3px #ff650a12; }
}
@keyframes gradeStart { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes gradeArrow { from { transform: translateX(-3px); } to { transform: none; } }
@keyframes gradeFinish { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.24); } }
@keyframes achievementGlow {
  0%, 100% { box-shadow: 0 0 0 #ff650a00; }
  45% { box-shadow: 0 0 30px #ffb46755; }
}
@keyframes achievementRipple {
  0% { opacity: 0; transform: scale(.95); }
  30% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes radarSettle {
  from { transform: translate(-50%, -50%) scale(.82) rotate(-5deg); }
  to { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes insightConfirm {
  0%, 100% { border-color: #3c3c4319; }
  40% { border-color: #ff650a70; box-shadow: 0 0 0 3px #ff650a10; }
}

@media (max-width: 760px) {
  section[id] { scroll-margin-top: 108px; }
  .motion-ready .motion-reveal { transform: translate3d(0, 8px, 0); transition-duration: .35s; }
  .motion-ready .motion-reveal.is-visible,
  .motion-ready .hero-copy > .motion-reveal,
  .motion-ready .hero-visual.motion-reveal,
  .motion-ready .review-card.motion-reveal,
  .motion-ready .annual-board.motion-reveal,
  .motion-ready .campus-grid > .motion-reveal { transform: none; }
  .hero-visual:hover .lesson-core { transform: translateX(-50%); }
  .verify-stage:hover .question-card { transform: translate(-50%, -50%); }
  .app-stage:hover .phone-front { transform: translate(-50%, -50%); }
  .report-stage:hover .report-card { transform: translate(-50%, -50%); }
  .motion-connector .connector-line, .motion-connector .connector-track { stroke-width: 1.5; }
  .review-card { scroll-snap-stop: always; }
  .journey-track, .journey-fill { stroke-width: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .motion-reveal { transform: none !important; opacity: 1; filter: none; }
  .motion-scroll-progress { display: none; }
  .journey-fill { stroke-dashoffset: 0 !important; }
  .hero-glow, .lesson-aura, .verify-glow, .final-orb { translate: none; }
}