/* =====================================================================
   PlusPak "Play Video" — button + tilt/reflection poster + fly-forward card
   Original code (no libraries, no third-party textures). Prefix: pp-
   ===================================================================== */

/* ---------- poster column: poster, 16px, button ---------- */
.pp-poster-col{display:flex;flex-direction:column;align-items:center;gap:16px}

/* ---------- Play Video button (approved design) ---------- */
.pp-play-btn{
  display:flex;align-items:center;gap:.9rem;width:fit-content;
  padding:.6em 1.6rem;cursor:pointer;
  font:900 30px/1.1 var(--pp-font, Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  letter-spacing:-0.005em;color:#fff;
  border:2.5px solid transparent;border-radius:14px;
  background:
    linear-gradient(#0d0907,#0d0907) padding-box,
    linear-gradient(90deg,#d9561a,#f08a1e 30%,#ffc94a 55%,#f08a1e 80%,#d9561a) border-box;
  background-size:100% 100%,200% 100%;
  background-position:0 0,0 0;
  box-shadow:0 0 26px -8px rgb(240 138 30 / 60%);
  transition:background-position .4s ease,box-shadow .3s ease,transform .2s ease;
}
.pp-play-btn:hover{background-position:0 0,100% 0;box-shadow:0 0 34px -6px rgb(255 201 74 / 65%)}
.pp-play-btn:active{transform:scale(.98)}
.pp-play-btn:focus-visible{outline:2px solid #ffc94a;outline-offset:5px}
.pp-play-btn .pp-play{color:#f58a1f;text-shadow:0 0 14px rgb(240 138 30 / 55%)}
.pp-play-btn .pp-video{color:#fff}
.pp-chev{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.pp-chev-l{color:#f08a1e}
.pp-chev-r{color:#ffc94a}
.pp-play-btn:hover .pp-chev-l{transform:translateX(-3px)}
.pp-play-btn:hover .pp-chev-r{transform:translateX(3px)}

/* ---------- inline poster: hover tilt + reflection ---------- */
.pp-holo{position:relative;display:block;width:fit-content;perspective:900px;touch-action:pan-y;
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg}
.pp-holo-inner{position:relative;display:block;border-radius:14px;overflow:hidden;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
  box-shadow:0 18px 40px -18px rgb(240 138 30 / 45%)}
.pp-holo.is-active .pp-holo-inner{transition:transform .08s linear,box-shadow .3s ease;
  box-shadow:0 26px 50px -16px rgb(240 138 30 / 65%)}
.pp-holo-inner img{display:block;width:100%;height:auto}
.pp-holo.pp-origin-hidden .pp-holo-inner{visibility:hidden}

/* reflection: a soft specular band + a glare spot that follow the pointer, plus a thin rim light.
   No foil/holo texture. Shared by the inline poster and the flown card. */
.pp-holo-inner::after,.pp-fly-face::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255 244 214 / .34), rgb(255 201 74 / .07) 38%, transparent 62%),
    linear-gradient(115deg, transparent calc(var(--mx) - 22%), rgb(255 255 255 / .15) var(--mx), transparent calc(var(--mx) + 22%));
  box-shadow:inset 0 0 0 1px rgb(255 190 110 / .22);
}

/* touch / no-hover devices: gentle idle sway so the effect is discoverable */
@media (hover:none){
  .pp-holo:not(.is-active) .pp-holo-inner{animation:pp-sway 8s ease-in-out infinite}
}
@keyframes pp-sway{0%,100%{transform:rotateX(2deg) rotateY(-6deg)}50%{transform:rotateX(-2deg) rotateY(6deg)}}

/* ---------- fly-forward stage (desktop only; created by JS) ---------- */
html.pp-lock{overflow:hidden}
.pp-stage{position:fixed;inset:0;z-index:2147483000;background:rgb(0 0 0 / .84);backdrop-filter:blur(4px);opacity:0}
.pp-fly{
  position:fixed;left:50%;top:50%;
  --pp-h:min(86vh,160vw);--pp-w:calc(var(--pp-h) * 9 / 16);
  width:var(--pp-w);height:var(--pp-h);
  margin-left:calc(var(--pp-w) / -2);margin-top:calc(var(--pp-h) / -2);
  will-change:transform;transform-style:preserve-3d;
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;
}
.pp-fly-tilt{position:absolute;inset:0;transform-style:preserve-3d;
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pp-fly.is-active .pp-fly-tilt{transition:transform .08s linear}
/* two-sided card: front = video (poster frame), back = the specified rear image (seen during the 360 spin) */
.pp-fly-face,.pp-fly-back{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 40px 90px -30px rgb(240 138 30 / 60%),0 0 0 1px rgb(255 190 110 / .25)}
.pp-fly-face{background:#000}
.pp-fly-back{background:#0d0907;transform:rotateY(180deg)}
/* contain, not cover: the ruled rear art (a phone back, narrower than 9:16) shows whole, with dark side margins */
.pp-fly-back img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.pp-fly-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pp-fly-close{position:absolute;top:-14px;right:-14px;z-index:3;width:44px;height:44px;border-radius:50%;
  border:2px solid #f08a1e;background:#0d0907;color:#fff;font:400 26px/1 system-ui,sans-serif;cursor:pointer;
  opacity:0;transition:opacity .25s ease}
.pp-fly.is-ready .pp-fly-close{opacity:1}
.pp-fly-close:focus-visible{outline:2px solid #ffc94a;outline-offset:3px}

/* ---------- popup dialog (mobile breakpoint + reduced motion fallback) ---------- */
.pp-video-dialog{padding:0;border:0;background:#000;border-radius:14px;overflow:visible;max-width:none;max-height:none}
.pp-video-dialog::backdrop{background:rgb(0 0 0 / .82);backdrop-filter:blur(4px)}
.pp-video-dialog video{display:block;width:min(92vw,48.375vh);aspect-ratio:9/16;border-radius:14px;background:#000}
.pp-video-close{position:absolute;top:-14px;right:-14px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:2px solid #f08a1e;background:#0d0907;color:#fff;font:400 26px/1 system-ui,sans-serif;cursor:pointer}
.pp-video-close:focus-visible{outline:2px solid #ffc94a;outline-offset:3px}

/* ---------- reduced motion: everything static, popup uses the dialog ---------- */
@media (prefers-reduced-motion:reduce){
  .pp-holo-inner,.pp-play-btn,.pp-chev{transition:none !important;animation:none !important}
  .pp-holo-inner{transform:none !important}
}