/* ============================================================
   DentAI — scroll-scrubbing video showcase (canvas frame sequence)
   Loaded after dark.css; reuses its design tokens.
   ============================================================ */

/* The tall track that provides scroll distance */
.vscrub { position: relative; background: #000; }
.vscrub-track { position: relative; height: 360vh; }   /* total scroll length of the scrub */

/* The pinned viewport */
.vscrub-sticky {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden; background: #000;
  display: grid; place-items: center;
}
.vscrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Edge vignette + top/bottom fades to blend into the dark page */
.vscrub-sticky::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.85) 0%, transparent 16%, transparent 80%, rgba(0,0,0,.92) 100%),
    radial-gradient(120% 130% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Mask the baked-in source watermark (bottom-right) — invisible on black */
.vscrub-wm {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: 320px; height: 90px; pointer-events: none;
  background: radial-gradient(120% 140% at 100% 100%, #000 38%, transparent 72%);
}

/* Loading state */
.vscrub-loader {
  position: absolute; z-index: 5; inset: 0; display: grid; place-items: center;
  background: #000; transition: opacity .6s ease; gap: 0;
}
.vscrub-loader.hidden { opacity: 0; pointer-events: none; }
.vscrub-loader .ring {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(31,227,168,.18); border-top-color: var(--brand);
  animation: vspin .9s linear infinite;
}
.vscrub-loader .pct { position: absolute; font-size: .82rem; font-weight: 700; color: var(--brand); }
@keyframes vspin { to { transform: rotate(360deg); } }

/* ===== Caption overlays ===== */
.vscrub-captions { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vcap {
  position: absolute; max-width: min(46%, 560px); opacity: 0; will-change: opacity, transform;
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.vcap .kick {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: clamp(.72rem,1.1vw,.86rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.vcap .kick::before { content: ""; width: 28px; height: 2px; background: var(--brand); border-radius: 2px; box-shadow: 0 0 10px var(--glow); }
.vcap h3 {
  font-size: clamp(1.7rem, 3.8vw, 3.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: #f1fbf8; text-shadow: 0 2px 30px rgba(0,0,0,.7), 0 0 60px rgba(0,0,0,.5); margin-bottom: 12px;
}
.vcap h3 .grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vcap p { font-size: clamp(.98rem, 1.5vw, 1.22rem); color: #cfe0dc; font-weight: 500; text-shadow: 0 2px 18px rgba(0,0,0,.85); }

/* Entrance offset per align direction; .show flips to resting position */
.vcap[data-align="left"]   { transform: translateY(26px); text-align: right; }   /* RTL: visual right edge */
.vcap[data-align="center"] { transform: translate(-50%, 26px); text-align: center; }
.vcap[data-align="right"]  { transform: translateY(26px); text-align: left; }
.vcap.show { opacity: 1; }
.vcap[data-align="left"].show,
.vcap[data-align="right"].show  { transform: translateY(0); }
.vcap[data-align="center"].show { transform: translate(-50%, 0); }

/* Anchor positions (RTL-aware via logical insets) */
.pos-top-left      { inset-block-start: 12%; inset-inline-start: 6%; }
.pos-top-right     { inset-block-start: 12%; inset-inline-end: 6%; }
.pos-top-center    { inset-block-start: 12%; inset-inline-start: 50%; }
.pos-center        { inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%); }
.pos-center-left   { inset-block-start: 50%; inset-inline-start: 6%; }
.pos-center-right  { inset-block-start: 50%; inset-inline-end: 6%; }
.pos-bottom-left   { inset-block-end: 14%; inset-inline-start: 6%; }
.pos-bottom-right  { inset-block-end: 14%; inset-inline-end: 6%; }
.pos-bottom-center { inset-block-end: 14%; inset-inline-start: 50%; }

/* center positions need the translate baked into entrance/rest */
.vcap.pos-center, .vcap.pos-top-center, .vcap.pos-bottom-center { transform: translate(-50%, 26px); }
.vcap.pos-center { transform: translate(-50%, calc(-50% + 26px)); }
.vcap.pos-center.show { transform: translate(-50%, -50%); }
.vcap.pos-top-center.show, .vcap.pos-bottom-center.show { transform: translate(-50%, 0); }

/* Scroll progress bar (right edge) */
.vscrub-bar { position: absolute; z-index: 4; inset-inline-end: 26px; inset-block: 14% 14%; width: 3px; border-radius: 3px; background: rgba(255,255,255,.1); }
.vscrub-bar .fill { position: absolute; inset-inline: 0; inset-block-start: 0; height: 0; border-radius: 3px; background: var(--brand-grad); box-shadow: 0 0 12px var(--glow); }

/* Scroll hint at start */
.vscrub-hint {
  position: absolute; z-index: 4; inset-block-end: 30px; inset-inline-start: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: .82rem; font-weight: 600; transition: opacity .4s ease;
}
.vscrub-hint .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.35); border-radius: 13px; position: relative; }
.vscrub-hint .mouse::before { content: ""; position: absolute; top: 7px; inset-inline-start: 50%; width: 3px; height: 7px; background: var(--brand); border-radius: 3px; transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);} }

/* Reduced-motion / no-JS fallback: static final frame */
.vscrub-fallback { display: none; }

@media (max-width: 900px) {
  .vscrub-track { height: 280vh; }
  .vcap { max-width: 84%; }
  .pos-top-left, .pos-top-right, .pos-top-center { inset-block-start: 9%; }
  .pos-center-left, .pos-center-right { inset-inline-start: 6%; inset-inline-end: 6%; }
  .vscrub-bar { inset-inline-end: 12px; }
  .vscrub-wm { width: 200px; height: 64px; }
}
@media (max-width: 760px) {
  .vscrub { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vscrub-hint .mouse::before, .vscrub-loader .ring { animation: none; }
}