/* ============================================================================
   THE REEL — a pausable, self-advancing read of an Ethos promise.
   ----------------------------------------------------------------------------
   Shared by every Ethos page. Pair with reel.js and the markup block; a page
   supplies only its own window.REEL_BEATS. Depends on the site palette vars
   (--gold, --gold-lt, --teal, --paper, --line, --muted) already being in :root.

   Component stylesheet, not an override sheet — it owns its own breakpoints,
   unlike mobile.css whose every rule must sit inside a max-width query.
   ========================================================================== */

.reel { position:relative; z-index:2; max-width:980px; margin:2.9rem auto 0; }
.reel-stage { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(160deg, rgba(20,23,28,.94), rgba(10,11,13,.97));
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 0 0 90px rgba(0,0,0,.55);
  --acc:var(--gold-lt); transition:box-shadow .5s ease; }
.reel-stage:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.reel-stage::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--teal) 75%, transparent); opacity:.8; }

.reel-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rl-rays { position:absolute; top:50%; left:50%; width:190%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(224,187,82,.055) 0deg 1deg, transparent 1deg 8deg);
  -webkit-mask:radial-gradient(circle at center, #000 4%, transparent 58%);
  mask:radial-gradient(circle at center, #000 4%, transparent 58%);
  animation:rlSpin 150s linear infinite; }
@keyframes rlSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.rl-half { position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.1px); background-size:5px 5px;
  -webkit-mask:radial-gradient(ellipse at 50% 50%, #000 8%, transparent 76%);
  mask:radial-gradient(ellipse at 50% 50%, #000 8%, transparent 76%); }
.rl-wash { position:absolute; inset:0; transition:opacity .7s ease, background .7s ease;
  background:radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--acc) 15%, transparent) 0%, transparent 62%); }

.rl-track { position:relative; z-index:3; display:flex; gap:5px; padding:12px 18px 0; }
.rl-seg { flex:1; padding:9px 0; background:none; border:0; cursor:pointer; }
.rl-seg b { display:block; height:3px; border-radius:3px; background:rgba(241,236,224,.15); overflow:hidden; }
.rl-seg i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--gold), var(--acc)); }
.rl-seg.done i { transform:scaleX(1); }
.rl-seg:hover b { background:rgba(241,236,224,.3); }
@keyframes rlFill { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.rl-panel { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:.95rem; cursor:pointer;
  /* measured: the tallest beat is 216px at 1440 and 190px at 820. Held just
     above that so advancing a beat never resizes the panel. */
  min-height:clamp(230px, 19vw, 276px); padding:1.5rem clamp(1.2rem,4vw,3.4rem) .8rem; }
.rl-kick { font-family:'Oswald',sans-serif; font-weight:600; font-size:.63rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--acc); animation:rlIn .5s cubic-bezier(.22,1,.36,1) .04s both; }
/* the line breaks are authored into the beat data, so no max-width here —
   balance is only a fallback for the narrow widths that force a wrap anyway */
.rl-head { font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(1.3rem,3.05vw,2.1rem);
  line-height:1.16; letter-spacing:.015em; text-transform:uppercase; color:var(--paper);
  text-wrap:balance; }
.rl-head span { display:block; animation:rlRise .66s cubic-bezier(.19,1,.28,1) both; }
.rl-head em { font-style:normal; color:var(--acc); }
.rl-sub { max-width:58ch; font-size:clamp(.95rem,1.6vw,1.06rem); line-height:1.62;
  color:rgba(241,236,224,.72); animation:rlIn .62s cubic-bezier(.22,1,.36,1) both; }
@keyframes rlIn { from { opacity:0; transform:translateY(11px); } to { opacity:1; transform:none; } }
@keyframes rlRise { 0% { opacity:0; transform:translateY(26px) skewX(-8deg); filter:blur(3px); }
  62% { opacity:1; filter:blur(0); } 100% { opacity:1; transform:none; filter:blur(0); } }

.rl-ctl { position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 14px 12px; }
.rl-count { font-family:'Oswald',sans-serif; font-weight:600; font-size:.64rem; letter-spacing:.24em;
  color:var(--muted); padding-left:.5rem; }
.rl-count span { color:var(--acc); }
.rl-mid { display:flex; align-items:center; gap:.2rem; }
.rl-btn { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  background:none; border:0; cursor:pointer; color:rgba(241,236,224,.62); border-radius:50%;
  transition:color .2s, background .2s; }
.rl-btn:hover { color:var(--gold-lt); background:rgba(224,187,82,.08); }
.rl-btn svg { width:17px; height:17px; }
.rl-btn.rl-play svg { width:20px; height:20px; }
.rl-hint { justify-self:end; font-family:'Oswald',sans-serif; font-weight:500; font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase; color:#5f5a51; padding-right:.6rem; }

@media (max-width:640px) {
  .reel { margin-top:2.1rem; }
  .rl-panel { min-height:290px; padding:1.3rem 1.15rem .6rem; gap:.8rem; }   /* tallest beat measures 266px at 360w */
  .rl-head { max-width:none; }
  .rl-sub { font-size:.95rem; }
  .rl-hint { display:none; }
  .rl-count { font-size:.58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-rays { animation:none; }
  .rl-kick, .rl-head span, .rl-sub { animation:none !important; }
}
/* one switch pauses the whole thing — the fill bar included, so resuming is exact */
.reel.is-paused .reel-stage *, .reel.is-paused .rl-rays { animation-play-state:paused !important; }