/* Raphiel scenes — "smart analogue": pencil strokes, draw-on, the itten colour
   burst. Rendered into [data-vis] frames by js/scenes.js. */

.vis-frame.has-scene { background-image: none; border-style: solid; border-color: var(--rule); overflow: hidden; }
.vis-frame.has-scene .vis-label { display: none; }

.scene { width: 100%; height: 100%; display: block; }
.scene text { font-family: var(--font-mono); fill: var(--ink-muted); }
.scene .s-name { font-family: var(--font-display); fill: var(--ink); }
.scene .s-ink { stroke: var(--ink); }
.scene .s-faint { stroke: var(--ink-faint); }

/* hand-drawn wobble */
.scene .pencil { filter: url(#rph-pencil); }

/* draw-on: dash the stroke, release it when the scene plays */
.scene .draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.scene.play .draw { animation: rph-draw .9s ease forwards; animation-delay: var(--d, 0s); }
@keyframes rph-draw { to { stroke-dashoffset: 0; } }

/* pop-in forms */
.scene .pop { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.scene.play .pop { animation: rph-pop .5s cubic-bezier(.2,1.3,.4,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rph-pop { to { opacity: 1; transform: scale(1); } }

/* fade-in (labels, chips) */
.scene .fade { opacity: 0; }
.scene.play .fade { animation: rph-fade .5s ease forwards; animation-delay: var(--d, 0s); }
@keyframes rph-fade { to { opacity: 1; } }

/* needs-review: amber dashed pulsing ring */
.scene .review-ring { fill: none; stroke: var(--conf-review); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0; }
.scene.play .review-ring { animation: rph-fade .5s ease forwards var(--d,0s), rph-spin 9s linear infinite var(--d,0s); transform-box: fill-box; transform-origin: center; }
@keyframes rph-spin { to { transform: rotate(360deg); } }

/* geometry overlay boxes */
.scene .scanbar { fill: var(--itten-blue); opacity: .14; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.scene .gbox { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0; transition: opacity .3s; }
.scene .gbox.active { opacity: 1; }
.scene .gbox.flag-review   { stroke: var(--conf-review); }
.scene .gbox.flag-conflict { stroke: var(--conf-conflict); }
.scene .chip rect { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.2; transition: stroke .25s; }
.scene .chip.active rect { stroke: var(--ink); }
.scene .chip.flag-review.active rect   { stroke: var(--conf-review); }
.scene .chip.flag-conflict.active rect { stroke: var(--conf-conflict); }
.scene .flagmark { font-size: 14px; opacity: 0; transition: opacity .25s; }
.scene .chip.active .flagmark { opacity: 1; }
.scene .mk-review   { fill: var(--conf-review); }
.scene .mk-conflict { fill: var(--conf-conflict); }
.scene .g-lbl  { fill: var(--ink-muted); font-size: 10px; }
.scene .g-val  { fill: var(--ink); font-size: 16px; font-family: var(--font-display); }
.scene .g-head { fill: var(--ink-faint); font-size: 9px; letter-spacing: .5px; }
.scene .g-t    { fill: var(--ink); font-size: 15px; font-family: var(--font-display); }
.scene .g-note { font-size: 12px; fill: var(--conf-conflict); opacity: 0; transition: opacity .3s; }
.scene .g-note.active { opacity: 1; }
.scene .leader { stroke: var(--itten-blue); stroke-width: 1.6; stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0; transition: stroke-dashoffset .5s ease, opacity .2s; }
.scene .leader.active { opacity: 1; stroke-dashoffset: 0; }

/* scan sweep */
.scene .scan { opacity: 0; }
.scene.play .scan { animation: rph-scan 2.4s ease-in-out forwards; }
@keyframes rph-scan { 0%{opacity:0; transform:translateY(0);} 10%{opacity:.8;} 90%{opacity:.8;} 100%{opacity:0; transform:translateY(var(--scan-h,120px));} }

/* doc card */
.scene .card { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 1.5; }
.scene .ruled { stroke: var(--rule); stroke-width: 1; }
.scene .underline { stroke: var(--itten-blue); stroke-width: 2; }

/* note label */
.scene .note { font-size: 11px; }
.scene .note-review   { fill: var(--conf-review); }
.scene .note-conflict { fill: var(--conf-conflict); }

/* annotation walkthrough (How it works) */
.scene .ahead   { fill: var(--ink); font-size: 13px; letter-spacing: .5px; }
.scene .asub    { fill: var(--ink-muted); font-size: 11px; }
.scene .atext   { fill: var(--ink); font-size: 15px; }
.scene .adim    { fill: var(--ink-faint); font-size: 15px; }
.scene .aval    { fill: var(--ink); font-weight: 700; }

/* timeline-driven: each element animates when the runner adds .go */
.scene .aring   { fill: none; stroke-width: 2.2; stroke-dasharray: 340; stroke-dashoffset: 340; }
.scene .aring.go  { animation: rph-ring .8s ease forwards; }
.scene .alink   { fill: none; stroke-width: 2; stroke-dasharray: 480; stroke-dashoffset: 480; }
.scene .alink.go  { animation: rph-ring .95s ease forwards; }
@keyframes rph-ring { to { stroke-dashoffset: 0; } }
.scene .alabel  { font-size: 13px; opacity: 0; }
.scene .alinked { font-size: 15px; fill: var(--conf-ok); opacity: 0; }
.scene .alabel.go, .scene .alinked.go { animation: rph-show .4s ease forwards; }
@keyframes rph-show { to { opacity: 1; } }
.scene .acaption { font-size: 14px; fill: var(--ink-muted); }
.scene .acursor { fill: var(--itten-blue); opacity: 0; }
.scene .acursor.go { animation: rph-asweep 1.3s ease forwards; }
@keyframes rph-asweep {
  0%   { opacity: 0;   transform: translateY(-6px); }
  15%  { opacity: .14; }
  85%  { opacity: .14; }
  100% { opacity: 0;   transform: translateY(150px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene .draw { stroke-dashoffset: 0; }
  .scene .pop, .scene .fade, .scene .review-ring { opacity: 1; transform: none; animation: none; }
}