/* Cocktails Over Chaos
   Palette sampled from the official COC logo + shirt art (01M5QN5JJD badge, 01M5QN5GNK blinds, 01M5QN5KMV Miami scene) */
:root{
  --ink:#0c081e;        /* deep night (badge bg) */
  --ink-2:#160a2e;
  --plum:#530654;       /* badge shadow plum */
  --pink:#ef1fad;       /* "Cocktails" magenta */
  --hot:#fa0497;        /* blinds hot pink */
  --rose:#f13679;
  --orange:#f26d3a;     /* sunset orange */
  --gold:#f1a11e;       /* sun gold */
  --cyan:#0feae6;       /* "Chaos" cyan */
  --sky:#1ac9ea;
  --blue:#376fe6;
  --violet:#7034e8;
  --purple:#ae1dec;
  --peach:#fbab7f;
  --cream:#fdf8e4;
  --text:#f6eefc;
  --muted:#c9b8dd;
  --radius:18px;
  --maxw:1120px;
  --display:"Bungee",Impact,"Arial Black",system-ui,sans-serif;
  --script:"Pacifico","Brush Script MT",cursive;
  --neon:"Monoton","Bungee",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 1rem/1.6 var(--body);overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 100% 0,rgba(174,29,236,.18),transparent 60%),radial-gradient(900px 600px at 0 40%,rgba(15,234,230,.10),transparent 60%),radial-gradient(900px 700px at 100% 80%,rgba(239,31,173,.14),transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--ink);padding:.6rem 1rem;border-radius:8px;font-weight:800}
.skip:focus{left:8px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem max(1rem,env(safe-area-inset-left));background:rgba(12,8,30,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,31,173,.35)}
.nav__brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--cream);font:400 .95rem var(--display);letter-spacing:.02em;white-space:nowrap}
.nav__brand em{font:400 1rem var(--script);color:var(--pink);font-style:normal}
.nav__links{display:none;list-style:none;margin:0;padding:0;gap:1.25rem}
.nav__links a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.nav__links a:hover{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
@media (min-width:760px){.nav__links{display:flex}}

/* NEON TEXT */
.neon{display:inline-block}
.neon--pink{color:#ffd6f0;text-shadow:0 0 4px #fff,0 0 10px var(--pink),0 0 22px var(--pink),0 0 42px var(--hot)}
.neon--cyan{color:#dcfffe;text-shadow:0 0 4px #fff,0 0 10px var(--cyan),0 0 22px var(--sky),0 0 42px var(--blue)}
.neon--yellow{color:#fff3d6;text-shadow:0 0 4px #fff,0 0 10px var(--gold),0 0 22px var(--orange),0 0 42px var(--rose)}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:2rem 1rem 4.5rem;overflow:hidden;isolation:isolate;text-align:center}
.hero__sky{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,8,30,.6) 0%,rgba(12,8,30,.78) 55%,var(--ink) 100%),url("../img/scene-miami.webp") center 30%/cover no-repeat}
@media (min-width:801px){.hero__sun{opacity:.14}.hero__sky{background:radial-gradient(ellipse at 50% 40%,rgba(12,8,30,.55),rgba(12,8,30,.85) 70%),linear-gradient(180deg,transparent 60%,var(--ink) 100%),url("../img/hero-bg-lg.webp") center 35%/cover no-repeat}}
.hero__sun{position:absolute;left:50%;top:14%;width:min(110vw,720px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:repeating-linear-gradient(180deg,transparent 0 58%,rgba(12,8,30,.9) 58% 61%,transparent 61% 66%,rgba(12,8,30,.9) 66% 70%,transparent 70% 76%,rgba(12,8,30,.9) 76% 81%,transparent 81%),
  linear-gradient(180deg,var(--gold),var(--orange) 40%,var(--pink) 70%,var(--purple));opacity:.28;filter:blur(1px)}
.hero__grid{position:absolute;left:-50%;right:-50%;bottom:0;height:38%;transform:perspective(320px) rotateX(62deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(15,234,230,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(239,31,173,.55) 2px,transparent 2px);background-size:56px 56px;
  mask-image:linear-gradient(to top,#000 10%,transparent 90%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);animation:grid 3s linear infinite}
@keyframes grid{to{background-position:0 56px,0 0}}
.hero__inner{max-width:760px;margin:0 auto;position:relative}
.hero__logo{width:min(86vw,520px);margin:0 auto -.5rem;filter:drop-shadow(0 0 18px rgba(239,31,173,.55)) drop-shadow(0 0 40px rgba(15,234,230,.25));will-change:transform}
.kicker{font:400 1.35rem/1.2 var(--script);color:var(--peach);margin:.25rem 0 .4rem;text-shadow:0 0 12px rgba(242,109,58,.7)}
.hero__title{margin:0;font:400 clamp(2rem,9.5vw,4.4rem)/1.08 var(--display);letter-spacing:.01em;display:flex;flex-direction:column;align-items:center;gap:.1em}
.hero__title .neon--cyan{font:400 clamp(1.3rem,6vw,2.4rem)/1 var(--script)}
.hero__sub{max-width:36rem;margin:1.1rem auto 0;color:var(--text);font-size:1.05rem;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.5rem}
.hero__scroll{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--cyan);color:var(--cyan);text-decoration:none;font-size:1.3rem;box-shadow:0 0 14px rgba(15,234,230,.6);animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;font:400 .95rem var(--display);letter-spacing:.04em;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .2s,box-shadow .2s}
.btn--pink{background:linear-gradient(90deg,var(--hot),var(--purple));color:#fff;box-shadow:0 0 18px rgba(239,31,173,.6)}
.btn--pink:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(239,31,173,.9)}
.btn--ghost{border-color:var(--cyan);color:var(--cyan);background:rgba(12,8,30,.5);box-shadow:inset 0 0 12px rgba(15,234,230,.3),0 0 12px rgba(15,234,230,.35)}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(15,234,230,.12)}
.btn--disabled,.btn[disabled]{cursor:not-allowed;opacity:.75;filter:saturate(.75);transform:none!important}

/* MARQUEE */
.marquee{overflow:hidden;border-block:2px solid var(--pink);background:linear-gradient(90deg,var(--plum),var(--ink-2),var(--plum));box-shadow:0 0 20px rgba(239,31,173,.4)}
.marquee__track{display:flex;gap:1.5rem;width:max-content;padding:.7rem 0;font:400 1rem var(--display);color:var(--gold);text-transform:uppercase;animation:marquee 28s linear infinite}
.marquee__track span:nth-child(4n+1){color:var(--cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* SECTIONS */
.section{position:relative;max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.15rem}
.h2{font:400 clamp(1.9rem,8vw,3.2rem)/1.1 var(--display);margin:0 0 .75rem}
.h3{font:400 clamp(1.4rem,6vw,2.2rem)/1.15 var(--display);margin:0 0 .5rem}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.lead{font-size:1.25rem;line-height:1.45;color:var(--cream)}
.lead strong{color:var(--pink);text-shadow:0 0 12px rgba(239,31,173,.6)}

/* MANIFESTO */
.manifesto{display:grid;gap:2rem;align-items:center}
.manifesto__art img{width:min(100%,420px);margin:0 auto;border-radius:var(--radius);filter:drop-shadow(0 0 24px rgba(250,4,151,.5))}
.manifesto__text p{margin:0 0 1rem}
.sig{font:400 1.6rem/1.3 var(--script);color:var(--cyan);text-shadow:0 0 12px rgba(15,234,230,.6)}
@media (min-width:820px){.manifesto{grid-template-columns:5fr 6fr;gap:3rem}}

/* TENETS */
.tenets{list-style:none;margin:2rem 0 3.5rem;padding:0;display:grid;gap:1rem}
.tenet{position:relative;padding:1.25rem 1.25rem 1.25rem 4.5rem;border-radius:var(--radius);background:linear-gradient(145deg,rgba(83,6,84,.55),rgba(12,8,30,.85));border:1px solid rgba(239,31,173,.35);box-shadow:inset 0 0 22px rgba(174,29,236,.15)}
.tenet:nth-child(even){border-color:rgba(15,234,230,.35)}
.tenet__num{position:absolute;left:1rem;top:1.05rem;font:400 2rem/1 var(--neon);color:var(--gold);text-shadow:0 0 10px var(--orange)}
.tenet:nth-child(even) .tenet__num{color:var(--cyan);text-shadow:0 0 10px var(--sky)}
.tenet h3{margin:0 0 .25rem;font:400 1.15rem/1.25 var(--display);color:var(--cream)}
.tenet p{margin:0;color:var(--muted)}
@media (min-width:700px){.tenets{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tenets{grid-template-columns:repeat(3,1fr)}}

/* GALLERY */
.gallery__title{margin-top:1rem}
.gallery{list-style:none;margin:1.5rem -1.15rem 0;padding:0 1.15rem 1rem;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--pink) transparent}
.gallery li{scroll-snap-align:center;display:flex}
.gallery li>figure{flex:1}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:2px solid rgba(239,31,173,.5);box-shadow:0 0 18px rgba(239,31,173,.3);background:var(--ink-2)}
.gallery li:nth-child(even) figure{border-color:rgba(15,234,230,.5);box-shadow:0 0 18px rgba(15,234,230,.25)}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{padding:.7rem .9rem;font:400 .95rem var(--display);color:var(--cream)}
@media (min-width:760px){.gallery{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;margin:1.5rem 0 0;padding:0}}
@media (min-width:1000px){.gallery{grid-template-columns:repeat(4,1fr)}}

/* MERCH */
.merch{overflow:hidden}
.badge{display:inline-block;vertical-align:middle;margin-left:.35rem;padding:.3rem .8rem;border-radius:999px;font:400 .8rem var(--display);letter-spacing:.06em;color:var(--ink);background:linear-gradient(90deg,var(--gold),var(--orange));box-shadow:0 0 16px rgba(241,161,30,.7);transform:rotate(-4deg)}
.products{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.product{position:relative;padding:.6rem .6rem 1rem;border-radius:var(--radius);background:linear-gradient(160deg,rgba(55,111,230,.2),rgba(83,6,84,.45));border:1px solid rgba(15,234,230,.35);text-align:center}
.product img{border-radius:12px;aspect-ratio:1;object-fit:cover;background:#fff}
.product h3{margin:.7rem 0 .2rem;font:400 1rem var(--display);color:var(--cream)}
.product p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.4}
.product::after{content:"Soon";position:absolute;top:.9rem;right:.9rem;padding:.15rem .55rem;border-radius:999px;font:700 .7rem var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--hot);color:#fff;box-shadow:0 0 10px var(--hot)}
@media (min-width:900px){.products{grid-template-columns:repeat(4,1fr);gap:1.25rem}}

/* FOLLOW */
.follow{padding-bottom:5rem}
.follow .lead{font:400 clamp(1.3rem,6vw,1.9rem)/1.3 var(--script);color:var(--cyan);text-shadow:0 0 12px rgba(15,234,230,.6)}
.follow .muted{max-width:34rem;margin-inline:auto}

/* FOOTER */
.footer{text-align:center;padding:2.5rem 1rem calc(2.5rem + env(safe-area-inset-bottom));border-top:2px solid var(--pink);background:linear-gradient(180deg,var(--ink-2),#05030d);box-shadow:0 -6px 24px rgba(239,31,173,.25)}
.footer img{margin:0 auto .5rem;width:96px;height:96px;filter:drop-shadow(0 0 12px rgba(239,31,173,.5))}
.footer p{margin:.2rem 0}
.footer__brand{font:400 1.1rem var(--display);color:var(--cream)}
.footer__tag{font:400 1.1rem var(--script);color:var(--pink)}
.footer__resp{margin-top:.8rem!important;font-weight:600;color:var(--gold)}
.footer__copy{font-size:.8rem;color:var(--muted)}

/* SPARKLES */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.sparkle{position:absolute;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 12px var(--c,var(--pink));opacity:0;animation:twinkle var(--d,3s) ease-in-out var(--delay,0s) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.merch>*:not(.sparkles){position:relative;z-index:1}

/* FLICKER */
.flicker{animation:flicker 5s infinite}
.flicker--slow{animation-duration:8s;animation-delay:1.3s}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35;text-shadow:none}}

/* REVEAL */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .sparkle{opacity:.7}
  .hero__logo{transform:none!important}
}