/* ============================================================================
   reels.css — ADD-ON. Loaded ONLY by reels.php, so it never touches the
   homepage payload. Every selector is prefixed .rl- and cannot collide.
   Colours/fonts/easing all come from the site's existing :root tokens.
   ============================================================================ */

.rl-root{
  position:fixed; inset:0;
  background:var(--background);
  overflow:hidden;
  font-family:var(--font-body);
}

/* ---- the snapping feed ---- */
.rl-feed{
  height:100dvh; width:100%;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rl-feed::-webkit-scrollbar{ display:none; }

.rl-reel{
  position:relative;
  height:100dvh; width:100%;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; place-items:center;
  overflow:hidden;
}

/* blurred fill behind vertical video, so no raw black bars */
.rl-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(120%) brightness(.42);
  transform:scale(1.15);
  opacity:0; transition:opacity .6s ease;
}
.rl-bg.on{ opacity:1; }

.rl-stage{
  position:relative;
  height:100dvh; width:100%;
  max-width:min(560px, 100vw);
  display:grid; place-items:center;
}
.rl-video{
  max-height:100dvh; max-width:100%;
  width:auto; height:100%;
  object-fit:contain; display:block;
  background:#000;
}
.rl-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Instagram / TikTok embeds render their own chrome at a fixed ratio, so they
   are centred on the dark stage rather than stretched to fill it. */
.rl-frame[src*="instagram.com"],
.rl-frame[src*="tiktok.com"],
.rl-frame[src*="linkedin.com"]{
  position:relative; inset:auto;
  width:min(100%, 420px);
  height:min(100dvh, 720px);
  margin:0 auto; display:block;
  background:#000;
}

/* shown when a URL points at a host that refuses to be embedded */
.rl-extfallback{
  position:absolute; inset:0; z-index:6;
  display:grid; place-content:center; gap:1rem;
  text-align:center; padding:2rem;
}
.rl-extfallback p{
  color:rgba(255,255,255,.72); font-size:.9rem; line-height:1.55;
  margin:0; max-width:30ch;
}
.rl-extlink{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.3rem; border-radius:999px;
  background:var(--neon); color:var(--background);
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  text-decoration:none; justify-self:center;
  transition:transform .25s cubic-bezier(.2,.9,.3,1);
}
.rl-extlink:hover{ transform:translateY(-2px); }

/* poster shown until the video can actually play */
.rl-poster{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .45s ease;
}
.rl-poster.hide{ opacity:0; pointer-events:none; }

/* readability scrims */
.rl-reel::before,.rl-reel::after{
  content:""; position:absolute; left:0; right:0; pointer-events:none; z-index:2;
}
.rl-reel::before{ top:0; height:26%; background:linear-gradient(to bottom, rgba(0,0,0,.72), transparent); }
.rl-reel::after{ bottom:0; height:46%; background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.45) 38%, transparent); }

/* ---- top bar ---- */
.rl-top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.1rem;
}
.rl-progress{ display:flex; gap:4px; flex:1; }
.rl-seg{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.22); overflow:hidden; }
.rl-seg i{ display:block; height:100%; width:0; background:var(--neon); border-radius:2px; }
.rl-seg.done i{ width:100%; }

.rl-iconbtn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in oklab, var(--card) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid color-mix(in oklab, var(--neon) 30%, transparent);
  color:var(--foreground); cursor:none; padding:0;
  transition:all .3s cubic-bezier(.2,.9,.3,1);
}
.rl-iconbtn:hover,.rl-iconbtn:focus-visible{
  border-color:var(--neon); color:var(--neon); box-shadow:var(--shadow-neon); transform:scale(1.06);
}
.rl-iconbtn:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }
.rl-iconbtn .material-symbols-rounded{ font-size:21px; }

.rl-brand{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-foreground); white-space:nowrap;
}
.rl-brand img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }

/* ---- right action rail ---- */
.rl-actions{
  position:absolute; right:.9rem; bottom:8.5rem; z-index:12;
  display:flex; flex-direction:column; gap:1.05rem; align-items:center;
}
.rl-act{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  background:none; border:0; padding:0; cursor:none; color:#fff;
  font-family:var(--font-mono); font-size:11px;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.rl-act .material-symbols-rounded{
  font-size:27px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition:color .25s, transform .3s cubic-bezier(.2,.9,.3,1);
}
.rl-act:hover{ transform:translateY(-2px); }
.rl-act:focus-visible{ outline:2px solid var(--neon); outline-offset:4px; border-radius:8px; }
.rl-act.on .material-symbols-rounded{ font-variation-settings:'FILL' 1; }
.rl-act.on[data-act="like"] .material-symbols-rounded{ color:#ff5f7a; }
.rl-act.on[data-act="save"] .material-symbols-rounded{ color:var(--neon); }
.rl-act.bump .material-symbols-rounded{ animation:rl-bump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes rl-bump{ 0%{transform:scale(1)} 45%{transform:scale(1.32)} 100%{transform:scale(1)} }

/* ---- bottom meta ---- */
.rl-meta{
  position:absolute; left:0; right:5.2rem; bottom:0; z-index:12;
  padding:0 1.1rem 1.6rem;
}
.rl-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:3px 10px; border-radius:999px; margin-bottom:.6rem;
  background:color-mix(in oklab, var(--neon) 16%, transparent);
  border:1px solid color-mix(in oklab, var(--neon) 40%, transparent);
  color:var(--neon);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.rl-title{
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:1.15rem; line-height:1.3; margin:0 0 .35rem;
}
.rl-caption{
  color:rgba(255,255,255,.82); font-size:.88rem; line-height:1.5; margin:0 0 .7rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rl-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem; }
.rl-tag{ font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,.55); }

/* the signature control: Inspired by -> Created by me */
.rl-story{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem; border-radius:999px; cursor:none;
  background:color-mix(in oklab, var(--card) 84%, transparent);
  backdrop-filter:blur(14px);
  border:1px solid color-mix(in oklab, var(--cyan) 40%, transparent);
  color:var(--cyan);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  transition:all .3s cubic-bezier(.2,.9,.3,1);
}
.rl-story:hover,.rl-story:focus-visible{ border-color:var(--cyan); box-shadow:var(--shadow-cyan); }
.rl-story .material-symbols-rounded{ font-size:16px; }

/* ---- bottom sheets (story + comments) ---- */
.rl-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-height:82dvh; overflow-y:auto;
  background:color-mix(in oklab, var(--card) 97%, transparent);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-top:1px solid var(--border-strong);
  border-radius:20px 20px 0 0;
  box-shadow:0 -30px 60px -12px rgba(0,0,0,.6);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
  padding:1.3rem 1.2rem 2rem;
}
.rl-sheet.open{ transform:translateY(0); }
.rl-scrim{
  position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.rl-scrim.on{ opacity:1; pointer-events:auto; }
.rl-sheet-grab{ width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:0 auto .9rem; }
.rl-sheet h3{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 .55rem; font-weight:600;
}
.rl-sheet-close{ position:absolute; top:.9rem; right:1rem; }

.rl-block{
  border-radius:14px; padding:1rem 1.1rem; margin-bottom:1rem;
  border:1px solid var(--border); background:color-mix(in oklab, var(--card-soft) 70%, transparent);
}
.rl-block.inspired{ border-left:3px solid var(--cyan); }
.rl-block.mine{ border-left:3px solid var(--neon); }
.rl-block.inspired h3{ color:var(--cyan); }
.rl-block.mine h3{ color:var(--neon); }
.rl-block p{ color:var(--muted-foreground); font-size:.9rem; line-height:1.6; margin:0 0 .6rem; }
.rl-block p:last-child{ margin-bottom:0; }
.rl-block .lbl{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-foreground); display:block; margin:.85rem 0 .25rem;
}
.rl-src{
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--cyan); text-decoration:none; font-size:.85rem; font-weight:600;
}
.rl-src:hover{ text-decoration:underline; }
.rl-toolrow{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.rl-tool{
  padding:3px 9px; border-radius:999px; font-family:var(--font-mono); font-size:10px;
  background:color-mix(in oklab, var(--muted) 70%, transparent);
  border:1px solid var(--border); color:var(--foreground);
}

/* ---- states ---- */
.rl-state{
  position:fixed; inset:0; display:grid; place-items:center; text-align:center;
  padding:2rem; z-index:30; background:var(--background);
}
/* A class selector beats the UA's [hidden]{display:none}, so `hidden` alone
   would NOT hide these panels — they would sit permanently over the feed. */
.rl-state[hidden]{ display:none; }
.rl-state .inner{ max-width:420px; }
.rl-state h2{ font-family:var(--font-display); color:var(--foreground); font-size:1.4rem; margin:.8rem 0 .5rem; }
.rl-state p{ color:var(--muted-foreground); font-size:.94rem; line-height:1.6; margin:0 0 1.3rem; }
.rl-spinner{
  width:34px; height:34px; border-radius:50%; margin:0 auto;
  border:2px solid var(--border-strong); border-top-color:var(--neon);
  animation:rl-spin .8s linear infinite;
}
@keyframes rl-spin{ to{ transform:rotate(360deg) } }
.rl-vidbusy{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); border-top-color:#fff;
  animation:rl-spin .8s linear infinite; display:none;
}
.rl-reel.busy .rl-vidbusy{ display:block; }
.rl-err{
  position:absolute; inset:0; z-index:7; display:none;
  place-items:center; text-align:center; padding:2rem; color:rgba(255,255,255,.8);
}
.rl-reel.err .rl-err{ display:grid; }
.rl-reel.err .rl-vidbusy{ display:none; }

/* big center play affordance when paused */
.rl-tapzone{ position:absolute; inset:0; z-index:8; cursor:none; background:transparent; border:0; }
.rl-bigplay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  z-index:9; width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  background:color-mix(in oklab, var(--background) 48%, transparent);
  backdrop-filter:blur(8px);
  border:1px solid color-mix(in oklab, var(--neon) 55%, transparent);
  color:var(--neon);
  opacity:0; transition:opacity .25s, transform .25s cubic-bezier(.2,.9,.3,1);
}
.rl-bigplay .material-symbols-rounded{ font-size:36px; }
.rl-reel.paused .rl-bigplay{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- entry transition ---- */
.rl-intro{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--background); text-align:center; padding:2rem;
  transition:opacity .5s ease, visibility .5s;
}
.rl-intro.gone{ opacity:0; visibility:hidden; }
.rl-intro-line{
  font-family:var(--font-display); font-weight:700; color:var(--foreground);
  font-size:clamp(1.3rem,4.2vw,2.2rem); line-height:1.35; max-width:16ch;
  opacity:0; transform:translateY(14px);
  animation:rl-introin .8s cubic-bezier(.2,.8,.2,1) .12s forwards;
}
.rl-intro-rule{
  width:0; height:2px; margin:1.3rem auto 0;
  background:linear-gradient(90deg,transparent,var(--neon),var(--cyan),transparent);
  animation:rl-rule 1.1s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
@keyframes rl-introin{ to{ opacity:1; transform:none } }
@keyframes rl-rule{ to{ width:210px } }

.rl-hint{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:15;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5); pointer-events:none;
  transition:opacity .4s ease;
}
.rl-hint .material-symbols-rounded{ font-size:17px; animation:rl-nudge 1.9s ease-in-out infinite; }
@keyframes rl-nudge{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(5px);opacity:1} }
.rl-hint.gone{ opacity:0; }

/* ---- responsive ---- */
@media (max-width:880px){
  .rl-actions{ bottom:7.5rem; right:.6rem; gap:.9rem; }
  /* lift the meta block clear of the centred scroll hint */
  .rl-meta{ right:4.4rem; padding-bottom:3.4rem; }
  .rl-act .material-symbols-rounded{ font-size:25px; }
}
@media (min-width:881px){
  .rl-stage{ box-shadow:0 0 120px -20px rgba(0,0,0,.9); }
}

/* ---- accessibility contracts ---- */
@media (hover:none) and (pointer:coarse){
  .rl-iconbtn,.rl-act,.rl-story,.rl-tapzone{ cursor:pointer; }
}
@media (prefers-reduced-motion:reduce){
  .rl-feed{ scroll-behavior:auto; }
  .rl-intro-line,.rl-intro-rule,.rl-hint .material-symbols-rounded,.rl-act.bump .material-symbols-rounded{ animation:none; }
  .rl-intro-line{ opacity:1; transform:none; }
  .rl-intro-rule{ width:210px; }
  .rl-sheet{ transition:none; }
  .rl-bg{ transition:none; }
}
.rl-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}