/* The chosen look and motion for the v3 scorecard (D82, D83). Spec: design/README.md "Motion"; reference:
   design/motion/scorecard-motion.html. Every rule is scoped to html[data-scorecard="callum-v3"], so callum-v2
   looks and moves exactly as before. Light landing and results, dark questions. The behaviour is in
   motion.js; under prefers-reduced-motion nothing moves and every final state is set at once. */

/* Until motion.js has laid out the landing, keep it hidden (no flash of the v2 layout); shown anyway after 1.5 s */
html[data-scorecard="callum-v3"]:not(.look) #screen-landing { visibility: hidden; animation: look-fallback 0s 1.5s forwards; }
@keyframes look-fallback { to { visibility: visible; } }
html[data-scorecard="callum-v3"] .screen.active { animation: none; } /* the iris replaces the fade between screens */

/* Screen to screen: the iris, the next screen (in its colour) opening in a circle from the point tapped */
html[data-scorecard="callum-v3"] body.turning { pointer-events: none; }
html[data-scorecard="callum-v3"] .screen.iris { display: flex; position: fixed; inset: 0; z-index: 20; overflow: hidden; background: var(--aoc-white); }

/* Header: the real logo top-left on light screens; on the questions, the mark whose yellow ring fills as progress */
html[data-scorecard="callum-v3"] header { border-bottom: 0; max-width: 1200px; width: 100%; margin: 0 auto; }
html[data-scorecard="callum-v3"] .logo { width: 133px; height: 40px; background: url(/img/aoc-logo-black-on-light.jpg) no-repeat left center / contain; color: transparent; font-size: 0; }
html[data-scorecard="callum-v3"] .logo strong { font-size: 0; }
html[data-scorecard="callum-v3"] #screen-questions .logo { display: flex; align-items: center; gap: var(--s-2); width: auto; height: 48px; background: none; }
html[data-scorecard="callum-v3"] .mark { width: 48px; height: 48px; flex-shrink: 0; }
html[data-scorecard="callum-v3"] .wordmark { width: 100px; height: 40px; flex-shrink: 0; background: url(/img/aoc-logo-white-on-dark.png) no-repeat -36px center / auto 100%; } /* the words only: the PNG mark ends at 35 px of 133 */
html[data-scorecard="callum-v3"] .ring-base { fill: var(--aoc-white); stroke: #333; stroke-width: 67; }
html[data-scorecard="callum-v3"] .ring-prog { fill: none; stroke: var(--aoc-yellow); stroke-width: 67; stroke-dasharray: 1024; stroke-dashoffset: 1024; transition: stroke-dashoffset 500ms cubic-bezier(.2, .7, .2, 1); }

/* Landing: title lines rise from behind a mask, the highlighter draws across the whole word, the founders photo */
html[data-scorecard="callum-v3"] .hero { display: grid; gap: var(--s-6); align-items: center; max-width: 1200px; width: 100%; margin: 0 auto; padding: var(--s-6) var(--s-6) 0; }
@media (min-width: 860px) { html[data-scorecard="callum-v3"] .hero { grid-template-columns: 1.1fr .9fr; } }
html[data-scorecard="callum-v3"] .hero .page-title { font-size: clamp(40px, 8vw, 72px); font-weight: var(--fw-display); line-height: var(--lh-head); text-align: left; margin-bottom: var(--s-5); }
html[data-scorecard="callum-v3"] .line { display: block; overflow: hidden; padding-bottom: 4px; }
html[data-scorecard="callum-v3"] .line > span { display: inline-block; }
html[data-scorecard="callum-v3"] .hero h2 { font-size: clamp(26px, 5vw, 40px); margin-bottom: var(--s-4); }
html[data-scorecard="callum-v3"] .hero h2 em { font-style: normal; background: linear-gradient(var(--aoc-yellow), var(--aoc-yellow)) no-repeat 0 50% / 0% 100%; padding: 0 6px; margin: 0 -2px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-scorecard="callum-v3"] .hero h2 em.drawn { background-size: 100% 100%; transition: background-size 700ms cubic-bezier(.6, 0, .2, 1); }
html[data-scorecard="callum-v3"] .photo-wrap { position: relative; overflow: hidden; border-radius: var(--s-2); aspect-ratio: 16 / 10; }
@media (min-width: 860px) { html[data-scorecard="callum-v3"] .photo-wrap { aspect-ratio: 4 / 5; } }
html[data-scorecard="callum-v3"] .photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
html[data-scorecard="callum-v3"] .wipe { position: absolute; inset: 0; background: var(--aoc-yellow); transform: scaleX(0); }
html[data-scorecard="callum-v3"] #screen-landing .landing-body { padding-top: var(--s-6); }

/* Questions: black, white text, answer borders #333 turning yellow when picked */
html[data-scorecard="callum-v3"] #screen-questions { background: var(--aoc-black); color: var(--aoc-white); }
html[data-scorecard="callum-v3"] #screen-questions h1, html[data-scorecard="callum-v3"] #screen-questions h2,
html[data-scorecard="callum-v3"] #screen-questions .back-btn { color: var(--aoc-white); }
html[data-scorecard="callum-v3"] .option-item { position: relative; isolation: isolate; overflow: hidden; background: none; border-color: #333; transition: border-color 200ms; }
html[data-scorecard="callum-v3"] .option-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aoc-yellow); transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(.2, .7, .2, 1); }
html[data-scorecard="callum-v3"] .option-item:hover { border-color: #333; }
html[data-scorecard="callum-v3"] .option-item.selected { border-color: var(--aoc-yellow); box-shadow: none; }
html[data-scorecard="callum-v3"] .option-item.selected::before { transform: scaleX(1); }
html[data-scorecard="callum-v3"] .option-radio { display: none; }
html[data-scorecard="callum-v3"] .option-text { font-size: 18px; font-weight: var(--fw-sub); color: var(--aoc-white); transition: color 200ms; }
html[data-scorecard="callum-v3"] .option-item.selected .option-text { color: var(--aoc-black); }
html[data-scorecard="callum-v3"] #screen-questions .progress-footer { border-top-color: #333; }
html[data-scorecard="callum-v3"] #screen-questions .progress-label { color: #a3a3a3; }
html[data-scorecard="callum-v3"] #screen-questions .progress-bar { display: none; } /* the STANDOUT letters are the progress bar */

/* The STANDOUT letters: progress on the questions (fill yellow per lever), the Operating Map on the results.
   The letters are drawn from data-l, so they add no text to the page. */
html[data-scorecard="callum-v3"] .standout-word { display: flex; gap: 2px; font-size: clamp(28px, 8vw, 48px); font-weight: var(--fw-display); line-height: 1.1; margin-bottom: var(--s-4); }
html[data-scorecard="callum-v3"] .standout-word span { position: relative; color: #333; }
html[data-scorecard="callum-v3"] .standout-word span::before { content: attr(data-l); }
html[data-scorecard="callum-v3"] .standout-word span::after { content: attr(data-l); position: absolute; inset: 0; color: var(--c, var(--aoc-yellow)); clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); transition: clip-path 500ms cubic-bezier(.2, .7, .2, 1); }
html[data-scorecard="callum-v3"] .standout-word span.now { color: #a3a3a3; }
html[data-scorecard="callum-v3"] .standout-word.res { justify-content: center; }
html[data-scorecard="callum-v3"] .standout-word.res span { color: var(--aoc-line); }
html[data-scorecard="callum-v3"] .standout-word.res span::after { transition-duration: 900ms; }

/* Buttons: black on light, white on dark; with a mouse they turn yellow with black text and lift 2 px */
html[data-scorecard="callum-v3"] .btn-start, html[data-scorecard="callum-v3"] .btn-start:hover,
html[data-scorecard="callum-v3"] .btn-next, html[data-scorecard="callum-v3"] .btn-next:hover,
html[data-scorecard="callum-v3"] .btn-book, html[data-scorecard="callum-v3"] .btn-book:hover { background: var(--aoc-black); color: var(--aoc-white); text-decoration: none; }
html[data-scorecard="callum-v3"] #screen-questions .btn-next, html[data-scorecard="callum-v3"] #screen-questions .btn-next:hover,
html[data-scorecard="callum-v3"] .cta-block .btn-book, html[data-scorecard="callum-v3"] .cta-block .btn-book:hover { background: var(--aoc-white); color: var(--aoc-black); }
html[data-scorecard="callum-v3"] .btn-start, html[data-scorecard="callum-v3"] .btn-next, html[data-scorecard="callum-v3"] .btn-book { border-radius: var(--s-2); transition: background-color 200ms, color 200ms, transform 200ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  html[data-scorecard="callum-v3"] .btn-start:hover, html[data-scorecard="callum-v3"] #screen-questions .btn-next:hover:not(:disabled),
  html[data-scorecard="callum-v3"] .cta-block .btn-book:hover { background: var(--aoc-yellow); color: var(--aoc-black); transform: translateY(-2px); }
  html[data-scorecard="callum-v3"] .option-item:hover { border-color: var(--aoc-white); }
  html[data-scorecard="callum-v3"] .option-item.selected:hover { border-color: var(--aoc-yellow); }
}
html[data-scorecard="callum-v3"] .btn-start:active, html[data-scorecard="callum-v3"] #screen-questions .btn-next:active:not(:disabled),
html[data-scorecard="callum-v3"] .cta-block .btn-book:active { transform: scale(.97); } /* after the hover lift, which it beats */
html[data-scorecard="callum-v3"] .btn-start:focus-visible, html[data-scorecard="callum-v3"] .btn-next:focus-visible,
html[data-scorecard="callum-v3"] .btn-book:focus-visible, html[data-scorecard="callum-v3"] .back-btn:focus-visible,
html[data-scorecard="callum-v3"] .option-item:focus-visible, html[data-scorecard="callum-v3"] .cta-secondary a:focus-visible { outline: 3px solid var(--aoc-yellow); outline-offset: 3px; }

/* Results: the score beside the book (two columns from 860 px, the book under the score on a phone) */
html[data-scorecard="callum-v3"] .score-hero-inner { grid-template-columns: 1fr; grid-template-areas: "widget" "book" "desc" "mate"; }
@media (min-width: 860px) {
  html[data-scorecard="callum-v3"] .score-hero-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "widget book" "desc book" "mate book"; column-gap: var(--s-6); }
}
html[data-scorecard="callum-v3"] .score-widget { grid-area: widget; border: 0; padding: 0; text-align: left; }
html[data-scorecard="callum-v3"] .score-number { font-size: clamp(88px, 22vw, 160px); }
html[data-scorecard="callum-v3"] .score-description { grid-area: desc; }
html[data-scorecard="callum-v3"] .testimonial--hero { grid-area: mate; }
html[data-scorecard="callum-v3"] .top-book { grid-area: book; position: relative; overflow: hidden; border-radius: var(--s-2); aspect-ratio: 16 / 10; }
@media (min-width: 860px) { html[data-scorecard="callum-v3"] .top-book { aspect-ratio: 4 / 5; } }
html[data-scorecard="callum-v3"] .top-book img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }

/* The area bars fill to each area's score */
html[data-scorecard="callum-v3"] .area-card .track { height: 10px; margin: var(--s-2) 0; overflow: hidden; border-radius: 5px; background: var(--aoc-line); }
html[data-scorecard="callum-v3"] .area-card .fill { width: 0; height: 100%; border-radius: 5px; background: var(--aoc-black); transition: width 1000ms cubic-bezier(.2, .7, .2, 1); }

/* The Next Step: the two seated portraits, then the debrief button */
html[data-scorecard="callum-v3"] .next-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); max-width: 480px; margin: 0 auto var(--s-4); }
html[data-scorecard="callum-v3"] .next-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--s-2); }

/* Cards and the Next Step rise in as they scroll into view, not on load (motion.js adds .rv, then .in) */
html[data-scorecard="callum-v3"] .opp-card, html[data-scorecard="callum-v3"] .area-card { animation: none; }
html[data-scorecard="callum-v3"] .rv { opacity: 0; transform: translateY(24px); transition: opacity 500ms, transform 500ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
html[data-scorecard="callum-v3"] .rv.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  html[data-scorecard="callum-v3"] header { justify-items: start; text-align: left; }
  html[data-scorecard="callum-v3"] .page-title { text-align: left; }
  html[data-scorecard="callum-v3"] .hero { padding: var(--s-5) var(--s-3) 0; gap: var(--s-5); }
  html[data-scorecard="callum-v3"] #screen-landing .landing-body { padding-top: var(--s-5); }
}

/* Reduced motion: nothing moves at all */
@media (prefers-reduced-motion: reduce) {
  html.look[data-scorecard="callum-v3"] *, html.look[data-scorecard="callum-v3"] *::before, html.look[data-scorecard="callum-v3"] *::after { transition: none !important; animation: none !important; }
}