/* ==========================================================================
   Videography / Photography: page-only styles (film-set motifs)
   Uses the shared tokens from style.css only. Prefix: .vp-
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.vp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1.25rem; }
.vp-kicker .rec { color: var(--c-accent); }
.vp-kicker .timecode { font-size: .78rem; color: var(--c-text); }
.vp-hero h1 { margin-top: 1rem; font-size: clamp(2.1rem, .9rem + 3.1vw, 4.2rem); }
.vp-hero .vf-hud__row:last-child { justify-content: flex-end; }

.vp-coverage { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.vp-coverage li { display: flex; align-items: center; gap: .85rem; }
.vp-coverage strong { display: block; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.vp-coverage small { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.vp-coverage__flag {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  font-family: var(--f-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em;
  background: var(--c-obsidian); color: var(--c-ivory);
  box-shadow: 0 8px 18px -10px rgba(10,10,12,.6);
}
.vp-coverage__flag--muted { background: transparent; color: var(--c-text); border: 1.5px dashed var(--line-input); box-shadow: none; }

.vp-hero__media { padding-bottom: 1.5rem; }
.vp-hero__media .viewfinder { position: relative; }
.vp-thirds {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--r-card);
  background:
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) 0 66.666% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(10,10,12,.38), rgba(10,10,12,0) 26%, rgba(10,10,12,0) 70%, rgba(10,10,12,.45));
}

/* Clapper slate chip overlapping the hero frame */
.vp-slate {
  position: absolute; z-index: 4; left: clamp(-8px, -2vw, -32px); bottom: -.5rem;
  width: clamp(168px, 16vw, 210px); padding: 0 0 .85rem; border-radius: 14px; overflow: hidden; color: var(--c-text);
}
.vp-slate__bar {
  display: block; height: 16px; margin-bottom: .75rem;
  background: repeating-linear-gradient(-45deg, var(--c-obsidian) 0 10px, var(--c-ivory) 10px 20px);
  border-bottom: 2px solid var(--c-obsidian);
  transform-origin: 0 100%; animation: vp-clap 6s var(--ease-out) infinite;
}
.vp-slate dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-inline: .9rem; }
.vp-slate dl > div + div { border-left: 1px solid var(--line); padding-left: .6rem; }
.vp-slate dt { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.vp-slate dd { margin: .15rem 0 0; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em; }
.vp-slate__prod { margin: .7rem .9rem 0; padding-top: .55rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
@keyframes vp-clap { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -9deg; } 94% { rotate: 0deg; } }
@media (max-width: 599px) {
  .vp-slate { left: 10px; bottom: -.25rem; width: 150px; }
  .vp-slate dd { font-size: 1.05rem; }
}

/* Bento ------------------------------------------------------------------ */
.vp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vp-shot { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.vp-shot::before { content: ""; width: 6px; height: 6px; background: var(--c-signal-btn); }
.vp-bento .bento__media { position: relative; }
.vp-media__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .65rem; border-radius: 999px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(10,10,12,.55); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vp-media__tag .rec__dot { width: 7px; height: 7px; }
.vp-bento .bento__media img { transition: scale 1.1s var(--ease-out); }
.vp-bento .bento__item:hover .bento__media img { scale: 1.05; }
.vp-formats { margin-top: .25rem; }

/* Mini edit timeline in the corporate-video card */
.vp-scrub { position: relative; overflow: hidden; display: grid; gap: .45rem; padding: .8rem; border-radius: 12px; background: var(--c-bg-alt); border: 1px solid var(--line); }
.vp-scrub__track { position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: center; height: 20px; }
.vp-scrub__track span { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; color: var(--c-text-muted); }
.vp-scrub__track i, .vp-scrub__track b { position: absolute; top: 2px; bottom: 2px; left: calc(26px + (100% - 26px) * var(--s) / 100); width: calc((100% - 26px) * var(--w) / 100 - 4px); border-radius: 3px; }
.vp-scrub__track i { background: var(--c-obsidian); opacity: .82; }
.vp-scrub__track i:nth-of-type(2) { background: var(--c-signal-btn); opacity: 1; }
.vp-scrub__track b { background: repeating-linear-gradient(90deg, rgba(10,10,12,.35) 0 2px, transparent 2px 5px); -webkit-mask-image: linear-gradient(90deg, #000 0 20%, rgba(0,0,0,.5) 35%, #000 55%, rgba(0,0,0,.6) 75%, #000); mask-image: linear-gradient(90deg, #000 0 20%, rgba(0,0,0,.5) 35%, #000 55%, rgba(0,0,0,.6) 75%, #000); }
.vp-scrub__head { position: absolute; top: .45rem; bottom: .45rem; left: calc(.8rem + 26px); right: .8rem; pointer-events: none; animation: vp-scrub 9s linear infinite; }
.vp-scrub__head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-signal); box-shadow: 0 0 10px rgba(255,59,47,.7); }
.vp-scrub__head::after { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 8px; background: var(--c-signal); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes vp-scrub { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Dailies: dark band + film strip --------------------------------------- */
.vp-dailies { overflow: hidden; }
.vp-dailies .section-head { position: relative; z-index: 1; }
.vp-strip { --fh: clamp(210px, 28vw, 380px); position: relative; z-index: 1; }
.vp-strip .reel__viewport { padding-block: .5rem 2rem; }
.vp-strip .reel__track {
  position: relative; align-items: flex-start; gap: 14px; padding-block: 34px;
  background: #17171C; box-shadow: inset 0 1px 0 rgba(246,242,239,.05), inset 0 -1px 0 rgba(246,242,239,.05);
}
.vp-strip .reel__track::before, .vp-strip .reel__track::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='7' y='2' width='14' height='10' rx='2.5' fill='%230A0A0C' stroke='%23F6F2EF' stroke-opacity='.14'/%3E%3C/svg%3E") 0 0 / 28px 14px repeat-x;
}
.vp-strip .reel__track::before { top: 10px; }
.vp-strip .reel__track::after { bottom: 10px; }
.vp-frame { width: calc(var(--fh) * 1.5); gap: .6rem; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
.vp-frame--portrait { width: calc(var(--fh) * .78); }
.vp-frame .reel-card__media { aspect-ratio: auto; height: var(--fh); border-radius: 4px; box-shadow: 0 0 0 1px rgba(246,242,239,.06); background: #0F0F12; }
.vp-frame .reel-card__media img { filter: saturate(.85) contrast(1.02); }
.vp-frame .reel-card__media:hover img, .vp-frame .reel-card__media:focus-visible img { filter: saturate(1.05); }
.vp-frame .reel-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,12,0) 60%, rgba(10,10,12,.45)); }
.vp-frame__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.vp-frame__meta span:first-child { color: #FF8A5C; }
.vp-frame-end { width: calc(var(--fh) * .78); }
.vp-frame-end a { aspect-ratio: auto; height: var(--fh); border-radius: 4px; }
.vp-frame-end__title { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.vp-strip .reel__controls { position: relative; z-index: 1; margin-top: .5rem; }
.vp-strip__tc { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-text-muted); white-space: nowrap; }
.vp-strip__tc .rec__dot { width: 7px; height: 7px; }
@media (max-width: 559px) { .vp-strip__tc { margin-left: auto; } }

/* FAQ head sticks beside the accordion on desktop */
@media (min-width: 900px) { .vp-faq-head { position: sticky; top: var(--sticky-top); } }

/* Pause loops off-screen + reduced motion */
.is-offscreen .vp-scrub__head, .is-offscreen .vp-slate__bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .vp-scrub__head { animation: none; transform: translateX(38%); }
  .vp-slate__bar { animation: none; }
}