/* ===========================================================
   KING SUNNY — SWEAR 2 GOD  /  Landing page system
   Palette: obsidian black, electric silver, smoke pink,
   cosmic purple + lavender glow drawn from the cover art.
   =========================================================== */

:root {
  --black:      #050308;
  --obsidian:   #0a0712;
  --obsidian-2: #0e0a18;
  --purple:     #4a2e56;
  --purple-mid: #6e4794;
  --violet:     #8a54d6;
  --lavender:   #b98fe0;
  --pink:       #d49dba;
  --pink-hot:   #e6a9cf;
  --silver:     #e3e6ee;
  --silver-dim: #aab0c2;
  --line:       rgba(185, 143, 224, 0.16);
  --maxw: 1180px;

  --chrome: linear-gradient(180deg,#ffffff 0%,#cfd6e6 28%,#8c93a8 50%,#eef2fb 58%,#b7bed1 74%,#7e879c 100%);
  --chrome-pink: linear-gradient(180deg,#ffffff 0%,#f3d4e6 26%,#d49dba 52%,#ffffff 60%,#c98fb2 76%,#a86d92 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--silver);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; }

.display {
  font-family: "Anton", "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.92;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lavender);
}

.wrap { width: min(92vw, var(--maxw)); margin-inline: auto; }

/* ---------- chrome / metallic text ---------- */
.chrome-text {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(170,150,230,.35));
}
.chrome-pink {
  background: var(--chrome-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(214,157,186,.5));
}

/* ===========================================================
   BACKGROUND SMOKE FIELD (fixed, behind everything)
   =========================================================== */
.smoke-field {
  position: fixed;
  inset: -10vmax;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #1a1030 0%, #0a0712 46%, #050308 100%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}
.blob.b1 { width: 52vmax; height: 52vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle, rgba(138,84,214,.9), rgba(138,84,214,0) 65%);
  animation: drift1 26s ease-in-out infinite; }
.blob.b2 { width: 44vmax; height: 44vmax; right: -10vmax; top: 4vmax;
  background: radial-gradient(circle, rgba(214,157,186,.85), rgba(214,157,186,0) 64%);
  animation: drift2 32s ease-in-out infinite; }
.blob.b3 { width: 60vmax; height: 60vmax; left: 18vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(110,71,148,.85), rgba(110,71,148,0) 66%);
  animation: drift3 38s ease-in-out infinite; }
.blob.b4 { width: 34vmax; height: 34vmax; right: 14vmax; bottom: -8vmax;
  background: radial-gradient(circle, rgba(185,143,224,.7), rgba(185,143,224,0) 66%);
  animation: drift1 30s ease-in-out infinite reverse; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(6vmax,4vmax) scale(1.12)} 66%{transform:translate(-4vmax,6vmax) scale(.94)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7vmax,5vmax) scale(1.15)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(5vmax,-5vmax) scale(1.08)} 75%{transform:translate(-6vmax,2vmax) scale(.96)} }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.06; 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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

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

/* ===========================================================
   NAV
   =========================================================== */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px,4vw,46px);
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
header.nav.scrolled {
  background: rgba(8,5,16,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: 12px; padding-bottom: 12px;
}
.nav-logo { font-family:"Anton",sans-serif; font-size: 20px; letter-spacing:.16em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap: clamp(14px,2.4vw,30px); }
.nav-links a { font-size: 12.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--silver-dim); transition:color .25s; }
.nav-links a:hover { color: var(--silver); }
.nav-links a.nav-cta {
  font-family:"Anton",sans-serif; font-size: 13px; letter-spacing:.14em;
  padding: 9px 18px; border-radius: 999px;
  background: var(--chrome); color:#1a1622; white-space:nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 8px 22px rgba(138,84,214,.3);
}
.nav-links a.nav-cta:hover { color:#15101f; }
@media (max-width: 680px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(96px,15vh,150px) 16px 60px;
  text-align: center;
}
.hero-title {
  width: min(92vw, 880px);
  filter: drop-shadow(0 6px 34px rgba(150,120,220,.5));
  animation: titleIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes titleIn { from{opacity:0; transform: translateY(-16px) scale(.96); filter:blur(6px)} to{opacity:1; transform:none} }

.hero-sub {
  display:flex; align-items:center; gap: 16px; margin: 18px 0 4px;
  animation: fadeUp 1s .25s both;
}
.swear {
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size: clamp(30px, 7vw, 64px); letter-spacing:.02em; line-height:1;
}
.outnow {
  display:inline-flex; align-items:center; gap:8px;
  font-size: 11px; letter-spacing:.28em; font-weight:700; text-transform:uppercase;
  color:#0a0712; background: var(--pink-hot);
  padding: 7px 14px; border-radius:999px;
  box-shadow: 0 0 22px rgba(230,169,207,.55);
}
.outnow .dot { width:7px; height:7px; border-radius:50%; background:#0a0712; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* avatar */
.avatar-wrap {
  position: relative; margin-top: clamp(2px,1vh,12px);
  width: min(74vw, 440px); aspect-ratio: 1 / 1.06;
  animation: fadeUp 1.2s .35s both;
}
.avatar-glow {
  position:absolute; inset:-12% -8%; border-radius:50%;
  background: radial-gradient(circle at 50% 42%, rgba(185,143,224,.6), rgba(138,84,214,.25) 45%, transparent 70%);
  filter: blur(20px); animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }
.avatar {
  position: relative; width:100%; height:100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: radial-gradient(58% 64% at 50% 42%, #000 52%, rgba(0,0,0,.5) 72%, transparent 88%);
  mask-image: radial-gradient(58% 64% at 50% 42%, #000 52%, rgba(0,0,0,.5) 72%, transparent 88%);
}
.avatar-floor {
  position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  width:60%; height:60px; border-radius:50%;
  background: radial-gradient(circle, rgba(138,84,214,.45), transparent 70%);
  filter: blur(14px);
}

/* CTA */
.cta-row { margin-top: clamp(8px,2vh,20px); animation: fadeUp 1s .5s both; display:flex; flex-direction:column; align-items:center; gap:18px; }
.cta {
  position:relative; font-family:"Anton",sans-serif; font-size: clamp(17px,2.4vw,22px);
  letter-spacing:.12em; text-transform:uppercase; color:#15101f;
  padding: 18px 46px; border:none; border-radius:999px; cursor:pointer;
  background: var(--chrome);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 10px 30px rgba(138,84,214,.4);
  transition: transform .2s ease, box-shadow .3s ease;
}
.cta::after {
  content:""; position:absolute; inset:-6px; border-radius:999px; z-index:-1;
  background: var(--chrome); filter: blur(14px); opacity:.5;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse { 0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:.7; transform:scale(1.08)} }
.cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 16px 42px rgba(170,120,230,.6); }

.scroll-hint { display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--silver-dim); font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.scroll-hint .arrow { width:1px; height:34px; background:linear-gradient(var(--lavender),transparent); animation: hintMove 1.8s ease-in-out infinite; }
@keyframes hintMove { 0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)} }

@keyframes fadeUp { from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

/* ===========================================================
   SECTION SHELL
   =========================================================== */
section.block { padding: clamp(70px,11vh,120px) 0; }
.sec-head { text-align:center; margin-bottom: clamp(34px,5vh,56px); }
.sec-head h2 {
  font-family:"Anton",sans-serif; text-transform:uppercase; margin: 12px 0 0;
  font-size: clamp(32px,6vw,60px); letter-spacing:.01em; line-height:1;
}
.sec-head p { margin: 14px auto 0; max-width: 540px; color: var(--silver-dim); }

/* ---------- platforms grid ---------- */
.platforms { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(12px,1.6vw,18px); max-width: 880px; margin-inline:auto; }
@media (max-width:620px){ .platforms{ grid-template-columns:1fr; } }
.plat {
  position:relative; display:flex; align-items:center; gap:18px;
  padding: 22px 24px; border-radius: 18px; cursor:pointer; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transition: transform .25s ease, border-color .3s ease, box-shadow .35s ease;
}
.plat:hover { transform: translateY(-4px); }
.plat .ico { width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center; background:rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.plat .ico svg { width:26px; height:26px; }
.plat .meta { display:flex; flex-direction:column; line-height:1.25; }
.plat .meta .name { font-family:"Anton",sans-serif; font-size:19px; letter-spacing:.04em; text-transform:uppercase; }
.plat .meta .act { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-dim); }
.plat .go { margin-left:auto; font-size:20px; opacity:0; transform:translateX(-6px); transition:.25s; color:var(--silver); }
.plat:hover .go { opacity:1; transform:none; }
.plat .sheen { position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s ease; }
.plat:hover .sheen { transform:translateX(120%); }

.plat[data-c="spotify"]:hover { border-color:#1db954; box-shadow:0 14px 40px rgba(29,185,84,.28); }
.plat[data-c="spotify"]:hover .ico { background:#1db954; }
.plat[data-c="apple"]:hover   { border-color:#f5f5f7; box-shadow:0 14px 40px rgba(255,255,255,.16); }
.plat[data-c="apple"]:hover .ico { background:linear-gradient(160deg,#fb5c74,#fa233b); }
.plat[data-c="youtube"]:hover { border-color:#ff0033; box-shadow:0 14px 40px rgba(255,0,51,.3); }
.plat[data-c="youtube"]:hover .ico { background:#ff0033; }
.plat[data-c="amazon"]:hover  { border-color:#25d1da; box-shadow:0 14px 40px rgba(37,209,218,.28); }
.plat[data-c="amazon"]:hover .ico { background:linear-gradient(160deg,#25d1da,#146eb4); }

/* ---------- video ---------- */
.video-shell { max-width: 980px; margin-inline:auto; }
.video-frame {
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center;
  border:1px solid rgba(185,143,224,.4);
  box-shadow: 0 0 0 1px rgba(185,143,224,.25), 0 0 40px rgba(138,84,214,.35), 0 30px 70px rgba(0,0,0,.6);
}
.video-frame::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,7,18,.1),rgba(10,7,18,.55)); }
.video-frame::after {
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: inset 0 0 28px rgba(185,143,224,.55), inset 0 0 2px rgba(255,255,255,.6);
  animation: neonEdge 3.2s ease-in-out infinite;
}
@keyframes neonEdge { 0%,100%{opacity:.55} 50%{opacity:1} }
.play-btn {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:rgba(8,5,16,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.4);
  transition: transform .25s ease, background .25s ease;
}
.video-frame:hover .play-btn { transform:translate(-50%,-50%) scale(1.08); background:rgba(138,84,214,.55); }
.play-btn::after { content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(185,143,224,.5); animation: ripple 2.2s ease-out infinite; }
@keyframes ripple { 0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.5); opacity:0} }
.play-tri { width:0; height:0; border-left:24px solid #fff; border-top:15px solid transparent; border-bottom:15px solid transparent; margin-left:6px; }
.video-cap { position:absolute; left:20px; bottom:16px; z-index:2; }
.video-cap .t { font-family:"Anton",sans-serif; font-size:20px; letter-spacing:.04em; text-transform:uppercase; }
.video-cap .s { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lavender); }

/* ---------- join ---------- */
.join {
  position:relative; max-width: 820px; margin-inline:auto;
  padding: clamp(34px,5vw,56px); border-radius:24px; text-align:center;
  background: linear-gradient(180deg, rgba(74,46,86,.4), rgba(10,7,18,.4));
  border:1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.join::before { content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -10%, rgba(138,84,214,.4), transparent 60%); pointer-events:none; }
.join h2 { font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(30px,5.5vw,52px); margin:10px 0 0; line-height:1; }
.join p { color:var(--silver-dim); max-width:460px; margin:14px auto 26px; position:relative; }
.join-form { position:relative; display:flex; gap:10px; max-width:480px; margin-inline:auto; }
@media (max-width:520px){ .join-form{ flex-direction:column; } }
.join-form input {
  flex:1; padding: 16px 18px; border-radius:999px; border:1px solid var(--line);
  background: rgba(0,0,0,.4); color:var(--silver); font-family:inherit; font-size:14px; outline:none;
  transition: border-color .25s, box-shadow .25s;
}
.join-form input::placeholder { color:#7a7390; }
.join-form input:focus { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(185,143,224,.18); }
.join-form input.err { border-color:#ff5d7a; box-shadow:0 0 0 3px rgba(255,93,122,.16); }
.join-submit {
  font-family:"Anton",sans-serif; font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  padding: 16px 34px; border:none; border-radius:999px; cursor:pointer; color:#15101f;
  background: var(--chrome-pink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 10px 26px rgba(214,157,186,.4);
  transition: transform .2s ease, box-shadow .3s ease;
}
.join-submit:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 14px 34px rgba(230,169,207,.55); }
.join-err { color:#ff8aa0; font-size:12px; letter-spacing:.04em; margin-top:10px; min-height:16px; position:relative; }
.join-success { position:relative; animation: fadeUp .5s both; }
.join-success .check { width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:linear-gradient(160deg,var(--violet),var(--pink)); box-shadow:0 0 30px rgba(138,84,214,.6); }
.join-success h3 { font-family:"Anton",sans-serif; text-transform:uppercase; font-size:28px; margin:0; }
.join-success p { margin:8px auto 0; }

/* ---------- footer ---------- */
footer { padding: clamp(48px,8vh,90px) 0 40px; border-top:1px solid var(--line); margin-top: 40px; }
.foot-grid { display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; }
.foot-logo { width:min(70vw,360px); opacity:.92; filter: drop-shadow(0 0 20px rgba(150,120,220,.4)); }
.socials { display:flex; gap:14px; }
.soc {
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border:1px solid var(--line); color:var(--silver);
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.soc svg { width:20px; height:20px; }
.soc:hover { transform: translateY(-4px); border-color: var(--lavender); box-shadow:0 10px 26px rgba(138,84,214,.4); background: var(--chrome); color:#15101f; }
.foot-meta { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#6c6582; }
.foot-meta a:hover { color: var(--lavender); }

/* ---------- sticky mini player ---------- */
.mini {
  position: fixed; left:50%; bottom: 22px; transform: translate(-50%, 140%);
  z-index: 50; display:flex; align-items:center; gap:16px;
  padding: 10px 14px 10px 10px; border-radius:999px;
  background: rgba(12,8,22,.82); backdrop-filter: blur(16px);
  border:1px solid var(--line); box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 0 30px rgba(138,84,214,.25);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  max-width: 92vw;
}
.mini.show { transform: translate(-50%, 0); }
.mini .cover { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.mini .cover.spin { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mini .info { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.mini .info .n { font-family:"Anton",sans-serif; font-size:14px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.mini .info .a { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--silver-dim); }
.mini .play { width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; background:var(--chrome); color:#15101f; flex:0 0 40px; }
.mini .play svg { width:16px; height:16px; }
.mini .bars { display:flex; align-items:flex-end; gap:3px; height:20px; }
.mini .bars span { width:3px; background:var(--lavender); border-radius:2px; height:30%; }
.mini.playing .bars span { animation: eq .9s ease-in-out infinite; }
.mini .bars span:nth-child(2){ animation-delay:.15s } .mini .bars span:nth-child(3){ animation-delay:.3s } .mini .bars span:nth-child(4){ animation-delay:.45s }
@keyframes eq { 0%,100%{height:25%} 50%{height:100%} }
.mini .stream-link { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--lavender); padding-right:8px; white-space:nowrap; }
@media (max-width:560px){ .mini .stream-link, .mini .bars { display:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; }
}