/* Home reel: under the hero, the red logo tile opens into the showreel as the page scrolls (js/sections/home-reel.js).
   The section is tall; .rl-pin sticks to the screen while the tile (.rl-box) grows from a small red square into a wide screen.
   Wide screens play the 16:9 cut in a 16:9 frame; phones play the vertical cut in a tall frame.
   "شاهد الريل" opens the full reel with sound in a full-screen layer (.rl-lb) that ends on a contact button. */
.reel{position:relative;height:260vh}
.rl-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.rl-line{position:absolute;inset:auto 0 calc(50% + 120px);padding:0 var(--gutter);text-align:center;
  font-size:clamp(30px,4.6vw,64px);font-weight:var(--fw-bold);line-height:1.25;color:var(--head);will-change:opacity,transform}
.rl-line b{color:var(--red-on-dark);font-weight:inherit}
.rl-box{position:relative;width:140px;height:140px;border-radius:28px;overflow:hidden;background:#000;isolation:isolate;
  box-shadow:0 30px 80px -20px var(--red-a35);will-change:width,height}
.rl-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-red{position:absolute;inset:0;z-index:2;background:var(--red);display:grid;place-items:center;pointer-events:none}
.rl-red img{width:46%;max-width:110px;height:auto}
.rl-play{position:absolute;z-index:3;inset:auto 0 28px;margin:auto;width:max-content;display:flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;border:1px solid var(--white-a22);background:var(--button-glass);backdrop-filter:blur(10px);
  color:var(--white);font:inherit;font-size:var(--fs-17);font-weight:var(--fw-bold);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,transform .3s}
.rl-play.on{opacity:1;pointer-events:auto}
.rl-play i{width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center}
@media (hover:hover){.rl-play:hover{transform:scale(1.04)}}

/* full reel layer */
.rl-lb{position:fixed;inset:0;z-index:1000;background:rgba(5,4,4,.94);display:none;place-items:center;padding:24px}
.rl-lb.open{display:grid}
.rl-lb.is-wide video{aspect-ratio:16/9;width:min(100%,calc((100vh - 48px)*16/9))}
.rl-lb video{max-width:100%;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);aspect-ratio:9/16;border-radius:20px;background:#000}
.rl-x{position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--white-a22);background:var(--button-glass);color:var(--white);cursor:pointer;display:grid;place-items:center}
.rl-end{position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:18px;text-align:center;background:rgba(5,4,4,.7)}
.rl-end.on{display:grid}
.rl-end p{font-size:clamp(22px,3vw,34px);font-weight:var(--fw-bold);color:var(--head)}
.rl-end .rl-again{background:none;border:0;color:var(--grey);font:inherit;cursor:pointer;text-decoration:underline}

@media (max-width:760px){
  .reel{height:230vh}
  .rl-line{padding:0 var(--gutter-m);inset:auto 0 calc(50% + 90px)}
  .rl-box{width:110px;height:110px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){.reel{height:auto;padding:var(--section-y) 0}.rl-pin{position:relative;height:auto;gap:28px}.rl-line{position:static}}