/* ============================================================================
 * pt-media.css — reel-grade motion + cinematic media layer.
 * ----------------------------------------------------------------------------
 * Pairs with pt-media.js. Provides:
 *   • .pt-media           cinematic media frame (image / <picture> / <video>)
 *   • .pt-media--kb        slow Ken Burns push-in (the "reel" feel on stills)
 *   • [data-reveal]        scroll-triggered staggered entrance
 *   • [data-parallax]      depth-scroll translate
 *   • .pt-shine            one-pass sheen sweep for hero surfaces
 * Everything degrades to a static, fully-legible layout under
 * prefers-reduced-motion — motion is an enhancement, never a dependency.
 * ========================================================================== */

/* ── cinematic media frame ────────────────────────────────────────────────── */
.pt-media{
  position:relative; overflow:hidden; border-radius:inherit;
  background:#120d0a; isolation:isolate;
}
.pt-media img,.pt-media video{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:var(--pt-focal,50% 45%);
  will-change:transform;
}
/* Warm cinematic grade + a soft vignette so text over media stays readable. */
.pt-media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 120% at 50% 0%,transparent 55%,rgba(18,13,10,.35) 100%),
    linear-gradient(180deg,transparent 40%,rgba(18,13,10,.28) 100%);
  mix-blend-mode:multiply;
}
.pt-media[data-loaded="false"]{
  background:
    linear-gradient(110deg,#1a1310 8%,#241a14 18%,#1a1310 33%) 0 0 / 220% 100%;
  animation:pt-shimmer 1.4s ease-in-out infinite;
}
@keyframes pt-shimmer{to{background-position:-220% 0}}

/* ── Ken Burns: a slow, alive push-in on stills ───────────────────────────── */
.pt-media--kb img{ animation:pt-kenburns 18s ease-in-out infinite alternate; transform-origin:var(--pt-focal,50% 45%); }
@keyframes pt-kenburns{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.12) translate3d(0,-1.5%,0); }
}

/* ── scroll reveal (staggered) ────────────────────────────────────────────── */
[data-reveal]{
  opacity:0; transform:translate3d(0,22px,0) scale(.985);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--pt-stagger,0) * 70ms);
  will-change:opacity,transform;
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="right"]{ transform:translate3d(28px,0,0); }
[data-reveal="left"]{ transform:translate3d(-28px,0,0); }
[data-reveal="zoom"]{ transform:scale(.92); }

/* ── one-pass sheen sweep (hero glass / CTA surfaces) ─────────────────────── */
.pt-shine{ position:relative; overflow:hidden; }
.pt-shine::before{
  content:""; position:absolute; top:-30%; left:-60%; width:40%; height:160%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); animation:pt-sheen 6.5s ease-in-out 1.2s infinite;
}
@keyframes pt-sheen{ 0%,60%{left:-60%} 78%,100%{left:130%} }

/* ── reduced motion: strip every animation, keep full legibility ──────────── */
@media (prefers-reduced-motion:reduce){
  .pt-media--kb img{ animation:none; transform:none; }
  .pt-media[data-loaded="false"]{ animation:none; }
  .pt-shine::before{ animation:none; display:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}