/* =========================================
   aery records — sitewide stylesheet
   ========================================= */

/* ---------- Theme tokens ---------- */
:root{
  /* backgrounds */
  --bg1:#f7d9ff;
  --bg2:#b8e6ff;

  /* glass + strokes */
  --glassA:rgba(255,255,255,.88);
  --glassB:rgba(255,255,255,.74);
  --glass-softA:rgba(255,255,255,.75);
  --glass-softB:rgba(255,255,255,.55);
  --glass-stroke:rgba(255,255,255,.95);

  /* ink */
  --ink:#222325;
  --ink-muted:#4a4c50;

  /* accents */
  --accent:#ff7ab6;
  --accent-2:#7af0e0;
  --accent-3:#ffd36e;

  /* layout */
  --max-wrap:1100px;
  --radius-xl:24px;
  --radius-lg:18px;

  /* CRT */
  --crt-scan:.14;
  --crt-mask:.06;
  --crt-vignette:.18;

  /* Under construction bar */
  --uc-speed: 16s; /* make slower/faster by increasing/decreasing */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ min-height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2)) fixed;
  text-transform:lowercase;
  overflow-x:hidden;
  padding-top: var(--header-h, 64px);
}

/* containers */
.wrap{ max-width:var(--max-wrap); margin:0 auto; padding:16px 20px; }
.wrap-tight{ max-width:var(--max-wrap); margin:0 auto; padding:0 20px; }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.spacer{ height:8px; }
#site-wrap { position: relative; z-index: 2; }

/* ---------- Header / Nav ---------- */
header.site{
  position: fixed; top:0; left:0; right:0;
  z-index:10010;
  backdrop-filter: blur(10px) saturate(140%);
  background:linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,.55));
  border-bottom:1px solid var(--glass-stroke);
  will-change: transform;
  transform: translateZ(0);
}
.brand{ display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.5px; }
.dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px var(--accent); }
nav a{
  color:var(--ink);
  text-decoration:none;
  margin-right:18px;
  font-weight:600;
  opacity:.9;
}
nav a:hover{ opacity:1; text-decoration:underline; }

/* Make any “inline” artist links look like nav */
a.navlink{ color:var(--ink); text-decoration:none; font-weight:600; opacity:.9; }
a.navlink:hover{ opacity:1; text-decoration:underline; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:70vh; display:grid; place-items:center; padding:48px 20px 24px; }
.hero-copy{
  position:relative; z-index:2; text-align:center; max-width:820px;
  background:linear-gradient(180deg,var(--glassA),var(--glassB));
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-xl);
  padding:24px 22px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}
h1{ margin:0 0 6px; font-size:clamp(28px,5vw,56px); line-height:1.02; }
.tag{ color:var(--ink-muted); }

  canvas#stage{
    position: fixed;
    inset: 0;
    width: 100vw;     /* <-- viewport width */
    height: 100vh;    /* <-- viewport height */
    display: block;
    z-index: 0;
    pointer-events: auto;
  }

/* ---------- Panels / Sections ---------- */
section{ position:relative; z-index:2; }
.panel{
  background:linear-gradient(180deg,var(--glass-softA),var(--glass-softB));
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-xl);
  padding:24px;
  margin:40px 20px;
  box-shadow:0 20px 40px rgba(0,0,0,.06);
}
.panel + .panel{ margin-top:56px; }
.kicker{ color:var(--accent); font-weight:700; letter-spacing:.08em; font-size:12px; text-transform:uppercase; }
h2{ margin:6px 0 14px; font-size:clamp(22px,3vw,34px); }
.muted{ color:var(--ink-muted); }

/* ---------- Grids ---------- */
.lineup{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.artist{ background:rgba(255,255,255,.65); border:1px solid var(--glass-stroke); border-radius:18px; padding:14px; }
.artist .name{ font-weight:700; margin-bottom:6px; }

.releases{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.release{
  background:rgba(255,255,255,.9);
  border:1px solid var(--glass-stroke);
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.release img{ width:100%; height:auto; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,.08); }
.release .meta{ font-size:12px; color:var(--ink-muted); }

/* Bandcamp iframes */
.embed{
  aspect-ratio: 1.4 / 1;
  width: 100%;
  max-width: 720px;
  border: 0;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  background: #eee;
}

/* ---------- Buttons / Pills ---------- */
.pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#111; font-weight:800; text-decoration:none; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}

/* ---------- Forms ---------- */
footer.site form,
.contact-form{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px;
}
footer.site input, footer.site textarea,
.contact-form input, .contact-form textarea{
  border-radius:10px; border:1px solid var(--glass-stroke); padding:10px 12px; font: inherit;
}
footer.site button, .contact-form button{
  border-radius:999px; padding:10px 16px; border:1px solid rgba(0,0,0,.05);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  font-weight:800; cursor:pointer;
}

/* ---------- Footer ---------- */
footer.site{ color:var(--ink-muted); text-align:center; padding:56px 10px 40px; }

/* ---------- Under construction banner (Option A, slower by --uc-speed) ---------- */
.under-construction{
  position: relative; z-index: 4;
  background: repeating-linear-gradient(135deg, #000 0 12px, #ffd36e 12px 24px);
  color: #000; text-align: center; font-weight: 800; letter-spacing: 1px;
  padding: 8px 0; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  overflow:hidden;
}
.under-construction::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%);
  animation: uc-sheen var(--uc-speed) linear infinite;
}
@keyframes uc-sheen{ to{ transform: translateX(100%); } }

/* ---------- Artist page tweaks ---------- */
.artist-page section,
.artist-page .panel{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 2rem;
}
.artist-header{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; }
.artist-pic{ width:120px; height:120px; border-radius:18px; object-fit:cover; box-shadow:0 10px 20px rgba(0,0,0,.08); border:1px solid var(--glass-stroke); }
@media (max-width:600px){ .artist-header{ grid-template-columns:1fr; } .artist-pic{ justify-self:center; } }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.discog{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

/* ---------- Social icons (used by socials.js) ---------- */
.socials{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.socials a{
  width:40px; height:40px; display:inline-grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid var(--glass-stroke);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  color:var(--ink);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.socials a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
}
.socials svg{ width:22px; height:22px; fill:currentColor; }
.socials a.bc{color:#00d0ff}
.socials a.ig{color:#d62976}
.socials a.x{color:#111}
.socials a.yt{color:#ff0000}
.socials a.sc{color:#ff7700}
.socials a.sp{color:#1db954}
.socials a.lk{color:#0aa}
.socials a.mail{color:#444}
.socials a.tt{color:#000}

/* ===== CRT overlay (scanlines + mask + slight warp) ===== */
:root{
  --crt-scan: .14;
  --crt-mask: .06;
  --crt-vignette: .18;
}

/* default: off (hidden) */
.crt-overlay,
.crt-bezel { display: none; }

/* turn ON when body has .crt-on (toggled by your JS) */
body.crt-on .crt-overlay,
body.crt-on .crt-bezel { display: block; }

body.crt-on #site-wrap {
  /* gentle warp & punch */
  filter: contrast(1.03) saturate(1.05); 
}

/* scanlines + shadow mask + vignette */
.crt-overlay{
  position: fixed; inset: 0; pointer-events: none;
  z-index: 10050; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--crt-scan)) 0 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(to right,
      rgba(255,0,0,var(--crt-mask)) 0 1px,
      rgba(0,255,0,var(--crt-mask)) 1px 2px,
      rgba(0,0,255,var(--crt-mask)) 2px 3px),
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 55%, rgba(0,0,0,var(--crt-vignette)) 100%);
  background-size: 100% 4px, 3px 100%, 100% 100%;
  animation: crt-flicker 4s ease-in-out infinite;
}
@keyframes crt-flicker { 0%,100%{opacity:1} 50%{opacity:.97} }

.crt-bezel{
  position: fixed; inset: 0; pointer-events: none;
  z-index: 10040; border-radius: 18px;
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.55),
    inset 0 0 24px rgba(0,0,0,.35),
    0 0 0 2px rgba(0,0,0,.25);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  mix-blend-mode: multiply;
}

/* the little toggle chip (optional) */
#crt-toggle{
  position: fixed; right: 8px; bottom: 8px; z-index: 9999;
  font: 12px/1 ui-monospace,monospace; padding: 6px 10px;
  border-radius: 8px; border: 1px solid rgba(0,0,0,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  cursor: pointer;
}
@media (prefers-reduced-motion:reduce){ .crt-overlay{ animation: none; } }

/* Center common containers */
.wrap,
.wrap-tight,
.hero-copy,
.panel,
.artist-page section,
.artist-page .panel {
  margin-left: auto;
  margin-right: auto;
}

/* Ensure they don’t “stick” to the right due to text-align */
section, .panel { text-align: initial; }

/* Keep your spacing */
.panel { margin: 40px 20px; }

/* Optional: cap widths so centering is obvious */
.hero-copy { max-width: 820px; }
.artist-page section,
.artist-page .panel { max-width: 900px; }
/* Center panels and wrappers on non-artist pages, too */
body:not(.artist-page) .panel { 
  max-width: 1100px; 
  margin: 40px auto;        /* vertical spacing + centered horizontally */
}

body:not(.artist-page) .wrap,
body:not(.artist-page) .wrap-tight {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure hero copy on non-artist pages also centers as a block */
body:not(.artist-page) .hero-copy {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* Reusable cards grid (great for pricing/paths) */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Optional polish for the cards inside */
.grid-cards .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-cards .card .actions {    /* place buttons at the bottom */
  margin-top: auto;
}

/* If that section had center text that made things look “lefty”, undo it */
#pick-your-path .grid-cards { text-align: initial; }

/* Pricing grid polish */
.pricing.grid-cards {
  gap: 22px;
}

/* Individual price cards */
.price.card {
  background: linear-gradient(180deg, var(--glassA), var(--glassB));
  border: 1px solid var(--glass-stroke);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  display: flex;              /* lets CTA stick to bottom */
  flex-direction: column;
  text-align: left;           /* content reads like a card, not centered */
}

/* Top label */
.price .name {
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .2px;
  margin-bottom: 2px;
}

/* Sub label under name */
.price .muted {
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Big price row */
.price .cost {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  margin: 8px 0 12px;
}
.price .cost .unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-left: 4px;
}

/* Feature list */
.price ul {
  margin: 0 0 14px 18px;
  padding: 0;
}
.price ul li {
  margin: 6px 0;
}

/* CTA pinned to bottom edge of the card */
.price .cta { margin-top: auto; }

/* Make pills fill on hover for emphasis */
.price .pill {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}