/* Cinematic, lightweight concept-footage showcase. Fully self-contained. */
#showreel { position: relative; isolation: isolate; overflow: hidden; padding-block: 45px 96px; }
#showreel::before { content: ""; position: absolute; inset: 5% -10%; z-index: -1; background: radial-gradient(ellipse at 55% 45%, #3768d12a, transparent 65%); filter: blur(35px); pointer-events: none; }
.reel-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 24px; margin-bottom: 30px; }
.reel-heading h2 { margin: 12px 0 0; font-size: clamp(31px, 4.4vw, 55px); letter-spacing: -2.2px; line-height: 1.1; }
.reel-heading p { max-width: 430px; color: #aebfda; line-height: 1.8; font-size: 14px; margin: 0 0 5px auto; }
.reel-stage { position: relative; isolation: isolate; border-radius: 27px; border: 1px solid #84caff69; padding: 8px; overflow: hidden; background: linear-gradient(120deg, #18315ddd, #101b3ada); box-shadow: 0 30px 80px #0008, 0 0 65px #2577eb1a, inset 0 1px #c7e9ff32; }
.reel-stage::before { content: ""; position: absolute; width: 58%; height: 85%; top: -40%; right: -14%; transform: rotate(-25deg); background: radial-gradient(ellipse,#6da8ff50,transparent 70%); filter: blur(35px); pointer-events: none; }
.reel-screen { position: relative; isolation: isolate; overflow: hidden; border-radius: 21px; aspect-ratio: 16 / 7.1; background: linear-gradient(145deg,#142b59,#060d1d); }
.reel-screen video { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.81) saturate(1.1); }
.reel-screen::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg,#030d22b9 0%,#030d2260 43%,transparent 90%),linear-gradient(0deg,#020917e2,transparent 55%); }
.reel-copy { position: absolute; z-index: 2; top: 50%; left: clamp(20px,5vw,70px); max-width: min(64%,600px); transform: translateY(-50%); pointer-events: none; }
.reel-eyebrow { color: #82f6ed; font-size: 11px; font-weight: 900; letter-spacing: 2.3px; text-transform: uppercase; }
.reel-title { display: block; min-height: 2.25em; max-width: 610px; color: #fff; font-size: clamp(24px,3.9vw,57px); letter-spacing: -2px; line-height: 1.16; margin: 13px 0; text-shadow: 0 10px 30px #000c; transition: opacity .3s, transform .3s; }
.reel-title.is-changing { opacity: .35; transform: translateY(8px); }
.reel-sub { display: block; max-width: 390px; color: #d4e2fa; font-size: clamp(11px,1.4vw,15px); line-height: 1.7; }
.reel-top-label { position: absolute; z-index: 2; right: 25px; top: 25px; padding: 9px 13px; border: 1px solid #cbecff5a; border-radius: 40px; background: #05182bbd; backdrop-filter: blur(14px); color: #dff5ff; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.reel-control { position: absolute; z-index: 4; bottom: 23px; right: 23px; display: inline-flex; align-items: center; gap: 9px; min-height: 43px; border: 1px solid #e9fbff70; border-radius: 45px; padding: 11px 16px; background: #091a32e6; color: white; font-size: 12px; font-weight: 800; backdrop-filter: blur(14px); cursor: pointer; }
.reel-control:hover,.reel-control:focus-visible { background: #18417c; }
.reel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 22px 13px 5px; }
.reel-bottom p { color: #91a9ca; font-size: 11px; line-height: 1.6; margin: 0; max-width: 580px; }
.reel-bottom .reel-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.reel-bottom .btn { min-height: 44px; }
.reel-track { position: absolute; z-index: 3; bottom: 0; left: 0; height: 3px; width: 100%; background: #a7c9fa22; }
.reel-track > span { display: block; height: 100%; background: linear-gradient(90deg,#60f4f0,#599fff,#ad84ff); width: 0; transition: width .12s linear; }
@media(max-width: 780px) { .reel-heading { grid-template-columns: 1fr; } .reel-heading p { max-width: 640px; margin-left: 0; } .reel-screen { aspect-ratio: 4 / 3; } .reel-copy { max-width: 77%; } }
@media(max-width: 520px) { #showreel { padding-block: 25px 67px; } .reel-heading h2 { letter-spacing:-1.5px; } .reel-stage { padding: 5px; border-radius: 20px; } .reel-screen { aspect-ratio: 4 / 4.6; border-radius: 15px; } .reel-screen::before { background: linear-gradient(90deg,#030d22a9,transparent 105%),linear-gradient(0deg,#020917ce,transparent 80%); } .reel-screen video { object-position: center; } .reel-copy { top: 45%; max-width: 88%; left: 21px; } .reel-eyebrow { font-size: 9px; letter-spacing: 1.8px; } .reel-title { font-size: clamp(27px,8vw,41px); letter-spacing: -1.3px; } .reel-sub { font-size: 12px; } .reel-top-label { top: 13px; right: 12px; font-size: 8px; } .reel-control { bottom: 17px; right: 12px; min-height: 44px; } .reel-bottom { padding: 20px 8px 8px; } .reel-bottom .reel-actions { width: 100%; } .reel-bottom .reel-actions .btn { flex: 1; text-align: center; } }
@media(prefers-reduced-motion:reduce) { .reel-title { transition: none; } }