/* ============================================================
   Smart Video Player — cinematic overlay styles
   ============================================================ */
#svp{position:fixed;inset:0;z-index:200;background:rgba(10,6,6,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
#svp.open{opacity:1;visibility:visible}
.svp-shell{width:min(1180px,94vw);aspect-ratio:16/9;position:relative}
.svp-stage{position:absolute;inset:0;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:pointer}

/* layers + crossfade */
.svp-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.svp-layer.active{opacity:1}
.svp-img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

/* Ken Burns variants */
.kb-in .svp-img{animation:svpKbIn linear forwards}
.kb-pan .svp-img{animation:svpKbPan linear forwards}
@keyframes svpKbIn{from{transform:scale(1) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,1.2%)}}
@keyframes svpKbPan{from{transform:scale(1.12) translate(-2.6%,1.4%)}to{transform:scale(1.18) translate(2.6%,-1.4%)}}

/* title cards */
.svp-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(120% 130% at 50% 20%,#1e3a8a 0%,#0d2142 55%,#050d1e 100%);padding:0 8%}
.svp-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 82% 12%,rgba(201,168,106,.16),transparent 70%),radial-gradient(50% 45% at 12% 88%,rgba(29,78,216,.12),transparent 70%)}
.svp-card-in{position:relative;animation:svpCardIn 1.2s ease both}
.svp-card-in .svp-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:3px;color:#c9a86a;border:1px solid rgba(201,168,106,.45);border-radius:999px;padding:7px 20px;margin-bottom:18px;text-transform:uppercase}
.svp-card-in h2{font-family:var(--font-display);font-size:clamp(1.6rem,4.2vw,3rem);font-weight:800;color:#fff;line-height:1.35;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.svp-card-in p{margin-top:14px;font-size:clamp(.95rem,1.6vw,1.25rem);color:#c9d6ea;font-weight:500}
@keyframes svpCardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* caption */
.svp-caption{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);max-width:82%;text-align:center;font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:600;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.5);opacity:0;transition:opacity .6s;pointer-events:none;line-height:1.6}

/* progress + controls */
.svp-bar{position:absolute;left:18px;right:18px;bottom:52px;height:5px;background:rgba(255,255,255,.22);border-radius:99px;cursor:pointer;z-index:5}
.svp-fill{height:100%;width:0;background:linear-gradient(90deg,#2563eb,#c9a86a);border-radius:99px;position:relative}
.svp-fill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:#c9a86a;box-shadow:0 0 0 4px rgba(201,168,106,.25)}
.svp-ctrl{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;gap:6px;padding:0 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:5;cursor:default}
.svp-btn{width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s}
.svp-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.06)}
.svp-time{font-size:.82rem;color:#c9d6ea;font-variant-numeric:tabular-nums;margin-left:4px}
.svp-time b{color:#fff}
.svp-sp{flex:1}

/* play hint when paused */
#svp:not(.playing) .svp-stage::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(29,78,216,.92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/30px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.45);pointer-events:none;animation:svpPulse 1.8s ease infinite}
#svp.ended .svp-stage::after{display:none}
@keyframes svpPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}

@media (max-width:640px){
  .svp-caption{bottom:66px;font-size:.85rem}
  .svp-bar{bottom:44px;left:12px;right:12px}
  .svp-ctrl{height:42px}
}