/* Lineup Festival — landing page. Dark neon psytrance, ported from the app design tokens. */

:root {
  /* surfaces */
  --bg:#06050b; --panel:#0e0b18; --panel-2:#140f22; --hairline:#241a3a;
  /* text */
  --text:#efe9ff; --dim:#9c8fc4; --faint:#6b5f8f;
  /* neon */
  --magenta:#ff2e9a; --cyan:#22e7ff; --lime:#c4ff3d; --violet:#a64dff; --red:#ff3b6b;
  /* fonts */
  --display:"Syne", system-ui, sans-serif;
  --body:"Sora", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1120px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---------- atmospheric layers (fixed) ---------- */
.glows, .grain, .vignette { position:fixed; inset:0; pointer-events:none; }
.glows {
  z-index:0;
  background:
    radial-gradient(70% 50% at 15% 4%, rgba(166,77,255,.22), transparent 60%),
    radial-gradient(60% 45% at 88% 22%, rgba(34,231,255,.13), transparent 60%),
    radial-gradient(75% 55% at 50% 96%, rgba(255,46,154,.12), transparent 65%),
    radial-gradient(50% 35% at 50% 50%, rgba(255,46,154,.04), transparent 70%);
}
.grain {
  z-index:60; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette { z-index:1; box-shadow:inset 0 0 200px 30px rgba(0,0,0,.6); }

main, .topbar, .footer { position:relative; z-index:2; }

/* ---------- glow utils ---------- */
.txt-glow-magenta { text-shadow:0 0 22px rgba(255,46,154,.65), 0 0 6px rgba(255,46,154,.5); }

/* ---------- top bar ---------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:18px 22px;
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(6,5,11,.85), rgba(6,5,11,0));
}
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); }
.brand-name { font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em; }
.brand.small .brand-name { font-size:15px; color:var(--dim); }
.brand-eq { display:inline-flex; align-items:flex-end; gap:2.5px; height:18px; }
.brand-eq i {
  width:3px; border-radius:2px; display:block;
  background:var(--magenta); box-shadow:0 0 8px rgba(255,46,154,.6);
}
.brand-eq i:nth-child(1){ height:9px;  background:var(--cyan);    box-shadow:0 0 8px rgba(34,231,255,.6); }
.brand-eq i:nth-child(2){ height:16px; background:var(--violet);  box-shadow:0 0 8px rgba(166,77,255,.6); }
.brand-eq i:nth-child(3){ height:13px; background:var(--magenta); }
.brand-eq i:nth-child(4){ height:11px; background:var(--lime);    box-shadow:0 0 8px rgba(196,255,61,.6); }
@media (prefers-reduced-motion:no-preference){
  .brand-eq i { animation:eq 1.1s ease-in-out infinite; }
  .brand-eq i:nth-child(2){ animation-delay:.15s; }
  .brand-eq i:nth-child(3){ animation-delay:.3s; }
  .brand-eq i:nth-child(4){ animation-delay:.45s; }
}
@keyframes eq { 0%,100%{ transform:scaleY(.55);} 50%{ transform:scaleY(1);} }

/* ---------- language toggle ---------- */
.lang { display:inline-flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--panel); border:1px solid var(--hairline); }
.lang-btn {
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--faint); background:transparent; border:0; cursor:pointer;
  padding:6px 12px; border-radius:999px; transition:color .2s, background .2s, box-shadow .2s;
}
.lang-btn[aria-pressed="true"] {
  color:#0a0612; background:var(--magenta);
  box-shadow:0 0 16px -2px rgba(255,46,154,.7);
}
.lang-btn:hover:not([aria-pressed="true"]) { color:var(--text); }

/* ---------- generic ---------- */
.mono { font-family:var(--mono); }
.display { font-family:var(--display); font-weight:800; }
.section-title {
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dim);
  max-width:var(--maxw); margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:14px;
}
.section-title::after { content:""; flex:1; height:1px;
  background:linear-gradient(to right, var(--hairline), transparent); }

/* ---------- hero ---------- */
.hero {
  max-width:var(--maxw); margin:0 auto; padding:40px 22px 70px;
  display:grid; grid-template-columns:1fr; gap:36px; align-items:center;
}
.kicker { font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.32em; color:var(--cyan); margin:0 0 16px;
  text-shadow:0 0 12px rgba(34,231,255,.45); }
h1.display { margin:0; line-height:.92; letter-spacing:-.02em; }
.word-lineup { display:block; font-size:clamp(56px, 14vw, 104px); }
.word-festival { display:block; font-family:var(--mono); font-weight:700;
  font-size:clamp(15px, 3.4vw, 22px); letter-spacing:.5em; color:var(--dim);
  text-transform:uppercase; padding-left:.4em; margin-top:10px; }
.lead { font-size:clamp(17px, 2.4vw, 21px); color:var(--text); max-width:30ch;
  margin:26px 0 10px; font-weight:400; }
.sub { font-size:12.5px; color:var(--faint); letter-spacing:.06em; margin:0; }

/* store badges */
.badges { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.badges.center { justify-content:center; }
.store-badge {
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px 11px 15px; border-radius:14px;
  background:var(--panel); border:1px solid var(--hairline);
  color:var(--text); cursor:default; position:relative;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.store-badge:hover { transform:translateY(-2px); border-color:rgba(255,46,154,.5);
  box-shadow:0 0 24px -6px rgba(255,46,154,.45); }
.store-badge svg { width:24px; height:24px; fill:var(--text); flex:0 0 auto; }
.store-badge span { display:flex; flex-direction:column; line-height:1.15; }
.store-badge small { font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--magenta); }
.store-badge b { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; }

/* hero phone */
.hero-phone { position:relative; justify-self:center; width:min(72vw, 300px); }
.hero-phone img { width:100%; height:auto; display:block; position:relative; z-index:2;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.phone-glow { position:absolute; inset:-12% -18%; z-index:1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 42%, rgba(166,77,255,.4), transparent 70%); filter:blur(10px); }

@media (min-width:880px){
  .hero { grid-template-columns:1.15fr .85fr; gap:50px; padding:64px 22px 96px; }
  .hero-phone { width:min(34vw, 320px); }
}

/* ---------- features ---------- */
.features { max-width:var(--maxw); margin:0 auto; padding:18px 22px 30px; }
.feature-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:26px; }
@media (min-width:620px){ .feature-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .feature-grid { grid-template-columns:1fr 1fr 1fr; } }
.card {
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--hairline); border-radius:18px; padding:24px 22px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.card::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(70% 60% at 20% 0%, var(--ac-soft), transparent 60%); }
.card:hover { transform:translateY(-4px); border-color:var(--ac-line);
  box-shadow:0 18px 40px -20px var(--ac-line); }
.card:hover::before { opacity:1; }
.card h3 { font-family:var(--display); font-weight:700; font-size:19px; margin:16px 0 8px;
  letter-spacing:-.01em; position:relative; }
.card p { color:var(--dim); font-size:14.5px; margin:0; position:relative; }
.card-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--ac-line); box-shadow:0 0 18px -6px var(--ac-line); }
.card-ic svg { width:24px; height:24px; fill:none; stroke:var(--ac); stroke-linecap:round; stroke-linejoin:round; }
.card[data-accent="magenta"]{ --ac:var(--magenta); --ac-line:rgba(255,46,154,.55); --ac-soft:rgba(255,46,154,.1); }
.card[data-accent="cyan"]   { --ac:var(--cyan);    --ac-line:rgba(34,231,255,.5);  --ac-soft:rgba(34,231,255,.09); }
.card[data-accent="lime"]   { --ac:var(--lime);    --ac-line:rgba(196,255,61,.5);  --ac-soft:rgba(196,255,61,.08); }
.card[data-accent="violet"] { --ac:var(--violet);  --ac-line:rgba(166,77,255,.55); --ac-soft:rgba(166,77,255,.1); }

/* ---------- showcase ---------- */
.showcase { max-width:var(--maxw); margin:0 auto; padding:46px 22px 30px; }
.gallery { display:flex; gap:18px; margin-top:28px; overflow-x:auto; padding:10px 2px 22px;
  scroll-snap-type:x mandatory; }
.gallery::-webkit-scrollbar { height:6px; }
.gallery::-webkit-scrollbar-thumb { background:var(--hairline); border-radius:99px; }
.shot { flex:0 0 auto; width:200px; margin:0; scroll-snap-align:center; text-align:center; }
.shot img { width:100%; height:auto; display:block;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55)); transition:transform .35s; }
.shot:hover img { transform:translateY(-6px); }
.shot figcaption { margin-top:14px; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
@media (min-width:920px){
  .gallery { overflow:visible; justify-content:center; flex-wrap:wrap; }
  .shot { width:212px; }
}

/* ---------- audience band ---------- */
.band { max-width:880px; margin:40px auto; padding:0 28px; text-align:center; }
.band-text { font-family:var(--display); font-weight:600; font-size:clamp(22px, 4.4vw, 36px);
  line-height:1.28; letter-spacing:-.015em; color:var(--text); }
.band-text em { font-style:normal; color:var(--magenta); text-shadow:0 0 18px rgba(255,46,154,.5); }

/* ---------- CTA ---------- */
.cta { max-width:var(--maxw); margin:0 auto; padding:60px 22px 70px; text-align:center; }
.cta-title { font-size:clamp(28px, 6vw, 48px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; }
.cta-sub { color:var(--dim); font-size:16px; margin:0 0 30px; }
.cta-sub b { color:var(--cyan); font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.04em; }

/* ---------- footer ---------- */
.footer { max-width:var(--maxw); margin:0 auto; padding:38px 22px 54px;
  border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.foot-tag { font-family:var(--display); font-size:15px; color:var(--dim); margin:0; }
.foot-meta { font-size:11px; color:var(--faint); letter-spacing:.08em; margin:0; }
.footer .lang { margin-top:6px; }

/* ---------- entrance stagger ---------- */
@keyframes rise { from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:no-preference){
  .lf-rise { opacity:0; animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }
  .float { animation:float 5s ease-in-out infinite; }
}
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }