.shorts-reel{position:relative;overflow:hidden;padding:96px 0 104px;background:radial-gradient(circle at 12% 0,rgba(0,137,150,.35),transparent 40%),radial-gradient(circle at 92% 100%,rgba(168,239,236,.18),transparent 38%),linear-gradient(180deg,#0f3437,#123f43);color:#fff}
.shorts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.shorts-reel .eyebrow{color:#8edddb}
.shorts-reel .section-title{margin-bottom:0;color:#fff}
.shorts-channel{flex:0 0 auto;padding:12px 20px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-weight:800;font-size:14px;color:#fff;transition:.25s}
.shorts-channel:hover{background:#fff;color:var(--brand-dark)}
.shorts-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.shorts-track{display:flex;width:max-content;animation:shortsScroll 55s linear infinite}
.shorts-group{display:flex;gap:22px;padding:14px 11px}
.shorts-card{position:relative;flex:0 0 auto;width:220px;aspect-ratio:9/16;overflow:hidden;border-radius:22px;background:#0a2628;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .35s,box-shadow .35s}
.shorts-card:nth-child(even){transform:translateY(26px)}
.shorts-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.shorts-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(6,30,32,.88));pointer-events:none}
.shorts-card:hover{box-shadow:0 24px 50px rgba(0,137,150,.45)}
.shorts-card:hover img{transform:scale(1.06)}
.shorts-play{position:absolute;z-index:1;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)}
.shorts-play:before{content:"";position:absolute;left:15px;top:11px;border-left:11px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.shorts-cap{position:absolute;z-index:1;left:16px;right:16px;bottom:16px;font-size:15px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.shorts-cap em{display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;background:#ff2f45;font-style:normal;font-size:11px;letter-spacing:.04em}
@keyframes shortsScroll{to{transform:translateX(-50%)}}
@media(max-width:620px){.shorts-reel{padding:68px 0 76px}.shorts-head{flex-direction:column;align-items:flex-start;margin-bottom:26px}.shorts-card{width:160px;border-radius:18px}.shorts-group{gap:14px;padding:10px 7px}.shorts-card:nth-child(even){transform:translateY(16px)}.shorts-cap{font-size:13px;left:12px;right:12px;bottom:12px}.shorts-track{animation-duration:40s}}
@media(prefers-reduced-motion:reduce){.shorts-marquee{overflow-x:auto}.shorts-track{animation:none}}
.shorts-modal{position:fixed;z-index:3000;inset:0;display:grid;place-items:center;padding:20px}
.shorts-modal[hidden]{display:none}
.shorts-modal-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(0,137,150,.75),transparent 45%),radial-gradient(circle at 85% 85%,rgba(142,221,219,.45),transparent 45%),radial-gradient(circle at 80% 10%,rgba(255,47,69,.22),transparent 35%),linear-gradient(135deg,rgba(7,94,102,.92),rgba(16,47,50,.95));background-size:140% 140%;backdrop-filter:blur(12px);animation:shortsFade .25s,shortsGlow 12s ease-in-out infinite alternate}
.shorts-modal-box:before{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:50px;background:radial-gradient(closest-side,rgba(142,221,219,.55),transparent);filter:blur(20px)}
.shorts-modal-box{position:relative;z-index:1;height:min(86vh,760px);aspect-ratio:9/16;max-width:100%;animation:shortsPop .3s cubic-bezier(.2,.8,.2,1)}
.shorts-modal-frame,.shorts-modal-frame iframe{width:100%;height:100%;border:0;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.shorts-modal-close{position:absolute;top:-14px;right:-14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--deep);font-size:26px;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.3)}
@media(max-width:620px){.shorts-modal-box{height:auto;width:100%;max-height:82vh}.shorts-modal-close{top:-52px;right:0}}
@keyframes shortsFade{from{opacity:0}}
@keyframes shortsPop{from{opacity:0;transform:scale(.92)}}
@keyframes shortsGlow{from{background-position:0 0}to{background-position:100% 100%}}