/* =====================================================================
   MDLBEAST RADIO - the homepage feature box: motion, the Record style and
   the archive slide (part 1 of the Feature Box, built in js/app.js).

   Brand rules this file follows: no fades and no crossfades; slides and
   their words move through masks, wipes and slides instead. Background
   patterns sit at 10% in the ink color, bleed past every edge, and are
   never rotated by an animation.

   The hidden "before" states only apply once js/app.js has added .motion to
   the hero, so without JavaScript every slide simply shows.
   ===================================================================== */

/* The hero fills the screen under the header, so its foot and its dots are
   on screen. js/app.js measures the header into --mdlb-head. */
.moment.hero-rot{min-height:calc(100svh - var(--mdlb-head,0px))}

/* Slides change by motion, never by fading. */
.hero-rot.motion .hero-slide{transition:none}

/* ---------- masks: every line rises in and lifts away ---------- */
.hero-slide .mk{display:block;overflow:hidden;padding:.06em .04em .14em;margin:-.06em -.04em -.14em}
.hero-slide .mk-btn{padding:10px;margin:-10px}
.hero-slide .mv{display:block}
.hero-slide .display .mk{display:block}
.hero-rot.motion .hero-slide .mv{transform:translateY(112%);transition:transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 90ms + 100ms)}
.hero-rot.motion .hero-slide.in .mv{transform:none}
.hero-rot.motion .hero-slide.out .mv{transform:translateY(-112%);transition:transform .4s cubic-bezier(.6,0,.8,.4);transition-delay:calc(var(--d,0) * 40ms)}
.hero-slide.prep,.hero-slide.prep *{transition:none!important}

/* The chevron strip slides in sideways; it is wider than the slide so its
   end never shows. Photo and video backgrounds wipe across. */
.hero-rot.motion .hero-slide .chev-bg{left:-14%;right:-14%;transform:translateX(10%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-slide.in .chev-bg{transform:none}
.hero-rot.motion .hero-slide.out .chev-bg{transform:translateX(-10%);transition-duration:.45s;transition-timing-function:cubic-bezier(.6,0,.8,.4)}
.hero-rot.motion .hero-slide .hero-media{clip-path:inset(0 0 0 100%);transition:clip-path .85s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-slide.in .hero-media{clip-path:inset(0)}
.hero-rot.motion .hero-slide.out .hero-media{clip-path:inset(0 100% 0 0);transition-duration:.42s;transition-timing-function:cubic-bezier(.6,0,.8,.4)}

/* ---------- brand pattern layer (Record style and the Crate) ---------- */
.hero-slide > .fb-pat,.hero-archive > .fa-pat{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fb-pat span,.fa-pat span{position:absolute;inset:-12%;background:var(--ink);opacity:.1;
  -webkit-mask:var(--pat) var(--pos,center)/var(--size,cover) no-repeat;mask:var(--pat) var(--pos,center)/var(--size,cover) no-repeat;
  rotate:var(--rot,0deg);animation:fbdrift 20s ease-in-out infinite alternate}
@keyframes fbdrift{to{translate:-3% 2%}}
.hero-rot.motion .hero-slide .fb-pat span{transform:translateX(9%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-slide.in .fb-pat span{transform:none}
.hero-rot.motion .hero-slide.out .fb-pat span{transform:translateX(-9%);transition-duration:.45s}

/* ---------- headline slide, Record style ---------- */
.hero-slide.style-record > .mk,.hero-slide.style-record > .display,.hero-slide.style-record > .mk-btn{max-width:min(48%,720px);position:relative;z-index:3}
.hero-slide.style-record .display{font-size:clamp(3rem,7.4vw,8.4rem)}
.hero-slide.style-record .lead{max-width:26ch}
.fb-onair{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.hero-slide .fb-onair.mv{display:flex}
.fb-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--transmitter-red);animation:blink 1.4s infinite}
.fb-freq{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;opacity:.75;margin-top:clamp(18px,3vh,28px)}
.fb-freq b{font-family:var(--f-black);letter-spacing:.02em}
.hero-slide > .fb-rec{position:absolute;z-index:1;top:50%;right:calc(var(--rec) * -.22);width:var(--rec);aspect-ratio:1/1;transform:translateY(-50%);pointer-events:none;--rec:min(96svh,64vw)}
.fb-rec .roll,.fb-rec .spin{position:absolute;inset:0}
.fb-rec .spin{animation:fbspin 7s linear infinite}
@keyframes fbspin{to{transform:rotate(360deg)}}
.fb-rec img{display:block;width:100%;height:100%;max-width:none}
/* The label matches the Listen Live record: 39% of the disc, the full square
   logo centred at 52% of the label, in the slide's ink, and no spindle dot. */
.fb-rec .lab{position:absolute;inset:30.5%;border-radius:50%;background:var(--accent)}
.fb-rec .lab::before{content:"";position:absolute;inset:24%;background:var(--ink);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.hero-rot.paused .fb-rec .spin{animation-play-state:paused}
.hero-rot.motion .fb-rec .roll{transform:translateX(70%) rotate(140deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-slide.in .fb-rec .roll{transform:none}
.hero-rot.motion .hero-slide.out .fb-rec .roll{transform:translateX(80%) rotate(160deg);transition:transform .45s cubic-bezier(.6,0,.8,.4)}

/* =====================================================================
   The archive slide. One slide, repainted by js/app.js with each story.
   Each story's tone picks the approved combo whose background it is, so
   every screen is a brand pair. Two designs: Wall and Crate.
   ===================================================================== */
.hero-slide.hero-archive{padding:clamp(28px,5vh,64px) clamp(24px,5vw,80px) clamp(64px,9vh,96px);justify-content:center;background:var(--bg);color:var(--ink)}
.hero-archive .fa-v{display:none;position:relative;z-index:2}
.hero-archive[data-design="wall"] .fa-wallv,.hero-archive[data-design="crate"] .fa-crate{display:grid}
.hero-archive:not([data-design="wall"]) > .fa-wall,.hero-archive:not([data-design="crate"]) > .fa-pat{display:none}

/* the words */
.fa-copy{position:relative;z-index:2;min-width:0}
.fa-kicker{display:flex;align-items:center;gap:10px;margin:0 0 clamp(12px,2vh,20px);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.22em;font-size:clamp(.62rem,1.4vw,.8rem);color:var(--accent)}
.fa-kicker svg{width:13px;height:13px;flex:0 0 13px}
.fa-meta{margin:0 0 clamp(12px,2vh,18px);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;opacity:.72}
.fa-title{margin:0;font-family:var(--f-black);text-transform:uppercase;line-height:.9;letter-spacing:-.025em;font-size:clamp(2rem,3.4vw + .7rem,4.4rem);text-wrap:balance;overflow-wrap:break-word}
.fa-title.t-m{font-size:clamp(1.8rem,2.7vw + .6rem,3.5rem)}
.fa-title.t-l{font-size:clamp(1.6rem,2.1vw + .55rem,2.9rem);line-height:.93}
.fa-title a{color:inherit;text-decoration:none}
.fa-lead{margin:clamp(16px,2.6vh,26px) 0 0;max-width:40ch;font-family:var(--f-med);color:var(--muted);line-height:1.5;font-size:clamp(1rem,1.3vw,1.18rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-rot .hero-archive .fa-lead.mv{display:-webkit-box}
.fa-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3.6vh,38px)}
.fa-actions .btn{font-size:.82rem;padding:16px 26px}
.fa-actions .btn svg{width:15px;height:15px}
.fa-actions .btn.ghost svg{width:17px;height:17px}
.fa-dig.digging svg{animation:fadig .5s ease}
@keyframes fadig{30%{transform:rotate(-35deg)}70%{transform:rotate(20deg)}}
.fa-sample{display:inline-block;margin-left:8px;padding:3px 8px;border:1px dashed currentColor;border-radius:999px;font-size:.58rem;letter-spacing:.14em;opacity:.8}
.fa-win{position:absolute;z-index:4;left:12px;top:12px;padding:8px 13px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:var(--f-heavy);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.fa-win[hidden]{display:none}

/* ---------- Wall ---------- */
.hero-archive > .fa-wall{position:absolute;inset:-4%;z-index:0;display:grid;grid-template-columns:repeat(var(--cols,7),1fr);gap:10px;align-content:start;
  transform:rotate(-6deg) scale(1.12);opacity:.2;filter:grayscale(1) contrast(1.1);pointer-events:none;translate:0 0;transition:translate 1.3s cubic-bezier(.2,.8,.2,1)}
.fa-wall img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:6px;max-width:none}
.hero-archive.fa-fresh > .fa-wall{translate:0 6%}
.hero-archive.fa-leaving > .fa-wall{translate:0 -5%;transition:translate .45s cubic-bezier(.6,0,.8,.4)}
.fa-wallv{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;width:100%;max-width:1400px;margin:0 auto}
.fa-frame{position:relative;display:block;width:min(44vw,58svh,500px);aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--surface);
  box-shadow:0 0 0 clamp(8px,1vw,14px) var(--accent);clip-path:inset(-24px)}
.fa-frame img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.fa-wallv .fa-copy{padding:clamp(20px,3vw,40px);border-radius:18px;background:var(--bg)}
.hero-rot.motion .fa-frame{clip-path:inset(calc(100% + 24px) -24px -24px -24px);transition:clip-path .75s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-archive.in .fa-frame{clip-path:inset(-24px)}
.hero-rot.motion .hero-archive.out .fa-frame{clip-path:inset(-24px -24px calc(100% + 24px) -24px);transition:clip-path .4s cubic-bezier(.6,0,.8,.4)}
.hero-rot.motion .fa-frame img{transform:scale(1.14);transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-archive.in .fa-frame img{transform:none}

/* ---------- Crate ---------- */
.fa-crate{grid-template-columns:minmax(320px,.9fr) minmax(0,1.5fr);gap:clamp(28px,4vw,72px);align-items:center;width:100%;max-width:1760px;margin:0 auto}
.fa-media{min-width:0}
.fa-crate .fa-copy{container-type:inline-size}
.fa-crate .fa-title{font-size:clamp(1.9rem,11cqi,4.6rem)}
.fa-crate .fa-title.t-m{font-size:clamp(1.7rem,9cqi,3.7rem)}
.fa-crate .fa-title.t-l{font-size:clamp(1.5rem,7.4cqi,3.1rem)}
.fa-sleeve-wrap{position:relative;width:calc(var(--cover,420px) * 1.26);max-width:100%}
.fa-sleeve{position:relative;width:var(--cover,420px);aspect-ratio:1/1}
.fa-cover-link{position:relative;z-index:2;display:block;width:100%;height:100%}
.fa-cover{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;max-width:none}
.fa-disc{position:absolute;z-index:1;top:3%;left:3%;width:94%;height:94%;border-radius:50%;background:#000;color:#fff;transform:translateX(4%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fa-disc svg{display:block;width:100%;height:100%;animation:fbspin 5s linear infinite}
.fa-lbl{fill:var(--accent)}
.hero-archive.in .fa-disc{transform:translateX(30%)}
.hero-archive.out .fa-disc{transform:translateX(4%);transition-duration:.3s}
.hero-rot.paused .fa-disc svg{animation-play-state:paused}
.hero-rot.motion .fa-cover-link{clip-path:inset(100% 0 0 0);transition:clip-path .75s cubic-bezier(.2,.8,.2,1)}
.hero-rot.motion .hero-archive.in .fa-cover-link{clip-path:inset(0)}
.hero-rot.motion .hero-archive.out .fa-cover-link{clip-path:inset(0 0 100% 0);transition:clip-path .4s cubic-bezier(.6,0,.8,.4)}

/* ---------- phones ---------- */
@media(max-width:899px){
  .hero-slide.style-record{justify-content:flex-end;padding-bottom:calc(var(--nav-h) + 60px + env(safe-area-inset-bottom))}
  .hero-slide.style-record > .mk,.hero-slide.style-record > .display,.hero-slide.style-record > .mk-btn{max-width:none}
  .hero-slide.style-record .display{font-size:clamp(2.6rem,13vw,4rem)}
  .hero-slide > .fb-rec{top:calc(var(--rec) * -.08);right:calc(var(--rec) * -.3);transform:none;--rec:min(92vw,40svh)}
  .hero-slide.style-record .fb-freq{display:none}

  .hero-slide.hero-archive{justify-content:center;padding:clamp(12px,2vh,20px) 22px calc(var(--nav-h) + 54px + env(safe-area-inset-bottom))}
  .fa-wallv,.fa-crate{grid-template-columns:minmax(0,1fr);gap:22px}
  .fa-media{order:-1}
  .fa-sleeve-wrap{width:var(--cover,260px);max-width:none}
  .hero-archive.in .fa-disc{transform:translateX(22%)}
  .fa-frame{width:min(70vw,35svh);margin-left:7px;box-shadow:0 0 0 7px var(--accent)}
  .fa-wallv .fa-copy{padding:0;background:transparent}
  .fa-title{font-size:clamp(1.8rem,8.4vw,2.7rem)}
  .fa-title.t-m{font-size:clamp(1.55rem,7vw,2.25rem)}
  .fa-title.t-l{font-size:clamp(1.35rem,6vw,1.95rem)}
  .fa-lead{-webkit-line-clamp:2;font-size:.98rem;margin-top:12px}
  .fa-meta,.fa-kicker{margin-bottom:10px}
  .fa-actions{flex-wrap:nowrap;margin-top:18px}
  .fa-actions .btn{padding:14px 20px;font-size:.74rem}
  .fa-actions .btn.ghost{padding:0;width:50px;height:50px;justify-content:center;flex:0 0 50px}
  .fa-actions .btn.ghost .fa-dig-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

@media(prefers-reduced-motion:reduce){
  .fb-rec .spin,.fa-disc svg,.fb-pat span,.fa-pat span{animation:none}
}

/* Phones with the mini-player up: it takes about 70px of the hero, and the
   Wall's square sizes itself on screen height, so on short screens it gives
   way first. Tall phones keep the full square. */
@media(max-width:899px){
  body.mp-on .fa-frame{width:max(120px,min(70vw,35svh,calc(100svh - 540px)))}
}
/* Short phones (iPhone SE class, about 550pt of page in Safari): the Wall
   only just fits even without the mini-player, so the square is sized from
   the space left, the Scroll hint goes, and with the mini-player up the
   date line steps aside too. */
@media(max-width:899px) and (max-height:600px){
  .fa-frame{width:max(96px,min(70vw,calc(100svh - 415px)))}
  .moment.hero-rot .scrollhint{display:none}
  body.mp-on .fa-frame{width:96px}
  body.mp-on .fa-meta{display:none}
}