/* SOUNDGLOW — chrome.css
 *
 * Shared chrome styles used by every content page: CSS variables, fonts,
 * universal reset, body baseline, navigation, mobile drawer, footer,
 * common buttons, and layout primitives.
 *
 * What does NOT belong here: page-specific section CSS (hero, product,
 * features grid, etc.). Those stay inline in each page's <style> block.
 *
 * Cache control: served with `max-age=31536000, immutable` via .htaccess.
 * Future edits will require cache-busting (?v=N query string or filename
 * versioning) — see chrome refactor spec, "Out-of-spec follow-ups".
 */

/* ── 1. @font-face ───────────────────────────────────────────────────── */
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:block; src:url('/assets/fonts/bebas-neue-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:block; src:url('/assets/fonts/bebas-neue-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/space-grotesk-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── 2. Universal reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; background: var(--bg); color: var(--white); font-family: var(--font-b); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── 3. CSS variables ────────────────────────────────────────────────── */
:root {
  --bg:     #07060f;
  --bg2:    #0d0b1e;
  --purple: #a855f7;
  --pink:   #ec4899;
  --cyan:   #22d3ee;
  --gold:   #f59e0b;
  --orange: #f97316;
  --white:  #f0eeff;
  --gray:   #6b6980;
  --font-h: 'Bebas Neue', sans-serif;
  --font-b: 'Space Grotesk', sans-serif;
}

/* ── 4. Body noise overlay ───────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: 0.35;
}

/* ── 5. Typography & layout primitives ───────────────────────────────── */
.section { padding: 7rem 3rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 24px; height: 1px; background: var(--purple);
}
h2.section-title {
  font-family: var(--font-h);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

/* ── 6. Shared buttons ───────────────────────────────────────────────── */
.btn-primary {
  position: relative; background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; font-family: var(--font-b); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 1rem 2.2rem; border: none; border-radius: 4px; cursor: pointer;
  animation: pulseCta 2.2s ease-in-out infinite; transition: transform 0.15s; display: inline-block;
}
.btn-primary:hover { transform: scale(1.04); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@keyframes pulseCta {
  0%, 100% { box-shadow: 0 0 20px rgba(168,85,247,.5), 0 0 40px rgba(236,72,153,.2); }
  50%      { box-shadow: 0 0 35px rgba(168,85,247,.8), 0 0 70px rgba(236,72,153,.45); }
}
.btn-ghost {
  color: rgba(240,238,255,0.7); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.5rem;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--white); }
.btn-ghost:active { color: var(--purple); }
.btn-ghost:focus-visible { color: var(--white); outline: 2px solid var(--purple); outline-offset: 2px; }
.btn-ghost svg { width: 18px; height: 18px; }

/* ── 7. Navigation ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.7rem 3rem;
  /* Logo pinned to the left edge, controls to the right edge, links truly centered
     (equal side columns) so the menu lines up with the centered content column.
     minmax(max-content,…) keeps the side groups from ever being squeezed. */
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 1rem;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}
nav > div:first-child { justify-self: start; } /* logo → left edge */
.nav-right { justify-self: end; }               /* lang / cart / buy → right edge */
nav.scrolled {
  background: rgba(7,6,15,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-logo { padding: 1px; flex-shrink: 0; display: block; }
/* width:auto + max-width:none keep the wordmark at its true 228:100 ratio;
   without max-width:none the global `img{max-width:100%}` could squeeze the
   width while height stays fixed, warping the logo. */
.nav-logo img { height: 50px; width: auto; max-width: none; filter: brightness(1.1); }
.nav-links {
  display: flex; gap: 2.75rem; list-style: none;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  justify-content: center; min-width: 0;
}
.nav-links a { white-space: nowrap; }
/* "New product" highlight on the Party UFO link — animated brand-gradient text
   with a soft glow pulse (replaces the old red dot). Desktop nav + mobile drawer. */
.nav-new-text {
  font-weight: 600;
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--cyan), var(--pink), var(--purple));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: navNewFlow 3s linear infinite, navNewGlow 2s ease-in-out infinite;
}
@keyframes navNewFlow { to { background-position: 200% center; } }
@keyframes navNewGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(236,72,153,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(236,72,153,0.5)); }
}
@media (prefers-reduced-motion: reduce) { .nav-new-text { animation: none; } }
.nav-links a { color: rgba(240,238,255,0.7); transition: color 0.2s; }
.nav-links a:hover { color: var(--purple); }
/* Active page marker: bright text + glowing purple underline (echoes the lang knob) */
.nav-links a[aria-current="page"] { color: var(--white); position: relative; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: var(--purple); box-shadow: 0 0 8px rgba(168,85,247,0.85);
}
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
.nav-version {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--purple); background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 4px; padding: 0.18rem 0.45rem;
  line-height: 1;
}
.nav-cta {
  background: transparent; border: 1px solid var(--purple); color: var(--purple);
  font-family: var(--font-b); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 1.4rem; border-radius: 4px; cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { background: var(--purple); color: #fff; box-shadow: 0 0 20px rgba(168,85,247,0.5); }
.nav-cta:active { background: var(--purple); color: #fff; box-shadow: 0 0 10px rgba(168,85,247,0.5); }
.nav-cta:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px; width: 48px; height: 48px;
  -webkit-appearance: none; appearance: none;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. Language switcher ────────────────────────────────────────────── */
.lang-switcher {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 3px;
  position: relative;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lang-knob {
  position: absolute; top: 3px; bottom: 3px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none; z-index: 0;
}
.lang-btn {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(240,238,255,0.45);
  padding: 0.28rem 0.7rem; border-radius: 100px;
  border: none; background: none; cursor: pointer;
  transition: color 0.2s; text-decoration: none;
  position: relative; z-index: 1;
}
.lang-btn:hover { color: var(--white); }
.lang-btn.active { color: #fff; }

/* ── 9. Mobile drawer ────────────────────────────────────────────────── */
.nav-drawer {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101;
  background: rgba(7,6,15,0.97); backdrop-filter: blur(16px);
  flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  padding: 2rem;
}
.nav-drawer.open { display: flex; }
.nav-drawer ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 1.5rem; }
.nav-drawer ul a {
  font-family: var(--font-h); font-size: 2.5rem; letter-spacing: 0.06em;
  color: rgba(240,238,255,0.75); transition: color 0.2s;
}
.nav-drawer ul a:hover { color: var(--purple); }
/* Active page marker in the mobile drawer: bright text + centered purple underline glow */
.nav-drawer ul a[aria-current="page"] { color: var(--white); position: relative; }
.nav-drawer ul a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -0.4rem; width: 60%; height: 3px; border-radius: 3px;
  background: var(--purple); box-shadow: 0 0 10px rgba(168,85,247,0.85);
}
.nav-drawer-close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: none; color: rgba(240,238,255,0.7); font-size: 1.75rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
.nav-drawer-close:hover { color: var(--white); }

/* ── 10. Footer ──────────────────────────────────────────────────────── */
footer { background:#040310; padding:4rem 3rem 2.5rem; border-top:1px solid rgba(168,85,247,0.12); }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem; }
.footer-contact-note { color:var(--gray); font-size:0.88rem; line-height:1.6; margin-bottom:0.85rem; }
.footer-brand img { height:32px; margin-bottom:1.2rem; filter:brightness(0.85); }
.footer-logo-btn { display:inline-block; padding:0; margin:0; background:none; border:0; cursor:pointer; line-height:0; }
.footer-copyright-email { display:none; } /* email shown only on mobile (desktop has it in the Follow-us column) */
.footer-brand p { color:var(--gray); font-size:0.88rem; line-height:1.7; max-width:280px; }
.footer-col h4 { font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,238,255,0.4); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.75rem; }
.footer-col a { color:var(--gray); font-size:0.9rem; transition:color 0.2s; }
.footer-col a:hover { color:var(--purple); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { color:var(--gray); font-size:0.78rem; }
.footer-socials { display:flex; gap:1rem; }
.footer-social-icons { display:flex; gap:1rem; }
.footer-social-icons a { color:rgba(240,238,255,0.4); transition:color 0.2s; }
.footer-social-icons a:hover { color:var(--purple); }
.social-link { width:44px; height:44px; border:1px solid rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:0.85rem; transition:border-color 0.2s,color 0.2s; }
.social-link:hover { border-color:var(--purple); color:var(--purple); }
.social-link:active { border-color:var(--purple); color:var(--purple); background:rgba(168,85,247,0.15); }
.footer-top-btn {
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.35);
  color:var(--purple); font-size:1.1rem; cursor:pointer;
  transition:background 0.2s, transform 0.2s; flex-shrink:0;
}
.footer-top-btn:hover { background:rgba(168,85,247,0.3); transform:translateY(-2px); }
.footer-top-btn:active { background:rgba(168,85,247,0.4); transform:translateY(0); }

/* ── 11. Responsive ──────────────────────────────────────────────────── */
/* Nav switches to the hamburger at 1300px — the full horizontal menu (with wide
   link spacing) needs the room; below this the links would crowd the logo / CTA. */
@media (max-width: 1300px) {
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    background: rgba(7,6,15,0.88);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
  /* gap clears the cart count badge (overhangs 6px) from the hamburger */
  .nav-right { gap: 0.55rem; flex-shrink: 0; }
  /* 44px minimum touch targets across the mobile header */
  .lang-switcher { display: flex; padding: 3px; gap: 2px; min-height: 44px; box-sizing: border-box; }
  .lang-knob { top: 3px; bottom: 3px; }
  .lang-btn { padding: 0.5rem 0.95rem; font-size: 0.68rem; letter-spacing: 0.08em; }
  .sg-mini-cart { width: 44px; height: 44px; border-radius: 8px; }
  .nav-hamburger { width: 44px; height: 44px; }
  .nav-logo img { height: 40px; }

  .section { padding: 4.5rem 1.5rem; }
  footer { padding: 2rem 1.5rem 1.75rem; background:#05030d; border-top:1px solid rgba(255,255,255,0.06); }

  .footer-inner { max-width:390px; margin:0 auto; }
  .footer-top { display:flex; flex-direction:column; gap:0; margin-bottom:0; }
  .footer-brand { display:contents; }
  .footer-logo-btn { order:1; }
  .footer-brand img { width:132px; height:auto; margin:0 0 1rem; filter:none; }
  .footer-brand p { max-width:330px; margin:0; color:rgba(198,190,232,0.86); font-size:0.86rem; line-height:1.55; }
  .footer-brand .footer-copyright {
    order:20; margin-top:1.05rem; padding-top:0.1rem; text-align:center; max-width:none;
    color:rgba(151,142,190,0.76); font-size:0.72rem; line-height:1.4;
  }
  .footer-copyright-email { display:inline; }
  .footer-col { order:10; border-top:1px solid rgba(255,255,255,0.08); }
  .footer-col:last-of-type { border-bottom:1px solid rgba(255,255,255,0.08); }
  .footer-col h4 {
    position:relative; display:flex; align-items:center; justify-content:space-between;
    min-height:52px; margin:0; padding:0;
    color:rgba(188,177,232,0.95); font-family:var(--font-h);
    font-size:0.78rem; font-weight:800; letter-spacing:0.16em;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .footer-col h4::after {
    content:'+'; color:rgba(209,199,255,0.95); font:700 1.05rem/1 var(--font-b);
    transition:transform 0.18s ease;
  }
  .footer-panel { display:none; }
  .footer-col.is-open h4::after { transform:rotate(45deg); }
  .footer-col.is-open .footer-panel { display:block; padding:0 0 1.05rem; }
  .footer-col ul { gap:0.8rem; }
  .footer-col a { font-size:0.88rem; color:rgba(207,199,238,0.72); }
  .footer-social-icons { gap:0.85rem; padding-top:0.1rem; }
  .footer-social-icons a { color:rgba(207,199,238,0.72); }
  .footer-top-btn { display:none; }
}

@media (max-width: 550px) {
  .section { padding: 3.5rem 1.25rem; }
  footer { padding: 2.5rem 1.25rem 1.5rem; }
  nav { padding: 0.7rem 0.75rem; }
  .nav-right { gap: 0.5rem; }
  .nav-logo img { height: 36px; }
  .lang-btn { padding: 0.5rem 0.82rem; font-size: 0.66rem; }
  /* keep cart + hamburger at the 44px minimum on small phones */
  .sg-mini-cart { width: 44px; height: 44px; }
  .nav-hamburger { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .section { padding: 3rem 1rem; }
  footer { padding: 2rem 1rem 1.5rem; }
  nav { padding-left: 0.55rem; padding-right: 0.55rem; }
  .nav-right { gap: 0.5rem; }
  .nav-logo img { height: 32px; }
  .lang-btn { padding: 0.5rem 0.64rem; font-size: 0.62rem; }
  /* never drop below 44px even on the narrowest phones */
  .sg-mini-cart { width: 44px; height: 44px; }
  .nav-hamburger { width: 44px; height: 44px; }
  .nav-hamburger span { width: 22px; }
}