/* ============================================================
   ARAM IAS — Option D2: Premium (award-tier craft layer)
   Builds on option-b.css. Adds the "motion fabric":
   Lenis smooth scroll, GSAP scrub choreography, pinned
   horizontal timeline, pinned answer transformation,
   kinetic hero, magnetic buttons, custom cursor, 3D tilt,
   grain + gradient drift.
   ============================================================ */

/* ---------- Grain + ambient ---------- */
.d2-grain {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor (desktop only) ---------- */
.d2-cursor, .d2-cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html.d2-cursor-on, html.d2-cursor-on * { cursor: none !important; }
  .d2-cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 500;
    width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
    border: 1px solid rgba(202,102,79,.8);
    pointer-events: none; mix-blend-mode: difference;
    transition: width .25s ease, height .25s ease, margin .25s ease, background .25s ease, border-color .25s ease;
    will-change: transform;
  }
  .d2-cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 501;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
    background: var(--ob-accent); pointer-events: none; will-change: transform;
  }
  .d2-cursor.is-hover { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(202,102,79,.14); border-color: transparent; }
  .d2-cursor.is-label::after {
    content: attr(data-label);
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-accent);
  }
}

/* ---------- Magnetic buttons ---------- */
.d2-mag { position: relative; will-change: transform; }

/* ---------- Kinetic hero ---------- */
.d2-hero { position: relative; overflow: hidden; }
.d2-hero-bg {
  position: absolute; inset: -20% -10% -10% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at var(--mx, 70%) var(--my, 20%), rgba(202,102,79,.3), transparent 60%),
    radial-gradient(540px 420px at 20% 80%, rgba(46,107,143,.22), transparent 60%);
  filter: blur(10px);
  transition: background .4s ease;
}
.d2-hero .container { position: relative; z-index: 2; }
.d2-word { display: inline-block; overflow: hidden; vertical-align: top; }
.d2-word > span { display: inline-block; transform: translateY(110%); }

/* ---------- Section fade/parallax entrances (GSAP-driven) ---------- */
.d2-fade { opacity: 0; transform: translateY(30px); }
.d2-par { will-change: transform; }

/* ---------- Pinned horizontal timeline ("Your 11 months") ---------- */
.d2-h-sec { background: var(--ob-navy-ink); color: #fff; overflow: hidden; }
.d2-h-head { padding: 70px 0 24px; }
/* Native horizontal scroll container (no pin). */
.d2-h-viewport {
  display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 0 20px;
}
.d2-h-viewport::-webkit-scrollbar { display: none; }
.d2-h-track { display: flex; gap: 26px; padding: 0 8vw; }
.d2-h-card { scroll-snap-align: center; }
.d2-h-card {
  flex: 0 0 clamp(260px, 34vw, 420px);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ob-line-dark);
  border-radius: 4px;
  padding: 28px;
  min-height: 340px;
  display: flex; flex-direction: column;
  position: relative;
}
.d2-h-card .d2-h-month { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ob-accent); }
.d2-h-card h3 { font-size: 24px; letter-spacing: -.02em; margin: 10px 0 12px; text-transform: uppercase; color: #fff; }
.d2-h-card p { font-size: 14px; color: rgba(255,255,255,.62); margin: 0; }
.d2-h-card .d2-h-stage { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ob-line-dark); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.d2-h-card .d2-h-idx { position: absolute; right: 22px; top: 22px; font-size: 42px; font-weight: 800; color: rgba(255,255,255,.07); letter-spacing: -.04em; }
.d2-h-rail { height: 2px; background: rgba(255,255,255,.12); margin: 0 8vw; position: relative; }
.d2-h-rail i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ob-accent); }
.d2-h-hint { text-align: center; padding: 14px 0 54px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* ---------- Pinned answer transformation ---------- */
.d2-at { background: var(--ob-cream); }
/* height:100vh was needed only while this section was pinned — removed, it
   was forcing a full viewport of white space on desktop. */
.d2-at-stage { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 44px; align-items: center; }
.d2-at-left h2 { font-size: clamp(28px,3.4vw,46px); letter-spacing: -.03em; line-height: 1.05; text-transform: uppercase; margin: 14px 0 16px; }
.d2-at-left h2 .hl { color: var(--ob-accent); }
.d2-at-score { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.d2-at-score b { font-size: 72px; font-weight: 800; letter-spacing: -.04em; color: var(--ob-accent); line-height: 1; }
.d2-at-score span { font-size: 14px; color: var(--fg-muted); }
.d2-at-paper {
  background: #fff; border: 1px solid var(--ob-line); border-radius: 4px;
  padding: 32px; box-shadow: 0 30px 70px rgba(21,49,75,.12); position: relative;
}
.d2-at-paper .ph { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 18px; }
.d2-at-line { height: 9px; background: #E7E2DA; border-radius: 2px; margin-bottom: 12px; transition: background .5s ease, width .5s ease; }
.d2-at-line.l1 { width: 72%; } .d2-at-line.l2 { width: 90%; } .d2-at-line.l3 { width: 54%; }
.d2-at-line.l4 { width: 84%; } .d2-at-line.l5 { width: 46%; }
.d2-at.is-fixed .d2-at-line { background: #F0D7CB; }
.d2-at.is-fixed .d2-at-line.l1 { width: 95%; } .d2-at.is-fixed .d2-at-line.l3 { width: 88%; } .d2-at.is-fixed .d2-at-line.l5 { width: 80%; }
.d2-at-note {
  position: absolute; right: -14px; background: var(--ob-navy); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 3px; opacity: 0; transform: translateX(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2); white-space: nowrap;
}
.d2-at-note::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right-color: var(--ob-navy); }
.d2-at-note.show { opacity: 1; transform: none; }
.d2-at-n1 { top: 18%; } .d2-at-n2 { top: 42%; } .d2-at-n3 { top: 66%; }

/* ---------- 3D tilt ---------- */
.d2-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .1s linear; }

/* ---------- Scrubbed service bars ---------- */
.d2-scrub-bar i { width: 0 !important; }

/* ---------- Section transition wipe ---------- */
.d2-wipe { position: relative; }

/* ---------- Ribbon ---------- */
.od-ribbon.d2 { background: linear-gradient(90deg, var(--ob-accent), #8f3f2c) !important; }

/* ---------- Reduced motion / fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .d2-fade { opacity: 1 !important; transform: none !important; }
  .d2-word > span { transform: none !important; }
  .d2-grain { display: none; }
}
@media (max-width: 1024px) {
  /* Horizontal + pinned scenes collapse to vertical stacks on tablet/mobile */
  .d2-h-viewport { height: auto; display: block; }
  .d2-h-track { flex-direction: column; padding: 20px 0 40px; gap: 14px; transform: none !important; }
  .d2-h-card { flex: 1 1 auto; min-height: 0; }
  .d2-at-stage { height: auto; grid-template-columns: 1fr; gap: 24px; padding: 20px 0; }
  .d2-at .d2-at-line, .d2-at.is-fixed .d2-at-line { transition: none; }
  .d2-at-note { position: static; opacity: 1; transform: none; display: inline-block; margin: 4px 6px 0 0; }
  .d2-at-note::before { display: none; }
}

/* ============================================================
   D2 additions — live/animated modules (all ambient or on-view;
   none hijack scroll).
   ============================================================ */

/* ---------- Live counter band ---------- */
.d2-liveband { background: var(--ob-navy-ink); color: #fff; border-top: 1px solid var(--ob-line-dark); }
.d2-liveband-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ob-line-dark); }
.d2-live-cell { background: var(--ob-navy-ink); padding: 26px 22px; position: relative; overflow: hidden; }
.d2-live-cell::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--ob-accent), transparent);
  transform: translateX(-100%); animation: d2Sheen 4.5s ease-in-out infinite;
}
.d2-live-cell:nth-child(2)::after { animation-delay: 1.1s; }
.d2-live-cell:nth-child(3)::after { animation-delay: 2.2s; }
.d2-live-cell:nth-child(4)::after { animation-delay: 3.3s; }
@keyframes d2Sheen { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.d2-live-cell strong { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.d2-live-cell strong .u { color: var(--ob-accent); }
.d2-live-cell span { display: block; margin-top: 9px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.d2-live-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5fbf8f; margin-right: 7px; box-shadow: 0 0 0 0 rgba(95,191,143,.7); animation: obPulse 2s infinite; vertical-align: middle; }

/* ---------- Self-running ARAM AI dashboard ---------- */
.d2-dash {
  background: #0F1623; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  padding: 18px; position: relative; overflow: hidden;
}
.d2-dash::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(202,102,79,.08) 50%, transparent 60%);
  transform: translateX(-60%); animation: d2Scan 6s ease-in-out infinite;
}
@keyframes d2Scan { 0%,100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } }
.d2-dash-top { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
.d2-dash-top .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ob-accent); animation: obPulse 2s infinite; }
.d2-dash-top strong { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-weight: 800; }
.d2-dash-top .st { margin-left: auto; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); display: inline-flex; align-items: center; gap: 6px; }
.d2-dash-top .st i { width: 5px; height: 5px; border-radius: 50%; background: #5fbf8f; animation: obPulse 1.6s infinite; }
.d2-dash-body { padding-top: 16px; min-height: 196px; }
.d2-dash-kicker { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ob-accent); }
.d2-dash-body h4 { color: #fff; font-size: 17px; margin: 8px 0 4px; letter-spacing: -.01em; min-height: 1.2em; }
.d2-dash-body > p { color: rgba(255,255,255,.6); font-size: 12.5px; margin: 0 0 14px; min-height: 2.6em; }
.d2-dash-bars { display: grid; gap: 9px; }
.d2-dash-bar { display: grid; grid-template-columns: 76px 1fr 34px; gap: 10px; align-items: center; font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: .05em; text-transform: uppercase; }
.d2-dash-bar .tr { height: 7px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.d2-dash-bar .tr i { display: block; height: 100%; width: 0; background: var(--ob-accent); border-radius: 2px; transition: width .9s cubic-bezier(.16,1,.3,1); }
.d2-dash-task { margin-top: 14px; padding: 13px; border: 1px dashed rgba(202,102,79,.5); border-radius: 3px; color: #fff; font-size: 12.5px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.d2-dash-task.show { opacity: 1; transform: none; }
.d2-dash-task b { color: var(--ob-accent); }
.d2-dash-steps { display: flex; gap: 6px; margin-top: 16px; }
.d2-dash-steps i { flex: 1; height: 3px; background: rgba(255,255,255,.14); border-radius: 2px; transition: background .3s ease; }
.d2-dash-steps i.on { background: var(--ob-accent); }
.d2-cursor-sim { color: #fff; } /* placeholder */

/* ---------- Self-drawing "marks climbing" chart ---------- */
.d2-chart { border: 1px solid var(--ob-line); background: #fff; border-radius: 4px; padding: 24px 26px; }
.d2-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.d2-chart .grid { stroke: var(--border-soft); stroke-width: 1; }
.d2-chart .axis { stroke: var(--border-base); stroke-width: 1; }
.d2-chart .plateau { fill: none; stroke: #B9B5AD; stroke-width: 2.5; stroke-dasharray: 6 5; }
.d2-chart .climb { fill: none; stroke: var(--ob-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d2-chart .pathdraw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.d2-chart.is-in .pathdraw { animation: d2Draw 1.8s ease-out forwards; }
.d2-chart.is-in .plateau.pathdraw { animation-duration: 1.2s; }
@keyframes d2Draw { to { stroke-dashoffset: 0; } }
.d2-chart .dot { fill: var(--ob-accent); opacity: 0; }
.d2-chart.is-in .dot { animation: d2Dot .4s ease forwards; }
.d2-chart.is-in .dot.d1 { animation-delay: 1.3s; } .d2-chart.is-in .dot.d2 { animation-delay: 1.5s; } .d2-chart.is-in .dot.d3 { animation-delay: 1.7s; }
@keyframes d2Dot { to { opacity: 1; } }
.d2-chart-legend { display: flex; gap: 20px; margin-top: 14px; }
.d2-chart-legend span { font-size: 11px; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 7px; }
.d2-chart-legend i { width: 18px; height: 3px; display: inline-block; border-radius: 2px; }
.d2-chart-cap { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--fg-muted); margin: 14px 0 0; }

/* ---------- Exam-skill radial gauge ---------- */
.d2-skillwheel { display: grid; place-items: center; position: relative; min-height: 300px; }
.d2-skillwheel svg { transform: rotate(-90deg); overflow: visible; }
.d2-skillwheel .seg-bg { fill: none; stroke: var(--border-soft); stroke-width: 16; }
.d2-skillwheel .seg { fill: none; stroke-width: 16; stroke-linecap: butt; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }
.d2-skillwheel.is-in .seg { stroke-dashoffset: var(--off); }
.d2-skillwheel .seg.content { stroke: var(--ob-accent); }
.d2-skillwheel .seg.other { stroke: #9fb0c4; }
.d2-skillwheel-center { position: absolute; text-align: center; }
.d2-skillwheel-center b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--ob-accent); line-height: 1; }
.d2-skillwheel-center span { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); display: block; margin-top: 6px; max-width: 12ch; }

/* ---------- Icon draw-on (clean stroke draw, like the reference) ---------- */
.ob-hair-ico svg path, .ob-hair-ico svg rect, .ob-hair-ico svg circle, .ob-hair-ico svg line {
  stroke-dasharray: 160; stroke-dashoffset: 160;
}
.ob-hair-grid.is-in .ob-hair-ico svg path,
.ob-hair-grid.is-in .ob-hair-ico svg rect,
.ob-hair-grid.is-in .ob-hair-ico svg circle,
.ob-hair-grid.is-in .ob-hair-ico svg line {
  animation: d2Draw 1.1s cubic-bezier(.5,0,.2,1) forwards;
}
.ob-hair-grid.is-in .ob-hair-ico svg * { animation-delay: .15s; }
/* each cell's icon draws slightly after the cell appears, staggered */
.ob-hair-grid.is-in .ob-hair-cell:nth-child(2) .ob-hair-ico svg * { animation-delay: .22s; }
.ob-hair-grid.is-in .ob-hair-cell:nth-child(3) .ob-hair-ico svg * { animation-delay: .29s; }
.ob-hair-grid.is-in .ob-hair-cell:nth-child(4) .ob-hair-ico svg * { animation-delay: .36s; }
.ob-hair-grid.is-in .ob-hair-cell:nth-child(5) .ob-hair-ico svg * { animation-delay: .43s; }
.ob-hair-grid.is-in .ob-hair-cell:nth-child(6) .ob-hair-ico svg * { animation-delay: .50s; }

/* ---------- Heading mask-reveal (chapter titles) ---------- */
.d2-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.d2-mask > span { display: inline-block; transform: translateY(110%); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.d2-mask.in > span { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .d2-liveband-inner { grid-template-columns: 1fr 1fr; }
  .d2-skillwheel { min-height: 260px; }
}
@media (max-width: 560px) {
  .d2-liveband-inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .d2-live-cell::after, .d2-dash::before, .d2-dash-top .dot, .d2-dash-top .st i, .d2-live-pulse { animation: none !important; }
  .d2-chart .pathdraw { stroke-dashoffset: 0 !important; animation: none !important; }
  .d2-chart .dot { opacity: 1 !important; animation: none !important; }
  .d2-skillwheel .seg { stroke-dashoffset: var(--off) !important; transition: none !important; }
  .ob-hair-ico svg * { stroke-dashoffset: 0 !important; animation: none !important; }
  .d2-mask > span { transform: none !important; }
}

/* ============================================================
   D2 — ch04 score ring + replay, ch05 AI projection graph,
   stepper animation hooks
   ============================================================ */

/* ----- ch04 circular score ring ----- */
.d2-at-scorewrap { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.d2-ring { position: relative; width: 108px; height: 108px; flex: none; }
.d2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.d2-ring-bg { fill: none; stroke: var(--border-base); stroke-width: 9; }
.d2-ring-fg { fill: none; stroke: var(--ob-accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1); }
.d2-ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.d2-ring-num b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ob-accent); line-height: 1; font-variant-numeric: tabular-nums; }
.d2-ring-num small { font-size: 11px; color: var(--fg-subtle); }
.d2-at-scorenote { display: block; font-size: 13px; color: var(--fg-muted); max-width: 24ch; }
.d2-replay {
  margin-top: 12px; background: none; border: 1px solid var(--border-base);
  border-radius: 2px; padding: 8px 14px; cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.d2-replay:hover { border-color: var(--ob-accent); color: var(--ob-accent); background: #FBF5F2; }

/* ----- ch05 AI projection graph ----- */
.d2-aigraph {
  margin-top: 30px; background: #0F1623; border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 20px 22px; position: relative; overflow: hidden;
}
.d2-aigraph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(202,102,79,.07) 50%, transparent 58%);
  transform: translateX(-60%); animation: d2Scan 6.5s ease-in-out infinite;
}
.d2-aigraph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.d2-aigraph-status { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 7px; }
.d2-aigraph-status i { width: 6px; height: 6px; border-radius: 50%; background: #5fbf8f; animation: obPulse 1.6s infinite; }
.d2-aigraph svg { width: 100%; height: auto; display: block; overflow: visible; }
.d2-ag-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.d2-ag-axis { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.d2-ag-area { fill: var(--ob-accent); opacity: 0; transition: opacity .8s ease .9s; }
.d2-aigraph.is-in .d2-ag-area { opacity: .18; fill: var(--ob-accent); }
.d2-ag-line { fill: none; stroke: var(--ob-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d2-ag-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.d2-aigraph.is-in .d2-ag-draw { animation: d2Draw 1.9s ease-out forwards; }
.d2-ag-live { fill: #fff; stroke: var(--ob-accent); stroke-width: 3; opacity: 0; }
.d2-aigraph.is-in .d2-ag-live { opacity: 1; animation: d2Travel 1.9s ease-out forwards; }
.d2-ag-label { fill: var(--ob-accent); font-size: 15px; font-weight: 800; opacity: 0; transform: rotate(0); }
.d2-aigraph.is-in .d2-ag-label { animation: d2Dot .4s ease forwards 1.8s; }
.d2-aigraph-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.6); }
.d2-aigraph-foot b { color: #fff; }
/* the live dot travels along the curve via offset-path */
@keyframes d2Travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
.d2-ag-live { offset-path: path("M60,150 C190,146 300,120 420,86 S600,40 650,32"); offset-rotate: 0deg; }

/* ----- stepper line fill on view ----- */
.ob-stepper .ob-stepper-line i { width: 0; }
.ob-stepper.is-in .ob-stepper-line i { animation: d2StepLine 1.3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes d2StepLine { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .d2-ring-fg { transition: none !important; }
  .d2-aigraph::before, .d2-aigraph-status i { animation: none !important; }
  .d2-ag-draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .d2-ag-live { opacity: 1 !important; animation: none !important; }
  .d2-ag-area { opacity: .18 !important; }
  .d2-ag-label { opacity: 1 !important; }
  .ob-stepper .ob-stepper-line i { width: 100% !important; animation: none !important; }
}

/* ============================================================
   D2 round 2 — AI bar+pie charts, counting skill gauge,
   multi-screen dashboard, per-cell plateau animations
   ============================================================ */

/* ----- ch05: AI bar + pie analysis row ----- */
.d2-ai-analysis { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 20px; }
.d2-ai-card {
  background: #0F1623; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  padding: 20px 22px; position: relative; overflow: hidden;
}
.d2-ai-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(202,102,79,.06) 50%, transparent 58%);
  transform: translateX(-60%); animation: d2Scan 7s ease-in-out infinite;
}
.d2-ai-card h5 { color: #fff; font-size: 13px; margin: 0 0 2px; letter-spacing: -.01em; }
.d2-ai-card .ob-micro { color: rgba(255,255,255,.5); }
.d2-ai-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.d2-ai-card-head .st { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5fbf8f; display: inline-flex; align-items: center; gap: 6px; }
.d2-ai-card-head .st i { width: 5px; height: 5px; border-radius: 50%; background: #5fbf8f; animation: obPulse 1.6s infinite; }

/* vertical ranking bar graph */
.d2-rankbars { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding-top: 10px; }
.d2-rankbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.d2-rankbar .col { width: 100%; background: linear-gradient(var(--ob-accent), #8f3f2c); border-radius: 3px 3px 0 0; height: 0; transition: height 1s cubic-bezier(.16,1,.3,1); position: relative; }
.d2-rankbar .col::after { content: attr(data-v); position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800; color: #fff; opacity: 0; transition: opacity .3s ease; }
.d2-ai-card.is-in .d2-rankbar .col::after { opacity: .9; }
.d2-rankbar.dim .col { background: rgba(255,255,255,.14); }
.d2-rankbar span { margin-top: 8px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }

/* donut strength pie */
.d2-pie-wrap { display: flex; align-items: center; gap: 20px; }
.d2-pie { width: 128px; height: 128px; flex: none; position: relative; }
.d2-pie svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.d2-pie circle { fill: none; stroke-width: 18; }
.d2-pie .pie-track { stroke: rgba(255,255,255,.08); }
.d2-pie .pie-seg { stroke-dasharray: var(--len) 999; stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1); }
.d2-ai-card.is-in .d2-pie .pie-seg { stroke-dashoffset: var(--off); }
.d2-pie-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.d2-pie-center b { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.d2-pie-legend { display: grid; gap: 8px; }
.d2-pie-legend div { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.7); }
.d2-pie-legend i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.d2-pie-legend b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

/* ----- ch02: fast-cycling skill count ----- */
.d2-skillwheel-center b { font-variant-numeric: tabular-nums; }
.d2-skillwheel-center b .cnum { display: inline-block; min-width: .7em; }

/* ----- ch05: multi-screen dashboard ----- */
.d2-dash-screens { position: relative; min-height: 232px; }
.d2-dash-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.d2-dash-screen.on { opacity: 1; transform: none; pointer-events: auto; }
.d2-dash-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.d2-dash-tab { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 6px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; background: none; cursor: pointer; transition: .2s; }
.d2-dash-tab.on { color: #fff; border-color: var(--ob-accent); background: rgba(202,102,79,.16); }
/* screen: analysis bars */
.d2-ds-bars { display: grid; gap: 10px; }
.d2-ds-bar { display: grid; grid-template-columns: 80px 1fr 32px; gap: 10px; align-items: center; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.d2-ds-bar .tr { height: 7px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.d2-ds-bar .tr i { display: block; height: 100%; width: 0; background: var(--ob-accent); border-radius: 2px; transition: width .9s cubic-bezier(.16,1,.3,1); }
.d2-dash-screen.on .d2-ds-bar .tr i { width: var(--w); }
/* screen: subjects chips */
.d2-ds-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.d2-ds-chip { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 8px 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); }
.d2-ds-chip.weak { border-color: var(--ob-accent); color: var(--ob-accent); background: rgba(202,102,79,.12); }
.d2-ds-chip.strong { border-color: rgba(95,191,143,.5); color: #5fbf8f; }
/* screen: task / revision list */
.d2-ds-list { display: grid; gap: 9px; }
.d2-ds-item { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; font-size: 12.5px; color: rgba(255,255,255,.82); }
.d2-ds-item .chk { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--ob-accent); display: grid; place-items: center; font-size: 10px; color: var(--ob-accent); }
.d2-ds-item.done { color: rgba(255,255,255,.45); }
.d2-ds-item.done .chk { background: var(--ob-accent); color: #fff; border-color: var(--ob-accent); }
.d2-ds-item .tag { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* ----- ch01: per-cell plateau mini-animations ----- */
.ob-hair-cell { position: relative; }
.ob-hair-cell .d2-cellfx { position: absolute; right: 14px; top: 16px; width: 46px; height: 24px; pointer-events: none; }
/* stacking papers */
.d2-fx-stack i { position: absolute; width: 16px; height: 20px; border: 1px solid rgba(202,102,79,.5); border-radius: 1px; top: 2px; }
.ob-hair-grid.is-in .d2-fx-stack i:nth-child(1){ left: 0; animation: d2StackIn .5s ease .1s both; }
.ob-hair-grid.is-in .d2-fx-stack i:nth-child(2){ left: 9px; animation: d2StackIn .5s ease .25s both; }
.ob-hair-grid.is-in .d2-fx-stack i:nth-child(3){ left: 18px; animation: d2StackIn .5s ease .4s both; }
@keyframes d2StackIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ticking clock dot */
.d2-fx-pulse i { position: absolute; right: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ob-accent); }
.ob-hair-grid.is-in .d2-fx-pulse i { animation: d2PulseRing 2s ease-out infinite; }
@keyframes d2PulseRing { 0%{ box-shadow:0 0 0 0 rgba(202,102,79,.5);} 70%{ box-shadow:0 0 0 7px rgba(202,102,79,0);} 100%{ box-shadow:0 0 0 0 rgba(202,102,79,0);} }
/* flat line that stays flat (marks flat) */
.d2-fx-flat svg { width: 46px; height: 24px; }
.d2-fx-flat path { fill: none; stroke: var(--ob-accent); stroke-width: 1.5; stroke-dasharray: 60; stroke-dashoffset: 60; }
.ob-hair-grid.is-in .d2-fx-flat path { animation: d2Draw 1.4s ease-out .3s forwards; }
/* blinking cursor-ish bar */
.d2-fx-type i { position: absolute; right: 6px; top: 8px; width: 2px; height: 14px; background: var(--ob-accent); }
.ob-hair-grid.is-in .d2-fx-type i { animation: d2Blink 1.1s step-end infinite; }
@keyframes d2Blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .d2-ai-analysis { grid-template-columns: 1fr; }
  .d2-pie-wrap { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .d2-ai-card::before { animation: none !important; }
  .d2-rankbar .col, .d2-pie .pie-seg, .d2-ds-bar .tr i { transition: none !important; }
  .d2-fx-stack i, .d2-fx-pulse i, .d2-fx-flat path, .d2-fx-type i { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* ============================================================
   D2 — Impact dashboard (stat band + before/after bars + live heatmap)
   Reference-style "charts build live" panel, ARAM data.
   ============================================================ */
.d2-impact { background: linear-gradient(160deg, #1B2539 0%, #141C2C 70%); color: #fff; }

/* stat band */
.d2-impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ob-line-dark); border: 1px solid var(--ob-line-dark); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.d2-impact-stats > div { background: rgba(255,255,255,.03); padding: 30px 26px; }
.d2-impact-stats strong { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ob-accent); font-variant-numeric: tabular-nums; }
.d2-impact-stats span { display: block; margin-top: 12px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* two-panel row */
.d2-impact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.d2-impact-card { background: rgba(255,255,255,.03); border: 1px solid var(--ob-line-dark); border-radius: 4px; padding: 24px 26px; position: relative; overflow: hidden; }
.d2-impact-card > .ob-micro { color: rgba(255,255,255,.55); margin-bottom: 20px; }

/* before/after bars */
.d2-ba2 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 22px; align-items: end; height: 230px; }
.d2-ba2-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.d2-ba2-col .cap { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; opacity: 0; transition: opacity .4s ease .8s; }
.d2-impact-card.is-in .d2-ba2-col .cap { opacity: 1; }
.d2-ba2-col .bar { width: 86px; border-radius: 4px 4px 0 0; height: 0; transition: height 1.1s cubic-bezier(.16,1,.3,1); }
.d2-ba2-before .cap { color: rgba(255,255,255,.6); }
.d2-ba2-before .bar { background: rgba(255,255,255,.16); }
.d2-ba2-after .cap { color: var(--ob-accent); }
.d2-ba2-after .bar { background: linear-gradient(var(--ob-accent), #8f3f2c); }
.d2-ba2-col .lbl { margin-top: 10px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.d2-ba2-lift { padding-bottom: 44px; opacity: 0; transform: translateX(-8px); transition: opacity .5s ease 1s, transform .5s ease 1s; }
.d2-impact-card.is-in .d2-ba2-lift { opacity: 1; transform: none; }
.d2-ba2-lift b { display: block; font-size: 30px; font-weight: 800; color: var(--ob-accent); letter-spacing: -.03em; }
.d2-ba2-lift span { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.d2-impact-cap { font-size: 12px; color: rgba(255,255,255,.5); margin: 18px 0 0; }

/* live heatmap */
.d2-heatgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.d2-heatcell { aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(255,255,255,.06); transform: scale(.6); opacity: 0; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease, background .5s ease; }
.d2-impact-card.is-in .d2-heatcell { transform: none; opacity: 1; }
.d2-heat-row-labels { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-top: 8px; }
.d2-heat-row-labels span { font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.4); text-align: center; }
.d2-heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 10px; color: rgba(255,255,255,.5); }
.d2-heat-legend .ramp { display: flex; gap: 3px; }
.d2-heat-legend .ramp i { width: 16px; height: 10px; border-radius: 2px; }

@media (max-width: 900px) {
  .d2-impact-stats { grid-template-columns: 1fr; }
  .d2-impact-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .d2-ba2-col .bar, .d2-heatcell { transition: none !important; }
  .d2-ba2-col .cap, .d2-ba2-lift { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   D2 — skill gauge: rotating dotted ring + progress sweep
   ============================================================ */
.d2-skillwheel { position: relative; }
.d2-skillwheel > svg { position: absolute; inset: 0; margin: auto; }
.d2-skillwheel #d2SkillSvg { position: relative; } /* keep segmented wheel in flow for sizing */

/* ambient rotating dotted ring (continuous) */
.d2-sw-dotted { animation: d2Spin 22s linear infinite; transform-origin: 120px 120px; }
@keyframes d2Spin { to { transform: rotate(360deg); } }

/* progress sweep ring: filled via stroke-dashoffset while counting */
.d2-sw-progress { transform: rotate(-90deg); transform-origin: 120px 120px; }
.d2-sw-prog-fg {
  stroke-dasharray: 578.1;      /* 2*pi*92 */
  stroke-dashoffset: 578.1;      /* start empty */
  transition: stroke-dashoffset .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .d2-sw-dotted { animation: none !important; }
  .d2-sw-prog-fg { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* ============================================================
   D2 — clean circular progress bar (image-3 style) + per-cell
   left-icon continuous motion + ch02 compaction
   ============================================================ */

/* ----- circular progress bar ----- */
.d2-cprog { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.d2-cprog svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.d2-cprog-track { fill: none; stroke: var(--border-soft); stroke-width: 12; }
.d2-cprog-fg {
  fill: none; stroke: var(--ob-accent); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 427.3;      /* 2*pi*68 */
  stroke-dashoffset: 427.3;      /* empty */
  transition: stroke-dashoffset .14s linear;
  filter: drop-shadow(0 0 6px rgba(202,102,79,.35));
}
.d2-cprog-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.d2-cprog-center b { font-size: 52px; font-weight: 800; letter-spacing: -.04em; color: var(--ob-accent); font-variant-numeric: tabular-nums; }
.d2-cprog-center small { font-size: 20px; color: var(--fg-subtle); font-weight: 700; }
.d2-cprog-center span { display: block; margin-top: 10px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); max-width: 13ch; margin-inline: auto; }
.d2-cprog.is-complete .d2-cprog-fg { stroke: #5fbf8f; filter: drop-shadow(0 0 10px rgba(95,191,143,.5)); }

/* ----- ch02 compaction ----- */
#ch02.ob-section { padding-top: 48px; padding-bottom: 48px; }
.d2-gauge-row { gap: 40px; }
@media (max-width: 900px) { .d2-gauge-row { grid-template-columns: 1fr !important; } .d2-cprog { width: 180px; height: 180px; } }

/* ----- per-cell left-icon continuous motion ----- */
.d2-ico svg { overflow: visible; }
/* draw-in once, then settle (works with the existing hair-grid draw) */

/* stack: gentle vertical bob */
.d2-ico-stack svg { animation: d2Bob 3.2s ease-in-out infinite; }
@keyframes d2Bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* spin: the two circles — rotate the whole icon slowly */
.d2-ico-spin svg { animation: d2SpinSlow 9s linear infinite; transform-origin: 50% 50%; }
@keyframes d2SpinSlow { to { transform: rotate(360deg); } }

/* blink: the grid cells fade in/out like a cursor */
.d2-ico-blink svg rect:nth-child(2) { animation: d2CellBlink 1.8s ease-in-out infinite; }
.d2-ico-blink svg rect:nth-child(3) { animation: d2CellBlink 1.8s ease-in-out .6s infinite; }
.d2-ico-blink svg rect:nth-child(4) { animation: d2CellBlink 1.8s ease-in-out 1.2s infinite; }
@keyframes d2CellBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* flat: the rising line keeps re-drawing to show "effort up" then stays flat visually */
.d2-ico-flat svg path { stroke-dasharray: 60; animation: d2Redraw 3.5s ease-in-out infinite; }
@keyframes d2Redraw { 0% { stroke-dashoffset: 60; } 45% { stroke-dashoffset: 0; } 90%,100% { stroke-dashoffset: 0; } }

/* bars: the two right-side vertical bars pulse heights */
.d2-ico-bars svg path:last-child { transform-origin: bottom; animation: d2BarsPulse 2.4s ease-in-out infinite; }
@keyframes d2BarsPulse { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }

/* tick: the clock-ish dot pulses + the dash slides */
.d2-ico-tick svg path:last-child { animation: d2Slide 2.6s ease-in-out infinite; }
@keyframes d2Slide { 0%,100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(4px); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .d2-cprog-fg { transition: none !important; stroke-dashoffset: 150 !important; }
  .d2-ico svg, .d2-ico svg * { animation: none !important; }
}

/* ============================================================
   D2 — vertical compaction for ch02 (The Diagnosis) and
   ch04 (The Loop). Removes dead white space.
   ============================================================ */

/* ----- ch02: gauge folded into the left column ----- */
#ch02.ob-section { padding-top: 44px; padding-bottom: 44px; }
#ch02 .ob-chapter-head { margin-bottom: 20px; }
.d2-diag-row { align-items: start; gap: 44px; }

.d2-gauge-inline {
  display: grid; grid-template-columns: 136px 1fr; gap: 20px; align-items: center;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ob-line);
}
.d2-gauge-inline .d2-cprog { width: 136px; height: 136px; margin: 0; }
.d2-gauge-inline .d2-cprog-track,
.d2-gauge-inline .d2-cprog-fg { stroke-width: 11; }
.d2-gauge-inline .d2-cprog-center b { font-size: 38px; }
.d2-gauge-inline .d2-cprog-center small { font-size: 15px; }
.d2-gauge-inline-copy .ob-micro { margin-bottom: 6px; }
.d2-gauge-inline-copy h3 {
  font-size: clamp(18px, 2vw, 23px); letter-spacing: -.02em;
  text-transform: uppercase; margin: 0 0 8px; line-height: 1.12;
}
.d2-gauge-inline-copy h3 .hl { color: var(--ob-accent); }
.d2-gauge-inline-copy p { font-size: 13px; color: var(--fg-muted); margin: 0; max-width: 42ch; }

/* ----- ch04: tighten now that the pin height is gone ----- */
#ch04.ob-section { padding-top: 44px; padding-bottom: 44px; }
#ch04 .ob-chapter-head { margin-bottom: 20px; }
.d2-at-paper { padding: 26px; }
.d2-at-line { height: 8px; margin-bottom: 10px; }
.d2-at-scorewrap { margin-top: 20px; }
.d2-at-left h2 { margin: 10px 0 12px; }

@media (max-width: 1040px) {
  .d2-gauge-inline { grid-template-columns: 112px 1fr; gap: 16px; }
  .d2-gauge-inline .d2-cprog { width: 112px; height: 112px; }
  .d2-gauge-inline .d2-cprog-center b { font-size: 30px; }
}
@media (max-width: 620px) {
  .d2-gauge-inline { grid-template-columns: 1fr; justify-items: start; }
}