@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap");

:root { --orange:#ff642d; --paper:#f4efe7; --ink:#080808; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:320px; background:var(--ink); color:#fff; font-family:Inter,Arial,sans-serif; }
.reel-intro {
  display:grid; align-content:end; min-height:82svh; padding:140px max(24px,calc((100% - 1400px)/2)) 70px;
  background:radial-gradient(circle at 78% 20%,rgba(255,100,45,.28),transparent 25%),#090909;
}
.reel-intro p,.reel-slide__copy p { margin:0; color:var(--orange); font:800 .62rem/1 "Space Grotesk",sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.reel-intro h1 { max-width:1100px; margin:24px 0 0; font:400 clamp(76px,10vw,156px)/.82 Anton,sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.reel-intro h1 em { color:var(--orange); font-style:normal; }
.reel-intro span { margin-top:28px; color:rgba(255,255,255,.5); font:700 .62rem/1.5 "Space Grotesk",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.reel { position:relative; }
.reel-slide {
  position:relative; min-height:100svh; overflow:hidden; border-top:1px solid rgba(255,255,255,.12);
  background:#080808; isolation:isolate;
}
.reel-slide video {
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; background:#111;
  transition:width .45s ease,height .45s ease,border-radius .45s ease,box-shadow .45s ease;
}
.reel-slide.is-portrait {
  background:
    radial-gradient(circle at 78% 42%,rgba(255,100,45,.2),transparent 27%),
    radial-gradient(circle at 30% 84%,rgba(126,75,255,.11),transparent 31%),
    #080808;
}
.reel-slide.is-portrait::before {
  position:absolute; inset:0; z-index:-2; opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:56px 56px; content:"";
  mask-image:linear-gradient(90deg,#000,transparent 76%);
}
.reel-slide.is-portrait video {
  inset:50% clamp(42px,7vw,130px) auto auto;
  width:min(38vw,520px); height:min(82svh,760px); max-height:calc(100svh - 126px);
  object-fit:contain; border:1px solid rgba(255,255,255,.14); border-radius:20px;
  background:#020202; box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 8px rgba(255,255,255,.025);
  transform:translateY(-47%);
}
.reel-slide::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.12) 70%),linear-gradient(0deg,rgba(0,0,0,.76),transparent 48%); content:""; }
.reel-slide.is-portrait::after {
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.13) 48%,transparent 75%);
}
.reel-slide__copy { position:absolute; z-index:2; left:max(24px,calc((100% - 1400px)/2)); right:24px; bottom:64px; }
.reel-slide__copy h2 { max-width:940px; margin:18px 0 0; font:400 clamp(66px,9vw,144px)/.84 Anton,sans-serif; letter-spacing:-.03em; text-transform:uppercase; }
.reel-slide.is-portrait .reel-slide__copy { right:52%; }
.reel-slide.is-portrait .reel-slide__copy h2 { font-size:clamp(58px,6.4vw,104px); }
.reel-slide__copy span { display:block; margin-top:22px; color:rgba(255,255,255,.54); font:700 .6rem/1 "Space Grotesk",sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.reel-slide__sound { position:absolute; z-index:3; right:26px; bottom:28px; width:54px; height:54px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(0,0,0,.35); color:#fff; cursor:pointer; backdrop-filter:blur(12px); }
.reel-slide__sound::before { content:"♪"; font:700 1rem/1 sans-serif; }
.reel-slide__sound[aria-pressed="true"] { border-color:var(--orange); background:var(--orange); color:#111; }
.reel-side {
  position:fixed; z-index:1000; top:50%; right:18px; display:grid; gap:8px; padding:10px 8px; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; background:rgba(8,8,8,.62); transform:translateY(-50%); backdrop-filter:blur(14px);
}
.reel-side a { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.32); }
.reel-side a:hover,.reel-side a.is-active { background:var(--orange); transform:scale(1.45); }
@media (max-width:620px) {
  .reel-intro { min-height:72svh; padding:116px 18px 48px; }
  .reel-intro h1 { font-size:clamp(68px,21vw,94px); }
  .reel-slide { min-height:88svh; }
  .reel-slide::after { background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 72%); }
  .reel-slide.is-portrait {
    min-height:92svh;
    background:radial-gradient(circle at 50% 35%,rgba(255,100,45,.2),transparent 42%),#080808;
  }
  .reel-slide.is-portrait::before { opacity:.08; mask-image:none; }
  .reel-slide.is-portrait video {
    inset:78px 14px auto;
    width:calc(100% - 28px); height:calc(100% - 164px); max-height:none;
    border-radius:16px; transform:none;
  }
  .reel-slide.is-portrait::after {
    background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.12) 67%,rgba(0,0,0,.18));
  }
  .reel-slide__copy { left:18px; right:68px; bottom:32px; }
  .reel-slide__copy h2 { font-size:clamp(58px,18vw,84px); }
  .reel-slide.is-portrait .reel-slide__copy { left:18px; right:68px; }
  .reel-slide.is-portrait .reel-slide__copy h2 { font-size:clamp(50px,15vw,72px); }
  .reel-slide__sound { right:14px; bottom:24px; width:46px; height:46px; }
  .reel-side { display:none; }
}