/* =========================================================
   BIGBAD — base theme with centered slow-pan masthead
   ========================================================= */

:root{
  --bg:#0b0b0c; --bg-elev:#131316; --fg:#f5f5f6; --muted:#9aa0a6; --accent:#e11d48;
  --space-2:.5rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
  --radius:12px; --radius-sm:8px; --max:80rem;

  /* Masthead art controls */
  --art-scale: 1.05;            /* small zoom, no crop */
  --pan-duration: 20s;          /* slower = bigger number */
  --pan-phase: 0.5;             /* 0 = left, 0.5 = center, 1 = right (start point) */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; border-radius:var(--radius-sm); }
.wrap{ width:min(100% - 2rem, var(--max)); margin-inline:auto; }

/* A11y */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem 1rem; border-radius:6px; z-index:1000; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Header */
.site-header{
  display:flex; align-items:center; gap:var(--space-4);
  padding-block:var(--space-4);
  position:sticky; top:0;
  background:linear-gradient(180deg, rgba(11,11,12,.9), rgba(11,11,12,.6) 70%, rgba(11,11,12,0));
  backdrop-filter:blur(8px); z-index:10;
}
.logo{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.logo img{ display:block; height:28px; width:auto; }
@media (min-width:768px){ .logo img{ height:32px; } }
.menu-toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem;
  border:1px solid #303038; background:#141418; color:#fff; border-radius:8px; }
.site-nav{ display:none; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:var(--space-4); }
.site-nav a{ text-decoration:none; color:inherit; }
.site-nav a[aria-current="page"]{ color:var(--accent); font-weight:600; }
@media (min-width:768px){ .menu-toggle{ display:none; } .site-nav{ display:block; margin-left:auto; } }

/* Masthead (home) */
.masthead{
  position:relative;
  min-height: clamp(22rem, 58vh, 44rem);
  display:flex; flex-direction:column; justify-content:flex-start;
  isolation:isolate;
}
.masthead::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.55) 0%,
              rgba(0,0,0,.35) 40%,
              rgba(11,11,12,.85) 100%);
  z-index:-1; pointer-events:none;
}
.header--overlay{ background:transparent; position:relative; }
.header--overlay .menu-toggle{ border-color:#ffffff40; background:#00000040; }
.header--overlay .site-nav a{ color:#f0f0f0; }
.header--overlay .site-nav a[aria-current="page"]{ color:var(--accent); }

/* Container still clips the art edges */
.masthead-art{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
}

/* Image: full height, extra width so there's room to pan both sides */
.masthead-art img{
  height:100%;
  width:auto;
  min-width:130%;        /* ensures offscreen buffer left & right */
  max-width:none;
  object-fit:contain;    /* never crop */
  border-radius:0 !important;

  /* Compose slow pan + hover offsets via CSS variables */
  --pan-x: 0%;
  --hover-x: 0%;
  --hover-y: 0%;
  --hover-r: 0deg;

  transform:
    translateX(var(--pan-x))
    translateX(var(--hover-x))
    translateY(var(--hover-y))
    rotate(var(--hover-r))
    scale(var(--art-scale));

  transform-origin: 50% 50%;
  animation: pan-sway var(--pan-duration, 20s) linear infinite alternate;
  /* Start in the middle of the cycle so travel is symmetric from the start */
  animation-delay: calc(var(--pan-duration, 20s) * -0.5);
  will-change: transform;
}

/* Wider sway so both sides get visible travel */
@keyframes pan-sway{
  from { transform: translateX(-6%)  translateX(var(--hover-x)) translateY(var(--hover-y)) rotate(var(--hover-r)) scale(var(--art-scale)); }
  to   { transform: translateX( 6%)  translateX(var(--hover-x)) translateY(var(--hover-y)) rotate(var(--hover-r)) scale(var(--art-scale)); }
}

/* If you don’t want to honor “Reduce Motion”, delete this */
@media (prefers-reduced-motion: reduce){
  .masthead-art img{ animation: none; }
}


/* Hero inside masthead */
.masthead .hero{
  position:relative;
  padding-block-start: clamp(1rem, 6vh, 3rem);
  padding-block-end:   clamp(1.25rem, 5vh, 3rem);
}
.masthead .hero .display{ margin-top:0; }

/* Type */
.display{ font-size:clamp(2.5rem, 6vw, 4.5rem); line-height:1.1; margin:0 0 var(--space-4); }
.section-title{ font-weight:800; letter-spacing:.02em; margin:0 0 var(--space-6); }
.lede{ font-size:clamp(1rem, 1.2vw, 1.125rem); max-width:60ch; color:#e6e6e7; }
.muted{ color:var(--muted); }

/* Buttons */
.btn{ background:var(--fg); color:#000; padding:.75rem 1rem; border-radius:999px; text-decoration:none; font-weight:700; }
.btn:hover{ background:#fff; }
.link{ text-underline-offset:3px; }

/* Marquee */
.marquee{
  position:absolute; inset:0 0 auto 0;
  height:2.6rem; overflow:hidden;
  color:rgba(255,255,255,.45);
  pointer-events:none; z-index:0;
}
.marquee-track{
  display:inline-block; min-width:100%; white-space:nowrap; padding-block:.45rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(0.95rem, 1.5vw, 1.15rem);
  animation: marquee 75s linear infinite;
  will-change: transform;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* Grids */
.cover-grid,.product-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-8);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.cover-link,.product-link{
  text-decoration:none; color:inherit; display:block;
  background:var(--bg-elev); border:1px solid #24242a; border-radius:var(--radius); overflow:hidden;
}
.cover-link img,.product-img img{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.cover-meta,.product-meta{ padding:var(--space-4); }
.product-img{ background:#0f0f12; }
.product-link:hover,.cover-link:hover{ border-color:#3a3a42; }
.more{ margin-top:var(--space-4); }

/* ---------- Featured Releases: slide-up overlay cards ---------- */
.cover-link{
  position: relative;           /* make it a positioning context */
  overflow: hidden;             /* hide overlay while it’s offscreen */
  isolation: isolate;           /* keep overlay stacking clean */
}

.cover-link img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;          /* consistent squares; remove if you prefer natural */
  object-fit: cover;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* The overlay that slides up */
.cover-meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-4);
  color: #fff;
  /* gradient that gets denser toward the bottom */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 20%,
    rgba(0,0,0,.85) 100%
  );
  transform: translateY(100%);        /* hidden below the card */
  transition: transform .35s ease;    /* slide duration */
  z-index: 1;
}

/* Titles inside the overlay */
.cover-meta h3{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
}
.cover-meta .muted{
  margin: 0 0 .5rem 0;
  color: #e5e7eb;        /* lighter on dark gradient */
  opacity: .9;
}
.cover-meta .blurb{
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  opacity: .95;
}

/* Reveal on hover AND keyboard focus */
.cover-link:hover .cover-meta,
.cover-link:focus .cover-meta,
.cover-link:focus-visible .cover-meta{
  transform: translateY(0);
}

/* slightly lift the whole card on hover */
.cover-link:hover{ transform: translateY(-2px); transition: transform .2s ease; }

/* Respect reduce-motion settings */
@media (prefers-reduced-motion: reduce){
  .cover-meta{ transition: none; transform: translateY(0); }
}

/* On touch devices (no hover), show the text by default */
@media (hover: none){
  .cover-meta{ transform: translateY(0); }
}

/* Cards */
.card-grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-8);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.card{ background:var(--bg-elev); border:1px solid #24242a; border-radius:var(--radius); overflow:hidden; }
.card-body{ padding:var(--space-4); }

/* Product detail */
.product-detail{ display:grid; gap:var(--space-8); align-items:start; }
@media (min-width:900px){ .product-detail{ grid-template-columns:1.2fr 1fr; } }
.price{ font-size:1.25rem; font-weight:700; }
.options{ margin-block:var(--space-4); }
.chip-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ background:#1c1c22; color:#fff; border:1px solid #33343c; padding:.5rem .75rem; border-radius:999px; }
.chip[aria-pressed="true"],.chip:hover{ border-color:var(--accent); color:#fff; }
.specs{ line-height:1.8; }

/* Toolbar */
.toolbar{ margin-top:var(--space-4); display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.input{ width:100%; max-width:24rem; padding:.75rem 1rem; border-radius:10px; border:1px solid #2a2a30; background:#131316; color:#fff; }
.select-sm{ max-width:12rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Contact/Footer */
.contact{ padding-block:var(--space-12); }
.site-footer{ padding-block:var(--space-8); border-top:1px solid #24242a; margin-top:var(--space-12); font-size:.95rem; color:var(--muted); }

/* Reveal */
[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  body.reveal-ready [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
  body.reveal-ready [data-reveal].in{ opacity:1; transform:none; }
}

/* Upcoming Releases */
.upcoming{ padding-block: var(--space-12); }
.release-feature{ display:grid; gap: var(--space-6); align-items:start; }
.release-art img{ border-radius: var(--radius); }
.release-info h3{ margin-top:0; }
@media (min-width:900px){
  .release-feature{ grid-template-columns: 1fr 1.2fr; }
}

/* Wiggle animation hook (optional class if you keep using it) */
@keyframes wiggle {
  0%   { transform: translateX(-3%) rotate(0deg) scale(1.0); }
  20%  { transform: translateX(-6%) rotate(-2deg) scale(1.05); }
  40%  { transform: translateX(0%)  rotate(2deg)  scale(1.05); }
  60%  { transform: translateX(-6%) rotate(-2deg) scale(0.98); }
  80%  { transform: translateX(0%)  rotate(2deg)  scale(1.02); }
  100% { transform: translateX(-3%) rotate(0deg) scale(1.0); }
}
.masthead-art .pan-layer > img.wiggle{
  animation: wiggle var(--wiggle-speed, 1s) ease-in-out infinite;
}