/* Videos: home showcase, /videos stage + grid. Loaded only where a video stage is rendered. */
.video-feature{position:relative;overflow-x:clip;padding-block:150px 140px;margin-block:24px}
.torn-line{position:absolute;left:0;right:0;height:66px;pointer-events:none;z-index:2}
.torn-line svg{display:block;width:100%;height:100%;overflow:visible}
.torn-line--top{top:-20px}
.torn-line--bottom{bottom:-20px;transform:scale(-1,-1)}
.video-feature-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr);gap:72px;align-items:center}
.video-feature-copy h2{margin-bottom:28px;transform:rotate(-3deg);font-size:51px}
@media(min-width:901px){.video-feature-copy h2{font-size:calc(1.3 * clamp(39px,4.2vw,59px))}}
@media(min-width:1151px){.video-feature-copy h2{font-size:calc(1.3 * clamp(44px,4.6vw,66px))}}
.video-feature-copy p{max-width:420px}

.video-stage{position:relative;min-width:0}
.video-screen{position:relative;transform:rotate(1.2deg)}
.video-screen:before,.video-screen:after{content:'';position:absolute;z-index:3;width:118px;height:30px;pointer-events:none;box-shadow:0 3px 8px #0005}
.video-screen:before{top:-13px;left:34px;background:#00d5ecd9;transform:rotate(-7deg);clip-path:polygon(3% 0,97% 6%,100% 100%,0 92%)}
.video-screen:after{right:28px;bottom:-12px;background:#ff0794d9;transform:rotate(-4deg);clip-path:polygon(0 8%,100% 0,97% 94%,4% 100%)}
.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#070b12;border:2px solid var(--pink);box-shadow:0 0 0 6px #ff079414,0 0 46px #ff079452,18px 18px 0 #00d5ec2b}
.video-frame iframe,.video-frame video,.video-facade{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame video{background:#000;object-fit:contain}
.video-facade{display:block;padding:0;background:#070b12;cursor:pointer;color:#fff}
.video-facade img{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .4s;filter:saturate(1.08) contrast(1.04)}
.video-facade:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#070e18b8,transparent 42%),radial-gradient(circle at 50% 50%,transparent 32%,#070e1870),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
.video-facade:hover img{transform:scale(1.04)}
.video-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:linear-gradient(135deg,#ef008a,#ff169e);box-shadow:0 0 0 10px #ff079430,0 14px 34px #000a;transition:transform .25s,box-shadow .25s}
.video-play svg{width:38px;height:38px;margin-left:6px}
.video-play:before{content:'';position:absolute;inset:-12px;border-radius:50%;border:2px solid #ff0794;animation:video-pulse 2.4s ease-out infinite}
.video-play-label{position:absolute;left:50%;top:calc(50% + 62px);z-index:1;transform:translateX(-50%) rotate(-5deg);font-size:30px;line-height:1;color:#fff;text-shadow:0 2px 12px #000}
.video-facade:hover .video-play,.video-facade:focus-visible .video-play{transform:scale(1.08);box-shadow:0 0 0 14px #ff079440,0 14px 34px #000a}
.video-facade:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
@keyframes video-pulse{from{transform:scale(1);opacity:.85}to{transform:scale(1.5);opacity:0}}
.video-note{position:absolute;right:-24px;top:-58px;z-index:4;font-size:46px;line-height:.9;color:var(--pink);text-align:right;transform:rotate(-8deg);text-shadow:0 3px 14px #000c;pointer-events:none}
.video-stage.is-switching .video-frame{animation:video-glitch .5s steps(6,end)}
@keyframes video-glitch{0%{filter:brightness(1.9) saturate(0);transform:translateX(-6px)}25%{filter:hue-rotate(70deg) contrast(1.4);transform:translateX(5px);clip-path:inset(12% 0 30% 0)}50%{filter:hue-rotate(-50deg);transform:translateX(-3px);clip-path:inset(40% 0 8% 0)}75%{transform:translateX(2px);clip-path:inset(0)}100%{filter:none;transform:none}}

.video-meta{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:30px;padding-inline:4px}
.video-meta>div{display:grid;gap:5px;min-width:0}
.video-meta small{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--cyan);text-transform:uppercase}
.video-meta strong{font-size:25px;font-weight:400;line-height:1.1}
.video-count{flex:none;margin:0;font-size:12px;letter-spacing:2px;color:var(--muted)}
.video-count b{font-size:22px;color:#fff}

.video-rail-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:22px}
.video-nav{flex:none;border-color:var(--line);font-size:18px;transition:border-color .25s,background .25s}
.video-nav:hover{border-color:var(--pink);background:#ff079422}
.video-rail{position:relative;display:flex;gap:14px;margin:0;padding:8px 2px 10px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.video-rail::-webkit-scrollbar{display:none}
.video-rail li{flex:0 0 clamp(150px,31%,215px);scroll-snap-align:center}
.video-thumb,.video-card{display:grid;gap:9px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.video-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:2px solid #ffffff26;opacity:.55;transition:opacity .25s,border-color .25s,transform .25s,box-shadow .25s}
.video-thumb span{display:-webkit-box;overflow:hidden;font-size:14px;line-height:1.25;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.video-thumb b,.video-card b{margin-right:7px;font-weight:700;color:var(--pink)}
.video-thumb:hover img,.video-thumb:focus-visible img{opacity:.9}
.video-thumb[aria-pressed=true] img{opacity:1;border-color:var(--pink);transform:translateY(-3px);box-shadow:0 0 20px #ff079466}
.video-thumb[aria-pressed=true] span{color:#fff}

.video-page .video-stage{max-width:1060px;margin:10px auto 0}
.video-page .video-screen{transform:rotate(-.7deg)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;margin:80px 0 0;padding:0;list-style:none}
.video-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;border:1px solid #ffffff26;background:#141921;transition:border-color .25s,box-shadow .25s,transform .25s}
.video-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.video-card-media:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#070e18a8,transparent 55%)}
.video-card-media i{position:absolute;left:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pink);color:#fff;box-shadow:0 6px 16px #0008;transition:transform .25s}
.video-card-media i svg{width:18px;height:18px;margin-left:3px}
.video-card-media b{position:absolute;right:14px;bottom:12px;z-index:1;margin:0;font-size:22px;font-weight:800;letter-spacing:1px;color:#fff;text-shadow:0 2px 10px #000}
.video-card:hover .video-card-media img{transform:scale(1.06)}
.video-card:hover .video-card-media i{transform:scale(1.1)}
.video-card[aria-pressed=true] .video-card-media{border-color:var(--pink);box-shadow:0 0 24px #ff079455;transform:rotate(-1deg)}
.video-card-copy{display:grid;gap:4px;padding-inline:2px}
.video-card small{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--cyan);text-transform:uppercase}
.video-card strong{font-size:21px;font-weight:400;line-height:1.15}
.video-empty{margin:40px 0 20px;padding:60px 20px;text-align:center;font-size:20px;color:var(--muted);border:1px dashed var(--line);border-radius:14px}

@media(max-width:900px){
  .video-feature{padding-block:120px 110px}
  .video-feature-grid{grid-template-columns:1fr;gap:56px}
  .video-note{right:-4px;top:-50px;font-size:38px}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;margin-top:60px}
}
@media(max-width:600px){
  .video-feature{padding-block:96px 88px;margin-block:12px}
  .torn-line{height:43px}
  .torn-line--top{top:-13px}
  .torn-line--bottom{bottom:-13px}
  .video-screen,.video-page .video-screen{transform:none}
  .video-screen:before{width:84px;height:24px;left:18px}
  .video-screen:after{width:84px;height:24px;right:14px}
  .video-frame{box-shadow:0 0 0 4px #ff079414,0 0 30px #ff079445,10px 10px 0 #00d5ec2b}
  .video-play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .video-play svg{width:28px;height:28px;margin-left:4px}
  .video-play-label{top:calc(50% + 44px);font-size:24px}
  .video-note{top:-44px;font-size:32px}
  .video-meta{margin-top:24px}
  .video-meta strong{font-size:20px}
  .video-rail-wrap{grid-template-columns:minmax(0,1fr)}
  .video-nav{display:none}
  .video-rail li{flex-basis:58%}
  .video-grid{grid-template-columns:1fr;gap:26px;margin-top:48px}
  .video-card strong{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.video-play:before{animation:none}.video-stage.is-switching .video-frame{animation:none}}

/* Light side */
[data-theme=light] .video-frame{background:#10151c;border-color:#10151c;box-shadow:0 0 0 6px #ff07941c,14px 14px 0 #00d5ec4d}
[data-theme=light] .video-screen:before{background:#00d5ec}
[data-theme=light] .video-screen:after{background:#ff0794}
[data-theme=light] .video-note{text-shadow:none}
[data-theme=light] .torn-line-glow{opacity:.2}
[data-theme=light] .video-meta small,[data-theme=light] .video-card small{color:#00818f}
[data-theme=light] .video-meta strong,[data-theme=light] .video-card strong{color:#10151c}
[data-theme=light] .video-count{color:#4f5660}
[data-theme=light] .video-count b{color:#10151c}
[data-theme=light] .video-nav{border-color:#161a2033;color:#10151c}
[data-theme=light] .video-thumb img{border-color:#161a2026;opacity:.7}
[data-theme=light] .video-thumb span{color:#4f5660}
[data-theme=light] .video-thumb[aria-pressed=true] img{opacity:1;border-color:var(--pink);box-shadow:5px 5px 0 #00d5ec55}
[data-theme=light] .video-thumb[aria-pressed=true] span{color:#10151c}
[data-theme=light] .video-card-media{background:#f7f4f1;border-color:#161a2026;box-shadow:7px 7px 0 #00d5ec22}
[data-theme=light] .video-card[aria-pressed=true] .video-card-media{border-color:var(--pink);box-shadow:7px 7px 0 #ff079433}
[data-theme=light] .video-empty{color:#4f5660;border-color:#161a2033}
@media(max-width:600px){[data-theme=light] .video-frame{box-shadow:0 0 0 4px #ff07941c,9px 9px 0 #00d5ec4d}}