/* ============ HERO ============ */
.hero{padding:56px 0 40px;}
.hero-top{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:end;margin-bottom:48px;}
.hero-head{max-width:760px;}
.hero-head h1{
  font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:0.98;margin-top:18px;
}
.hero-head h1 .hl{
  background:linear-gradient(92deg, var(--red), var(--orange) 40%, var(--yellow) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:22px;font-size:1.1rem;max-width:560px;color:rgba(43,32,19,0.78);}
.hero-grid{display:grid;grid-template-columns:360px 1fr;gap:32px;align-items:start;}

/* ---- game promo: boxy cassette-shell, deliberately hard-edged vs. the glass panels ---- */
.game-promo{
  display:block;
  transform:translateX(-30px);
  text-decoration:none;color:var(--cream);
  /* Two background layers: a soft, slow-drifting glow on top (same subtle
     language as the crate panel's glow), the actual cassette-shell
     gradient underneath. Kept as extra background layers rather than a
     ::before/::after pseudo-element because both of those are already
     spoken for by the side-rail highlights below. */
  background:
    radial-gradient(220px 170px at 20% 20%, rgba(255,255,255,0.14), transparent 65%),
    linear-gradient(155deg, var(--brown-dark) 0%, var(--ink) 70%);
  background-size:220% 220%, 100% 100%;
  background-position:0% 0%, 0 0;
  border:3px solid var(--ink);
  border-radius:15px;
  padding:20px 22px 22px;
  position:relative;
  box-shadow:0 16px 34px -14px rgba(62,39,18,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
  scale:1;
  animation:sv-game-breathe 4.4s ease-in-out infinite, sv-game-glow 22s ease-in-out infinite;
}
/* subtle "alive" breathing pulse — uses the standalone `scale` property so
   it never fights the positional `transform` (translateX) above or the
   hover transform below */
@keyframes sv-game-breathe{
  0%,100%{ scale:1; }
  50%{ scale:1.018; }
}
/* Gentle glow drift, much subtler than a bright shine streak — driven
   through background-position (not a pseudo-element, since ::before/
   ::after are already used here). Only the first background layer's
   position is animated; the second (the actual shell gradient) is fixed. */
@keyframes sv-game-glow{
  0%,100%{ background-position:0% 0%, 0 0; }
  50%{ background-position:100% 100%, 0 0; }
}
.game-promo::before,
.game-promo::after{
  content:"";position:absolute;top:8px;bottom:8px;width:6px;background:rgba(251,243,226,0.08);border-radius:3px;
}
.game-promo::before{left:8px;}
.game-promo::after{right:8px;}
.game-promo:hover{transform:translateX(-30px) translateY(-4px);box-shadow:0 22px 40px -14px rgba(62,39,18,0.65);animation-play-state:paused, running;scale:1.02;}
.game-promo-top{display:flex;justify-content:space-between;align-items:center;}
.game-promo-eyebrow{
  font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  color:#ff9500;
}
.game-promo-badge{
  font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.08em;font-weight:700;
  background:var(--red);color:var(--paper);padding:3px 8px;border-radius:5px;
}
.game-promo-reels{
  margin:16px 0 8px;background:rgba(0,0,0,0.35);border-radius:8px;padding:14px 18px;
  display:flex;justify-content:space-around;align-items:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.5);
}
.game-promo-reel{
  width:34px;height:34px;border-radius:50%;
  background:
    repeating-conic-gradient(var(--cream) 0deg 8deg, transparent 8deg 45deg),
    radial-gradient(circle, rgba(0,0,0,0.55) 0 22%, var(--cream) 23% 26%, transparent 27%);
  animation:promospin 2.4s linear infinite;
}
@keyframes promospin{to{transform:rotate(360deg);}}
.game-promo h3{color:var(--cream);font-size:1.25rem;margin-top:14px;}
.game-promo p{color:rgba(251,243,226,0.62);font-size:0.86rem;margin-top:6px;}
.game-promo-cta{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;
  color:var(--paper);background:var(--red);padding:10px 14px;border-radius:8px;
}

/* ---- crate ---- */
.crate{padding:24px;}
.crate-label{
  font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;
  color:var(--brown-dark);margin-bottom:16px;display:flex;justify-content:space-between;
}
.crate-tapes{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.crate-hint{
  margin-top:16px;font-family:var(--f-mono);font-size:0.72rem;color:rgba(43,32,19,0.55);
  display:flex;align-items:center;gap:8px;
}
.crate-hint svg{flex-shrink:0;}

/* ---- tape card ---- */
.tape{
  --tint: var(--blue);
  background:var(--paper);
  border-radius:12px;
  padding:9px;
  position:relative;
  box-shadow:0 10px 20px -8px rgba(62,39,18,0.35);
  cursor:grab;
  translate:0 0;
  rotate:0deg;
  scale:1;
  transition:translate .32s cubic-bezier(.2,.8,.2,1),
    rotate .32s cubic-bezier(.2,.8,.2,1),
    scale .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s ease;
  user-select:none;
  border:1px solid rgba(255,255,255,0.8);
}
.tape:active{cursor:grabbing;}
.tape.dragging{opacity:0.35;}

/* ---- idle float: cassettes drift gently once they've revealed, each
   at a slightly different speed/phase/tilt so the crate feels alive
   rather than a static grid.
   This animates the standalone `translate` property (not `transform`)
   so it can never collide with the hover movement below — animating
   the same `transform` property from two different rules is what
   caused a visible jump/correction when hovering. `rotate` is set as
   a plain (non-animated) property per-tape for a fixed idle tilt. ---- */
@keyframes sv-tape-float{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -6px; }
}
.reveal-ready .tape.in-view{
  rotate:var(--tape-rot, 0deg);
  animation:sv-tape-float 3.6s ease-in-out infinite;
}
.reveal-ready .tape.in-view:nth-child(5n+1){ --tape-rot:-1.4deg; animation-duration:3.2s; }
.reveal-ready .tape.in-view:nth-child(5n+2){ --tape-rot:1.6deg;  animation-duration:4.1s; animation-delay:-1.4s; }
.reveal-ready .tape.in-view:nth-child(5n+3){ --tape-rot:-0.8deg; animation-duration:3.8s; animation-delay:-2.6s; }
.reveal-ready .tape.in-view:nth-child(5n+4){ --tape-rot:1.1deg;  animation-duration:3.4s; animation-delay:-0.7s; }
.reveal-ready .tape.in-view:nth-child(5n){    --tape-rot:-1.7deg; animation-duration:4.4s; animation-delay:-3.1s; }
.tape.dragging{ animation:none; }

/* ---- directional hover: cassettes pop up, right, down or left
   depending on their position in the grid, with a little tilt and
   scale so it reads as picking the tape up rather than just a lift.
   Sets translate/rotate/scale directly (overriding the idle float's
   `translate` and per-tape `rotate`), which transitions cleanly since
   they're independent properties rather than one shared `transform`. ---- */
.tape:hover{
  animation-play-state:paused;
  box-shadow:0 18px 32px -8px rgba(62,39,18,0.5);
  z-index:2;
  scale:1.035;
}
.tape:nth-child(4n+1):hover{ translate:0 -9px;   rotate:-3deg; }
.tape:nth-child(4n+2):hover{ translate:7px -3px; rotate:2.5deg; }
.tape:nth-child(4n+3):hover{ translate:0 7px;    rotate:3deg; }
.tape:nth-child(4n+4):hover{ translate:-7px -3px; rotate:-2.5deg; }

@media (prefers-reduced-motion: reduce){
  .reveal-ready .tape.in-view{ animation:none; }
  .tape:hover{ translate:0 0; rotate:0deg; scale:1; }
  .game-promo{ animation:none; }
}
.tape-shell{
  background:var(--tint);
  border-radius:8px;
  padding:11px 11px 9px;
  color:var(--paper);
}
.tape-reels{
  background:rgba(0,0,0,0.28);
  border-radius:6px;
  height:52px;
  display:flex;align-items:center;justify-content:space-around;
  padding:0 14px;
}
.reel{
  width:26px;height:26px;border-radius:50%;
  background:
    repeating-conic-gradient(var(--paper) 0deg 8deg, transparent 8deg 45deg),
    radial-gradient(circle, rgba(0,0,0,0.5) 0 22%, var(--paper) 23% 26%, transparent 27%);
  animation:spin 2.6s linear infinite;
  animation-play-state:paused;
}
.tape.spin .reel{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.tape-title{
  font-family:var(--f-mono);font-weight:700;font-size:0.76rem;
  margin-top:9px;line-height:1.28;letter-spacing:0.01em;
  min-height:2.4em;
}
.tape-meta{
  display:flex;justify-content:space-between;align-items:center;margin-top:7px;
  font-family:var(--f-mono);font-size:0.64rem;letter-spacing:0.05em;text-transform:uppercase;opacity:0.9;
}
.tape-cat-dot{width:7px;height:7px;border-radius:50%;background:var(--paper);display:inline-block;margin-right:5px;vertical-align:middle;}

/* category colour code — consistent site-wide meaning */
.tape[data-category="Film"]{--tint:var(--blue);}
.tape[data-category="Ads"]{--tint:var(--orange);}
.tape[data-category="Branding"]{--tint:var(--red);}
.tape[data-category="Sound Design"]{--tint:var(--green);}

/* ---- deck ---- */
.deck-stage{position:sticky;top:110px;}
.deck{padding:26px;}
.deck-top{
  display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;
  font-family:var(--f-mono);
}
.deck-brand{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(43,32,19,0.55);font-weight:700;}
.deck-readout{text-align:right;}
.deck-title{font-size:0.84rem;font-weight:700;color:var(--brown-dark);max-width:220px;}
.deck-cat{font-size:0.66rem;color:var(--red);letter-spacing:0.06em;text-transform:uppercase;margin-top:2px;font-weight:700;}

.deck-slot{
  position:relative;
  background:var(--ink);
  border-radius:12px;
  height:190px;
  padding:14px;
  box-shadow:inset 0 4px 14px rgba(0,0,0,0.5);
  overflow:hidden;
}
.slot-empty-msg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(251,243,226,0.3);
}
.loaded-tape{
  position:absolute;left:14px;right:14px;top:100%;
  transition:top .5s cubic-bezier(.2,.8,.2,1);
}
.loaded-tape.inserted{top:14px;}
.deck-door{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#4a3520,var(--ink));
  transform-origin:top;
  transform:rotateX(0deg);
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
}
.deck.loaded .deck-door{transform:rotateX(-96deg);}
.deck-door::after{
  content:"◂ TAPE DOOR";
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.12em;color:rgba(251,243,226,0.3);
}

.deck-controls{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap;}
.deck-btn{
  background:var(--paper);
  border:1px solid var(--line-strong);
  color:var(--brown-dark);
  width:46px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, background .15s ease;
  box-shadow:0 3px 0 rgba(62,39,18,0.25);
}
.deck-btn:hover{background:var(--beige);}
.deck-btn:active,.deck-btn.pressed{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0.4);}
.deck-btn[disabled]{opacity:0.35;cursor:not-allowed;}
.deck-btn.play{background:var(--green);color:var(--paper);border-color:var(--green);}
.deck-btn.play:hover{filter:brightness(1.08);}
.deck-btn.eject{margin-left:auto;background:var(--red);border-color:var(--red);color:var(--paper);}
.deck-btn.eject:hover{filter:brightness(1.08);}

.deck-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;gap:18px;}
.counter{
  background:var(--ink);border-radius:8px;padding:7px 10px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.5);
  font-family:var(--f-mono);
}
.counter-label{font-size:0.56rem;letter-spacing:0.15em;color:rgba(251,243,226,0.5);text-transform:uppercase;}
.counter-num{font-size:1.15rem;color:var(--yellow);letter-spacing:0.08em;font-weight:700;}
.vu{display:flex;gap:3px;align-items:flex-end;height:34px;flex:1;justify-content:center;}
.vu-bar{width:5px;background:var(--green);border-radius:1px;height:10%;transition:height .09s linear, background .09s linear;}

.screen{
  margin-top:18px;background:var(--ink);border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;
}
.screen video{width:100%;height:100%;object-fit:cover;display:none;}
.screen.has-video video{display:block;}
.screen-static{
  font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(251,243,226,0.3);
  background:repeating-linear-gradient(0deg, rgba(251,243,226,0.03) 0 2px, transparent 2px 4px);
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.screen.has-video .screen-static{display:none;}

/* ============ CATALOGUE ============ */
.catalogue{}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.filter-btn{
  background:var(--paper);border:1px solid var(--line-strong);color:var(--brown-dark);
  font-family:var(--f-mono);font-weight:700;
  font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;padding:10px 18px;border-radius:999px;
  transition:all .15s ease;
}
.filter-btn.active,.filter-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.catalogue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}
.catalogue-grid .tape{width:100%;}

/* ============ MINI SECTIONS (home) ============ */
.mini-services .card-grid{margin-top:8px;}
.why-teaser .card-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){ .why-teaser .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .why-teaser .card-grid{grid-template-columns:1fr;} }
.about-teaser{}
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:center;}
.liner{padding:32px;position:relative;}
.liner::before{
  content:"LINER NOTES";
  position:absolute;top:-13px;left:26px;background:var(--red);color:var(--paper);
  font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.14em;padding:5px 12px;border-radius:999px;font-weight:700;
}
.liner p{font-size:0.98rem;color:rgba(43,32,19,0.78);margin:14px 0 0;}
.liner p:first-of-type{margin-top:14px;}
.about-copy h2{font-size:clamp(2rem,4vw,2.8rem);margin-top:12px;}
.about-copy p{margin-top:16px;color:rgba(43,32,19,0.72);font-size:1.02rem;max-width:480px;}

.subscribe-teaser .glass{padding:44px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}

@media (max-width:980px){
  .hero-top{grid-template-columns:1fr;}
  .game-promo{max-width:400px;transform:none;margin:0 auto;}
  .game-promo:hover{transform:translateY(-4px);}
  .hero-grid{grid-template-columns:1fr;}
  .deck-stage{position:static;}
  .crate-tapes{grid-template-columns:repeat(3,1fr);}
  .about-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .crate-tapes{grid-template-columns:1fr 1fr;}

  /* centered on phones (the desktop translateX offset doesn't apply here) */
  .game-promo{
    transform:none;
    margin:0 auto;
    max-width:340px;
  }
  .game-promo:hover{transform:translateY(-4px);}
}