.film{position:relative;height:1000svh;background:#0b0d10}
.film .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.film canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.55));pointer-events:none}
.film .bigname{position:absolute;left:50%;width:max-content;margin-left:0;top:50%;transform:translate3d(-50%,-46%,0);text-align:center;color:#fff;font-family:var(--display);font-weight:var(--display-w,600);font-size:clamp(72px,17vw,300px);line-height:.85;letter-spacing:var(--display-ls,-.03em);text-transform:var(--name-case,none);pointer-events:none;transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);text-shadow:0 4px 28px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.35)}
.film .bigname span{display:inline-block;overflow:hidden;padding-top:.14em;margin-top:-.14em;vertical-align:top}
.film .bigname i{display:inline-block;font-style:normal;transform:translateY(120%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.film.in .bigname i{transform:none}
.film .open-l{position:absolute;left:28px;bottom:30px;color:#fff;font-family:var(--display);font-weight:var(--display-w,600);font-size:clamp(28px,3.2vw,52px);line-height:1.02;letter-spacing:-.02em;max-width:620px;transition:opacity .5s}
.film .open-c{position:absolute;left:50%;bottom:34px;transform:translateX(-10%);color:#fff;font-size:15px;max-width:380px;opacity:.9;transition:opacity .5s}
.film .chip{position:absolute;right:24px;bottom:22px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(10,12,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12.5px;letter-spacing:.02em;max-width:calc(100% - 48px)}
.film .chip b{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;box-shadow:0 0 12px var(--live)}
.film .chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .gcard{position:absolute;left:28px;top:50%;width:min(470px,calc(100% - 56px));transform:translate3d(-24px,-50%,0);opacity:0;pointer-events:none;padding:32px 30px;border-radius:22px;background:rgba(18,20,26,.42);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.14);color:#fff;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.film .gcard.on{opacity:1;transform:translate3d(0,-50%,0);pointer-events:auto}
.film .gcard .k{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--live)}
.film .gcard h3{font-family:var(--display);font-weight:var(--display-w,600);font-size:clamp(34px,3.6vw,58px);line-height:.98;letter-spacing:-.025em;margin:14px 0 14px}
.film .gcard p{font-size:16px;line-height:1.45;opacity:.88}
.film .gcard .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.film .gcard .pill{border-color:rgba(255,255,255,.6)}
.film .gcard .pill.fill{background:#fff;border-color:#fff;color:#111}
.film .prog{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*100%);background:var(--live)}
.film .load{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.2em;transition:opacity .6s;pointer-events:none}
.film.ready .load{opacity:0}
@media (max-width:700px){.film{height:820svh}.film .bigname{top:30%;font-size:clamp(56px,19vw,120px)}.film .open-l{left:16px;right:16px;bottom:128px;font-size:30px;text-shadow:0 2px 18px rgba(0,0,0,.45)}.film .open-c{left:16px;right:16px;bottom:66px;transform:none;font-size:14px;max-width:none;text-shadow:0 1px 10px rgba(0,0,0,.5)}.film .chip{right:12px;left:12px;bottom:12px;justify-content:flex-start}.film .gcard{left:12px;right:12px;width:auto;top:auto;bottom:62px;transform:translate3d(0,24px,0);padding:22px 20px;border-radius:18px}.film .gcard.on{transform:none}.film .gcard h3{font-size:32px;margin:10px 0}.film .gcard p{font-size:14.5px}}

.social{background:var(--bg);padding:12vh 0 0;position:relative}
.social .sticky-wrap{position:relative;height:300vh}
.social .stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.social .head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:5vh}
.social h2{font-family:var(--display);font-weight:var(--display-w,600);font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.03em;max-width:820px}
.social .handle{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.08em;color:var(--accent2,var(--accent))}
.social .panel{margin:0 2vw;border-radius:34px;background:var(--panel,#e9e4dc);padding:4.5vh 0;overflow:hidden}
.social .track{display:flex;gap:22px;padding-left:5vw;will-change:transform}
.social .reel{flex:none;width:clamp(200px,18vw,290px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;position:relative;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transform:rotate(var(--r,0deg)) translateY(var(--y,0px))}
.social .reel video,.social .reel img{width:100%;height:100%;object-fit:cover}
.social .reel .tag{position:absolute;left:12px;bottom:12px;right:12px;color:#fff;font-size:12px;letter-spacing:.04em;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.social .reel .ig{position:absolute;top:12px;left:12px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#fff;background:rgba(0,0,0,.4);padding:4px 8px;border-radius:999px;backdrop-filter:blur(6px)}
@media (max-width:700px){.social .sticky-wrap{height:260vh}.social .reel{width:62vw}.social .panel{margin:0 10px;border-radius:24px}}