/* Video production page (/video-production/).
   Loaded after styles.css, only on this page. Nothing here changes the rest of the site.
   Same rules as the homepage step animations: CSS only, accent hue, loop only while on screen
   (main.js adds .is-looping), and a readable still frame when motion is reduced. */

.sa-list, .sa-drive, .sa-pin, .sa-move, .vp-lock { --hue: var(--accent); --hue-text: var(--accent-text); }

/* ---------- Stage bar with SHOOT first ----------
   Chip colors in styles.css are set by position, so a new first chip would shift every color.
   Re-map them one step along, and give SHOOT the accent red of the Rec dot. */
.stages.stages--shoot li { letter-spacing: .06em; padding-left: .3em; padding-right: .3em; }
.stages.stages--shoot li:nth-child(1) { --chip-on-bg: var(--accent); --chip-on-fg: #fff; }
.stages.stages--shoot li:nth-child(2) { --chip-on-bg: #4a78b0; --chip-on-fg: #fff; }
.stages.stages--shoot li:nth-child(3) { --chip-on-bg: #d9a62e; --chip-on-fg: #191819; }
.stages.stages--shoot li:nth-child(4) { --chip-on-bg: #3f7f52; --chip-on-fg: #fff; }
.stages.stages--shoot li:nth-child(5) { --chip-on-bg: #8a52b0; --chip-on-fg: #fff; }
.stages.stages--shoot li:nth-child(6) { --chip-on-bg: #18847c; --chip-on-fg: #fff; }
.stages.stages--shoot li:nth-child(7) { --chip-on-bg: #b8507f; --chip-on-fg: #fff; }

/* ---------- Monitor: a dark frame so the on-set lighting diagram reads on light panels ---------- */
.vp-monitor { padding: .55em; border-radius: .7em; background: var(--panel-dark); }

/* ---------- Plan: shot list that ticks off, then "Call sheet sent" ---------- */
.sa-list { display: flex; flex-direction: column; gap: .8em; font-size: .85em; }
.sa-list__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.sa-list__rows li {
  display: grid; grid-template-columns: 1.15em 1fr auto; align-items: center; gap: .65em;
  padding: .55em .7em; border-radius: .55em; background: var(--line);
  color: var(--ink); font-weight: 700; font-size: .92em; line-height: 1.1;
}
.sa-list__rows i {
  position: relative; width: 1.15em; height: 1.15em; border-radius: .3em;
  border: 2px solid var(--hue); background: var(--hue);
}
.sa-list__rows i::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .3em; height: .55em;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.sa-list__rows em {
  font-style: normal; font-size: .74em; font-weight: 600; opacity: .72; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.sa-list__label, .sa-drive__label, .sa-pin__label, .sa-move__label { display: grid; font-size: .82em; font-weight: 600; letter-spacing: .02em; }
.sa-list__label > span, .sa-drive__label > span, .sa-pin__label > span, .sa-move__label > span { grid-area: 1 / 1; }
.sa-list__label em, .sa-drive__label em, .sa-pin__label em, .sa-move__label em, .vp-lock em { font-style: normal; color: var(--hue-text); }
.sa-list__wip { color: var(--ink-55); opacity: 0; }

@keyframes vp-wip  { 0%, 54% { opacity: 1; } 57%, 95% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes vp-done { 0%, 56% { opacity: 0; } 59%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
.anim .sa-list__wip  { animation: vp-wip var(--cycle) ease var(--phase) infinite both; }
.anim .sa-list__done { animation: vp-done var(--cycle) ease var(--phase) infinite both; }

/* ---------- Footage: a drive offloads, then "Footage handed off" (dark card) ---------- */
.sa-drive { display: flex; flex-direction: column; gap: .9em; color: var(--on-dark); }
.sa-drive__body {
  display: flex; align-items: center; gap: .75em; padding: .95em 1em; border-radius: .6em;
  background: var(--on-dark-fill); border: 1px solid var(--on-dark-line);
  font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.sa-drive__led { width: .7em; height: .7em; border-radius: 50%; background: var(--accent); flex: none; }
.sa-drive__size { margin-left: auto; color: var(--on-dark-60); }
.sa-drive__clips { display: grid; grid-template-columns: repeat(8, 1fr); gap: .3em; }
.sa-drive__clips i { aspect-ratio: 16 / 10; border-radius: .2em; background: var(--on-dark-60); }
.sa-drive__bar { height: .4em; border-radius: 50em; background: var(--on-dark-line); overflow: hidden; }
.sa-drive__bar b { display: block; height: 100%; border-radius: inherit; background: var(--hue); transform-origin: left; }
.sa-drive__wip { color: var(--on-dark-60); opacity: 0; }

@keyframes vp-bar { 0%, 8% { transform: scaleX(0); } 58%, 90% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes vp-led { 0%, 8% { opacity: .35; } 10% { opacity: 1; } 14% { opacity: .35; } 18% { opacity: 1; } 22% { opacity: .35; } 26% { opacity: 1; } 30% { opacity: .35; } 34% { opacity: 1; } 38% { opacity: .35; } 42% { opacity: 1; } 46% { opacity: .35; } 50% { opacity: 1; } 54% { opacity: .35; } 58%, 100% { opacity: 1; } }
.anim .sa-drive__bar b { animation: vp-bar var(--cycle) ease-in-out var(--phase) infinite both; }
.anim .sa-drive__led   { animation: vp-led var(--cycle) steps(1) var(--phase) infinite both; }
.anim .sa-drive__wip   { animation: vp-wip var(--cycle) ease var(--phase) infinite both; }
.anim .sa-drive__done  { animation: vp-done var(--cycle) ease var(--phase) infinite both; }

/* ---------- Local, or quoted: a pin inside city limits, then one outside ---------- */
.sa-pin { display: flex; flex-direction: column; gap: .9em; }
.sa-pin__map {
  position: relative; aspect-ratio: 16 / 9; border-radius: .6em; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.6em, var(--line) 1.6em calc(1.6em + 1px)),
    repeating-linear-gradient(90deg, transparent 0 1.6em, var(--line) 1.6em calc(1.6em + 1px)),
    var(--panel-light);
}
.card .sa-pin__map { background-color: var(--panel-light); }
.sa-pin__zone {
  position: absolute; left: 4%; top: 12%; width: 60%; height: 76%;
  border: 2px dashed var(--hue); border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.sa-pin__zone em {
  position: absolute; left: 50%; top: 24%; transform: translateX(-50%); white-space: nowrap;
  font-style: normal; font-size: .5em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hue-text);
}
.sa-pin__drop {
  position: absolute; width: 1.1em; height: 1.1em; margin: -1.25em 0 0 -.55em;
  border-radius: 50% 50% 50% 0; background: var(--hue); transform: rotate(-45deg);
}
.sa-pin__drop::after { content: ""; position: absolute; left: 50%; top: 50%; width: .4em; height: .4em; margin: -.2em 0 0 -.2em; border-radius: 50%; background: #fff; }
.sa-pin__drop--in  { left: 34%; top: 70%; }
.sa-pin__drop--out { left: 88%; top: 44%; background: var(--ink); }
.sa-pin__drop--out::after { background: var(--panel-light); }
.sa-pin__route {
  position: absolute; left: 63%; top: 52%; width: 22%; height: 0;
  border-top: 2px dashed var(--ink-55); transform-origin: left center; transform: rotate(-14deg);
}
.sa-pin__out { color: var(--ink-70); }

/* Without motion, both outcomes show as two lines. */
html:not(.anim) .sa-pin__label, html:not(.anim) .sa-move__label { display: flex; flex-direction: column; gap: .25em; }
html:not(.anim) .sa-move__a, html:not(.anim) .sa-move__b { display: none; }

@keyframes vp-drop-in {
  0%, 5%    { opacity: 0; transform: translateY(-1.4em) rotate(-45deg); }
  10%       { opacity: 1; transform: translateY(.15em) rotate(-45deg); }
  13%, 90%  { opacity: 1; transform: rotate(-45deg); }
  95%, 100% { opacity: 0; transform: rotate(-45deg); }
}
@keyframes vp-drop-out {
  0%, 48%   { opacity: 0; transform: translateY(-1.4em) rotate(-45deg); }
  53%       { opacity: 1; transform: translateY(.15em) rotate(-45deg); }
  56%, 90%  { opacity: 1; transform: rotate(-45deg); }
  95%, 100% { opacity: 0; transform: rotate(-45deg); }
}
@keyframes vp-route { 0%, 52% { transform: rotate(-14deg) scaleX(0); } 60%, 90% { transform: rotate(-14deg) scaleX(1); } 95%, 100% { transform: rotate(-14deg) scaleX(0); } }
@keyframes vp-in-label  { 0%, 9% { opacity: 0; } 13%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes vp-out-label { 0%, 51% { opacity: 0; } 55%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
.anim .sa-pin__drop--in  { animation: vp-drop-in var(--cycle) var(--ease-out) var(--phase) infinite both; }
.anim .sa-pin__drop--out { animation: vp-drop-out var(--cycle) var(--ease-out) var(--phase) infinite both; }
.anim .sa-pin__route     { animation: vp-route var(--cycle) var(--ease-out) var(--phase) infinite both; }
.anim .sa-pin__in        { animation: vp-in-label var(--cycle) ease var(--phase) infinite both; }
.anim .sa-pin__out       { animation: vp-out-label var(--cycle) ease var(--phase) infinite both; }

/* ---------- Half to book: the refund meter, stopping at 50% ---------- */
.sa-refund--deposit { --pct: 50; }
.sa-refund--deposit .sa-refund__label, .sa-refund--deposit .sa-refund__scale { color: var(--ink-70); }
.sa-refund--deposit .sa-refund__meter b { transform: scaleX(.5); }
.sa-refund--deposit .sa-refund__meter i { left: 50%; }
.sa-refund--deposit .sa-refund__scale span:nth-child(2) { left: 50%; }
.vp-lock { margin-top: .9em; font-size: .82em; font-weight: 600; }
@keyframes vp-meter-50 { 0%, 6% { transform: scaleX(0); } 44%, 88% { transform: scaleX(.5); } 96%, 100% { transform: scaleX(0); } }
@keyframes vp-pct-50 { 0%, 6% { --pct: 0; } 44%, 88% { --pct: 50; } 96%, 100% { --pct: 0; } }
@keyframes vp-lock { 0%, 45% { opacity: 0; } 49%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.anim .sa-refund--deposit { animation-name: vp-pct-50; }
.anim .sa-refund--deposit .sa-refund__meter b { animation-name: vp-meter-50; }
.anim .vp-lock { animation: vp-lock var(--cycle) ease var(--phase) infinite both; }

/* ---------- Need a new date: the shoot day moves to next week ---------- */
.sa-move { display: flex; flex-direction: column; gap: .7em; --gap: .3em; }
.sa-move__days, .sa-move__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
.sa-move__days { text-align: center; font-size: .72em; font-weight: 700; color: var(--ink-55); }
.sa-move__grid { position: relative; }
.sa-move__grid span { height: 1.7em; border-radius: .35em; background: var(--line); }
.sa-move__mark, .sa-move__ghost {
  position: absolute; left: 0; top: 0; height: 1.7em; width: calc((100% - 6 * var(--gap)) / 7);
  border-radius: .35em;
}
.sa-move__mark {
  display: grid; place-items: center; background: var(--hue); color: #fff;
  font-size: 1em; transform: translate(calc(1 * (100% + var(--gap))), calc(1 * (100% + var(--gap))));
}
.sa-move__mark::after { content: ""; width: .45em; height: .45em; border-radius: 50%; background: #fff; }
.sa-move__ghost { border: 2px dashed var(--ink-55); transform: translate(calc(3 * (100% + var(--gap))), 0); }
.sa-move__a, .sa-move__b { color: var(--ink-55); opacity: 0; }

@keyframes vp-move {
  0%, 6%    { opacity: 0; transform: translate(calc(3 * (100% + var(--gap))), -.6em); }
  10%, 38%  { opacity: 1; transform: translate(calc(3 * (100% + var(--gap))), 0); }
  42%       { opacity: 1; transform: translate(calc(3 * (100% + var(--gap))), -.35em) scale(1.08); }
  54%, 90%  { opacity: 1; transform: translate(calc(1 * (100% + var(--gap))), calc(1 * (100% + var(--gap)))); }
  95%, 100% { opacity: 0; transform: translate(calc(1 * (100% + var(--gap))), calc(1 * (100% + var(--gap)))); }
}
@keyframes vp-ghost { 0%, 44% { opacity: 0; } 50%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes vp-a { 0%, 8% { opacity: 0; } 11%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes vp-b { 0%, 40% { opacity: 0; } 43%, 53% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes vp-c { 0%, 55% { opacity: 0; } 58%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
.anim .sa-move__mark  { animation: vp-move var(--cycle) var(--ease-in-out) var(--phase) infinite both; }
.anim .sa-move__ghost { animation: vp-ghost var(--cycle) ease var(--phase) infinite both; }
.anim .sa-move__a     { animation: vp-a var(--cycle) ease var(--phase) infinite both; }
.anim .sa-move__b     { animation: vp-b var(--cycle) ease var(--phase) infinite both; }
.anim .sa-move__c     { animation: vp-c var(--cycle) ease var(--phase) infinite both; }

/* ---------- What's included: four blocks + a tall footage block ---------- */
.grid--included { grid-template-columns: .85fr 2.6fr; gap: 2.4em 3em; }
.vp-included { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr 1fr; gap: .7em; min-height: 0; }
.vp-included .card { gap: 1em; justify-content: space-between; }
.vp-stat { color: var(--on-dark); font-size: 1.75em; font-weight: 800; font-stretch: 112%; line-height: 1.1; white-space: nowrap; }
.vp-stat span { color: var(--on-dark-50); font-weight: 300; }
.vp-included .card--tall { grid-column: 3; grid-row: 1 / span 2; justify-content: space-between; }
.vp-included .card--tall .step-anim { flex: 1; }

/* ---------- Packages ---------- */
.vp-best { margin-top: .6em; max-width: 22em; min-height: 3em; }
.vp-notes { display: flex; flex-direction: column; gap: .5em; margin-top: 1.2em; max-width: 19em; }

@media (max-width: 991px), (hover: none) and (pointer: coarse) {
  .grid--included, .vp-included { grid-template-columns: 1fr; grid-template-rows: none; }
  .vp-included .card--tall { grid-column: auto; grid-row: auto; }
}
@media (min-width: 768px) and (max-width: 991px), (min-width: 768px) and (hover: none) and (pointer: coarse) {
  .vp-included { grid-template-columns: 1fr 1fr; }
  .vp-included .card--tall { grid-column: 1 / -1; }
}

/* Generated per-row and per-clip timings */
@keyframes vp-tick-0 { 0%, 10% { background: transparent; border-color: var(--line-strong); transform: none; } 12% { background: var(--hue); border-color: var(--hue); transform: scale(1.25); } 14%, 90% { background: var(--hue); border-color: var(--hue); transform: none; } 95%, 100% { background: transparent; border-color: var(--line-strong); transform: none; } }
@keyframes vp-row-0 { 0%, 10% { color: var(--ink-55); } 13%, 90% { color: var(--ink); } 95%, 100% { color: var(--ink-55); } }
.anim .sa-list__rows li:nth-child(1) { animation: vp-row-0 var(--cycle) ease var(--phase) infinite both; }
.anim .sa-list__rows li:nth-child(1) i { animation: vp-tick-0 var(--cycle) var(--ease-out) var(--phase) infinite both; }
@keyframes vp-tick-1 { 0%, 21% { background: transparent; border-color: var(--line-strong); transform: none; } 23% { background: var(--hue); border-color: var(--hue); transform: scale(1.25); } 25%, 90% { background: var(--hue); border-color: var(--hue); transform: none; } 95%, 100% { background: transparent; border-color: var(--line-strong); transform: none; } }
@keyframes vp-row-1 { 0%, 21% { color: var(--ink-55); } 24%, 90% { color: var(--ink); } 95%, 100% { color: var(--ink-55); } }
.anim .sa-list__rows li:nth-child(2) { animation: vp-row-1 var(--cycle) ease var(--phase) infinite both; }
.anim .sa-list__rows li:nth-child(2) i { animation: vp-tick-1 var(--cycle) var(--ease-out) var(--phase) infinite both; }
@keyframes vp-tick-2 { 0%, 32% { background: transparent; border-color: var(--line-strong); transform: none; } 34% { background: var(--hue); border-color: var(--hue); transform: scale(1.25); } 36%, 90% { background: var(--hue); border-color: var(--hue); transform: none; } 95%, 100% { background: transparent; border-color: var(--line-strong); transform: none; } }
@keyframes vp-row-2 { 0%, 32% { color: var(--ink-55); } 35%, 90% { color: var(--ink); } 95%, 100% { color: var(--ink-55); } }
.anim .sa-list__rows li:nth-child(3) { animation: vp-row-2 var(--cycle) ease var(--phase) infinite both; }
.anim .sa-list__rows li:nth-child(3) i { animation: vp-tick-2 var(--cycle) var(--ease-out) var(--phase) infinite both; }
@keyframes vp-tick-3 { 0%, 43% { background: transparent; border-color: var(--line-strong); transform: none; } 45% { background: var(--hue); border-color: var(--hue); transform: scale(1.25); } 47%, 90% { background: var(--hue); border-color: var(--hue); transform: none; } 95%, 100% { background: transparent; border-color: var(--line-strong); transform: none; } }
@keyframes vp-row-3 { 0%, 43% { color: var(--ink-55); } 46%, 90% { color: var(--ink); } 95%, 100% { color: var(--ink-55); } }
.anim .sa-list__rows li:nth-child(4) { animation: vp-row-3 var(--cycle) ease var(--phase) infinite both; }
.anim .sa-list__rows li:nth-child(4) i { animation: vp-tick-3 var(--cycle) var(--ease-out) var(--phase) infinite both; }

@keyframes vp-clip-0 { 0%, 10% { background: var(--on-dark-line); } 13%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(1) { animation: vp-clip-0 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-1 { 0%, 16% { background: var(--on-dark-line); } 19%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(2) { animation: vp-clip-1 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-2 { 0%, 22% { background: var(--on-dark-line); } 25%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(3) { animation: vp-clip-2 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-3 { 0%, 28% { background: var(--on-dark-line); } 31%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(4) { animation: vp-clip-3 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-4 { 0%, 34% { background: var(--on-dark-line); } 37%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(5) { animation: vp-clip-4 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-5 { 0%, 40% { background: var(--on-dark-line); } 43%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(6) { animation: vp-clip-5 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-6 { 0%, 46% { background: var(--on-dark-line); } 49%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(7) { animation: vp-clip-6 var(--cycle) ease var(--phase) infinite both; }
@keyframes vp-clip-7 { 0%, 52% { background: var(--on-dark-line); } 55%, 90% { background: var(--on-dark-60); } 95%, 100% { background: var(--on-dark-line); } }
.anim .sa-drive__clips i:nth-child(8) { animation: vp-clip-7 var(--cycle) ease var(--phase) infinite both; }