/*
Theme Name: Kerpoc
Description: Custom theme for Kerpoc, a rhythm-battle game (concert-stage aesthetic). Warm magenta/orange/gold palette on deep violet-black, Monoton display type, equalizer visualizer, spinning vinyl, interactive rhythm mini-game, scrolling setlist marquee, vertical testimonial ticker. Deliberately non-templated structure.
Version: 1.0
*/

:root{
  --bg:        #17091F;
  --surface:   #241033;
  --surface-2: #34164A;
  --ink:       #FBF3FF;
  --ink-dim:   #C7AFD9;
  --magenta:   #FF3D8F;
  --magenta-deep:#C41F68;
  --orange:    #FF7A3D;
  --gold:      #FFD23D;
  --violet:    #7B2FE0;
  --font-display:'Monoton', cursive;
  --font-heading:'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius:    16px;
  --container: 1180px;
}

@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); margin:0; line-height:1.65; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1{ font-family:var(--font-display); font-weight:400; line-height:1.2; margin:0 0 .3em; font-size:clamp(2.2rem,5vw,3.8rem); background:linear-gradient(120deg,var(--gold),var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2,h3,h4{ font-family:var(--font-heading); font-weight:800; line-height:1.15; margin:0 0 .5em; color:var(--ink); }
h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--ink-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.eyebrow::before{ content:'♪'; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; font-family:var(--font-heading); font-weight:800; font-size:1rem; cursor:pointer; border:none; transition:transform .15s ease; }
.btn-primary{ background:linear-gradient(120deg,var(--magenta),var(--orange)); color:#fff; box-shadow:0 8px 20px -6px rgba(255,61,143,.5); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink-dim); }
.btn-ghost:hover{ border-color:var(--ink); }

/* HEADER */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(23,9,31,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--surface-2); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo svg{ height:40px; width:auto; }
.primary-nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.primary-nav a{ font-family:var(--font-heading); font-weight:600; font-size:.95rem; color:var(--ink-dim); }
.primary-nav a.current{ color:var(--gold); }
.menu-toggle{ display:none; background:var(--surface-2); border:none; border-radius:10px; cursor:pointer; padding:8px 12px; color:var(--ink); font-family:var(--font-heading); font-weight:700; }
@media (max-width:900px){
  .primary-nav{ position:fixed; inset:80px 0 0 0; background:var(--bg); transform:translateY(-110%); transition:transform .3s ease; overflow-y:auto; }
  .primary-nav.open{ transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; padding:24px; gap:0; }
  .primary-nav a{ display:block; padding:16px 4px; font-size:1.15rem; border-bottom:1px solid var(--surface-2); }
  .menu-toggle{ display:block; }
  .header-cta .btn-primary{ display:none; }
}
.header-cta{ display:flex; align-items:center; gap:14px; }

/* HERO — stage gradient, asymmetric bottom-right text, vinyl + equalizer */
.hero{ position:relative; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden;
  background:radial-gradient(ellipse at 20% 15%, rgba(255,122,61,.35), transparent 55%),
             radial-gradient(ellipse at 85% 75%, rgba(255,61,143,.3), transparent 55%),
             var(--bg);
}
.hero-stage-lights{ position:absolute; inset:0; overflow:hidden; }
.beam{ position:absolute; top:-10%; width:120px; height:140%; background:linear-gradient(180deg, rgba(255,210,61,.18), transparent); transform-origin:top center; animation:beam-sway 6s ease-in-out infinite; }
@keyframes beam-sway{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }

.hero-grid{ position:relative; z-index:1; width:100%; padding:60px 0 70px; display:flex; justify-content:flex-end; }
.hero-copy{ max-width:640px; text-align:right; }
.hero-copy .lede{ font-size:1.1rem; max-width:52ch; margin-left:auto; }
.hero-actions{ display:flex; gap:16px; margin-top:26px; flex-wrap:wrap; justify-content:flex-end; }

/* VINYL — spinning record, signature motif reused across pages */
.vinyl{ position:relative; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at center, var(--magenta) 0 18%, var(--bg) 19% 30%, var(--surface-2) 31% 42%, var(--bg) 43% 52%, var(--surface-2) 53% 62%, var(--bg) 63% 100%); animation:vinyl-spin 4s linear infinite; box-shadow:0 0 30px rgba(255,61,143,.35); flex-shrink:0; }
@keyframes vinyl-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.vinyl-inline{ display:inline-block; vertical-align:middle; }

/* EQUALIZER — animated audio-visualizer bars */
.equalizer{ display:flex; align-items:flex-end; gap:5px; height:60px; }
.equalizer span{ width:7px; background:linear-gradient(180deg,var(--gold),var(--magenta)); border-radius:3px; animation:eq-bounce 1.2s ease-in-out infinite; }
.equalizer span:nth-child(1){ animation-delay:0s; }
.equalizer span:nth-child(2){ animation-delay:.15s; }
.equalizer span:nth-child(3){ animation-delay:.3s; }
.equalizer span:nth-child(4){ animation-delay:.1s; }
.equalizer span:nth-child(5){ animation-delay:.25s; }
.equalizer span:nth-child(6){ animation-delay:.05s; }
.equalizer span:nth-child(7){ animation-delay:.35s; }
@keyframes eq-bounce{ 0%,100%{ height:12px; } 50%{ height:55px; } }

/* SETLIST MARQUEE — scrolling ticker right under hero */
.setlist-marquee{ background:var(--surface); border-top:2px solid var(--surface-2); border-bottom:2px solid var(--surface-2); overflow:hidden; white-space:nowrap; padding:16px 0; }
.setlist-track{ display:inline-block; animation:marquee-scroll 26s linear infinite; font-family:var(--font-mono); font-size:1.05rem; color:var(--gold); }
.setlist-track span{ display:inline-block; padding:0 32px; }
@keyframes marquee-scroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

section{ padding:76px 0; }
.section-head{ max-width:660px; margin-bottom:44px; }
.orange-band{ background:linear-gradient(135deg,#3A1740,var(--surface)); }
.gold-band{ background:linear-gradient(135deg, rgba(255,210,61,.12), transparent), var(--surface); }

/* RHYTHM MINI-GAME — signature interactive widget */
.rhythm-game{ background:var(--surface); border-radius:24px; padding:40px; text-align:center; position:relative; overflow:hidden; }
.rhythm-pulse{ width:140px; height:140px; border-radius:50%; margin:0 auto 24px; background:radial-gradient(circle, var(--magenta), var(--violet)); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:800; font-size:1.6rem; cursor:pointer; user-select:none; box-shadow:0 0 0 0 rgba(255,61,143,.5); animation:pulse-ring 1s ease-in-out infinite; }
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(255,61,143,.5); } 70%{ box-shadow:0 0 0 24px rgba(255,61,143,0); } 100%{ box-shadow:0 0 0 0 rgba(255,61,143,0); } }
.rhythm-combo{ font-family:var(--font-mono); font-size:1.2rem; color:var(--gold); margin-top:8px; }
.rhythm-feedback{ font-family:var(--font-mono); font-size:.9rem; color:var(--ink-dim); min-height:24px; }

/* Mirrored feature layout — image LEFT, text right (opposite of usual) */
.mirror-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; }
@media (max-width:900px){ .mirror-grid{ grid-template-columns:1fr; } }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border-radius:var(--radius); padding:26px; border:1px solid var(--surface-2); }
.card .num{ font-family:var(--font-mono); color:var(--gold); font-size:.85rem; }

/* TRACK/SONG GALLERY — vinyl-styled cards */
.track-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; }
.track-card{ background:var(--surface); border-radius:var(--radius); padding:22px; text-align:center; border:1px solid var(--surface-2); }
.track-card .vinyl{ width:90px; height:90px; margin:0 auto 14px; animation-duration:6s; }
.track-card h4{ font-size:1rem; margin-bottom:4px; }
.track-card .bpm{ font-family:var(--font-mono); font-size:.78rem; color:var(--gold); }

/* VERTICAL TESTIMONIAL TICKER — auto-scrolling column, not a grid */
.ticker-column{ height:480px; overflow:hidden; position:relative; mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track-v{ animation:ticker-scroll-v 22s linear infinite; }
@keyframes ticker-scroll-v{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } }
.ticker-item{ background:var(--surface); border-radius:14px; padding:20px 24px; margin-bottom:16px; border:1px solid var(--surface-2); }
.ticker-item .stars{ color:var(--gold); margin-bottom:6px; }
.ticker-who{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim); margin-top:8px; display:block; }

/* ZINE (Blog) — fanzine cover grid */
.zine-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:26px; }
.zine-cover{ background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--surface-2); }
.zine-cover .cover-top{ aspect-ratio:3/4; background:linear-gradient(160deg,var(--magenta),var(--violet)); display:flex; align-items:center; justify-content:center; position:relative; }
.zine-cover img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.zine-cover .inner{ padding:18px; }
.zine-cover .date{ font-family:var(--font-mono); font-size:.72rem; color:var(--gold); }

article.single-post img.featured{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin-bottom:26px; }
.entry-content img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin:8px 0 22px; }
.entry-content h2{ margin-top:1.3em; font-size:1.4rem; }
.post-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); margin-bottom:20px; }

/* FORMS */
.form-box{ background:var(--surface); border-radius:var(--radius); padding:36px; border:1px solid var(--surface-2); }
.form-grid{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
label{ font-family:var(--font-heading); font-weight:700; font-size:.85rem; display:block; margin-bottom:6px; color:var(--gold); }
input, textarea, select{ width:100%; background:var(--bg); border:2px solid var(--surface-2); border-radius:10px; padding:12px 14px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
input:focus, textarea:focus{ outline:2px solid var(--magenta); outline-offset:1px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-success{ background:rgba(255,210,61,.1); border:2px solid var(--gold); border-radius:10px; padding:16px 20px; margin-bottom:18px; }
.form-error{ background:rgba(255,61,143,.1); border:2px solid var(--magenta); border-radius:10px; padding:16px 20px; margin-bottom:18px; }
.star-input{ display:flex; gap:6px; direction:rtl; justify-content:flex-end; }
.star-input input{ display:none; }
.star-input label{ font-size:1.7rem; color:var(--surface-2); cursor:pointer; margin:0; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--gold); }

.cta-band{ background:linear-gradient(120deg,var(--magenta-deep),var(--violet)); border-radius:28px; padding:60px; text-align:center; }

.legal-content{ max-width:760px; }
.legal-content h2{ font-size:1.4rem; margin-top:1.5em; }

.site-footer{ border-top:1px solid var(--surface-2); padding:54px 0 28px; margin-top:20px; background:var(--surface); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:var(--font-heading); font-size:1rem; color:var(--gold); margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:var(--magenta); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--surface-2); padding-top:20px; font-size:.85rem; color:var(--ink-dim); }

.text-center{ text-align:center; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--magenta); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:16px; top:16px; }

/* COOKIE BAR */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:none; background:var(--surface); color:var(--ink); border-top:3px solid var(--gold); padding:22px 0; }
.cookie-bar.show{ display:block; }
.cookie-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cookie-bar p{ color:var(--ink-dim); margin:0; max-width:70ch; font-size:.95rem; }
.cookie-bar a{ color:var(--gold); text-decoration:underline; }
.cookie-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.cookie-actions .btn{ padding:12px 24px; }