/* ==========================================================================
   Asterium — New Year theme (demo branch overlay)
   Loaded last: overrides the stock Nuxt/Tailwind styles.
   Mood: cozy premium winter night — midnight blue, warm gold, a touch of
   deep red + evergreen. Decoration only; structure/content untouched.
   ========================================================================== */

:root {
  --ny-midnight: #0b1226;
  --ny-midnight-deep: #090e1e;
  --ny-gold: #e9c87e;
  --ny-gold-dim: rgba(233, 200, 126, .28);
  --ny-red: #b3273a;
  --ny-green: #2e6b4f;
  --ny-frost: #f3f7fc;
  --ny-frost-card: #e9f0f8;
  --ny-banner-h: 62px;
}

/* ---------- 1. Cozy midnight canvas ---------------------------------- */
html { background: var(--ny-midnight-deep); }
body { padding-top: var(--ny-banner-h); }

.bg-black { background-color: var(--ny-midnight) !important; }
.bg-half-black-white {
  background-image: linear-gradient(180deg, var(--ny-midnight) 0 50%, var(--ny-frost) 0) !important;
}
.steps-container,
.privileges-container,
.trades-container { background-color: var(--ny-midnight) !important; }

/* hero: warm fire-light glows over the midnight blue (non-interactive veil) */
.main-wrapper { isolation: isolate; }
.main-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(90rem 42rem at 84% -14%, rgba(255, 176, 99, .15), transparent 62%),
    radial-gradient(72rem 38rem at -12% 26%, rgba(118, 142, 255, .11), transparent 60%),
    radial-gradient(48rem 26rem at 52% 110%, rgba(233, 200, 126, .09), transparent 65%);
}

/* headline: quiet candle-light halo (hero only) */
.main-wrapper h1,
.main-wrapper .text-headline {
  text-shadow: 0 0 42px rgba(255, 206, 132, .22), 0 0 120px rgba(255, 176, 99, .12);
}

/* ---------- 2. Frost tint on the light sections ----------------------- */
.ecosystem-container,
.faq-container,
.knowledge-container,
.legals-container,
.safe-crypto-trade-container { background-color: var(--ny-frost) !important; }

.bg-grey-light { background-color: var(--ny-frost-card) !important; }

/* subtle bauble cluster in the top-right corner of light sections
   (not on .faq-container — it sits right under .ecosystem-container
   and doubling the ornaments in one viewport reads as clutter) */
.ecosystem-container,
.legals-container,
.safe-crypto-trade-container {
  background-repeat: no-repeat !important;
  background-position: top 0 right 7% !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><g fill="none" stroke="%23c8a45c" stroke-width="1"><line x1="26" y1="0" x2="26" y2="40"/><line x1="60" y1="0" x2="60" y2="62"/><line x1="92" y1="0" x2="92" y2="30"/></g><g><rect x="23" y="39" width="6" height="5" rx="1" fill="%23c8a45c"/><circle cx="26" cy="53" r="10" fill="%23b3273a"/><circle cx="22.5" cy="49.5" r="3" fill="%23ffffff" opacity=".35"/><rect x="57" y="61" width="6" height="5" rx="1" fill="%23c8a45c"/><circle cx="60" cy="75" r="11" fill="%232e6b4f"/><circle cx="56" cy="71" r="3.2" fill="%23ffffff" opacity=".35"/><rect x="89" y="29" width="6" height="5" rx="1" fill="%23a8843f"/><circle cx="92" cy="41" r="8" fill="%23cfa14f"/><circle cx="89.2" cy="38.2" r="2.4" fill="%23ffffff" opacity=".45"/></g></svg>') !important;
}

/* ---------- 3. Festive banner + garland ------------------------------- */
#ny-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ny-banner-h);
  z-index: 60;
  background: linear-gradient(180deg, #0e1630, var(--ny-midnight) 68%, var(--ny-midnight-deep));
  border-bottom: 1px solid var(--ny-gold-dim);
  box-shadow: 0 12px 36px rgba(4, 7, 18, .55);
  overflow: hidden;
}
#ny-banner .ny-garland {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ny-banner .ny-garland svg { display: block; }
#ny-banner .ny-text .ny-tree {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  filter: drop-shadow(0 0 6px rgba(95, 174, 133, .5));
}
#ny-banner .ny-text {
  position: absolute;
  left: 0; right: 0;
  bottom: 9px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .07em;
  color: #f4ead3;
  text-shadow: 0 0 18px rgba(233, 200, 126, .35);
  pointer-events: none;
}

/* garland lights: gentle staggered twinkle (opacity only — GPU friendly) */
.ny-bulb { animation: nyTwinkle 3.4s ease-in-out infinite; }
@keyframes nyTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .38; }
}

/* hanging baubles: very slow, very small sway */
.ny-bauble {
  transform-box: fill-box;
  transform-origin: top center;
  animation: nySwing 6.5s ease-in-out infinite alternate;
}
@keyframes nySwing {
  from { transform: rotate(-2.2deg); }
  to   { transform: rotate(2.2deg); }
}

/* ---------- 4. Fixed nav sits below the banner ------------------------ */
.header-nav { top: var(--ny-banner-h) !important; }
.header-nav.hdr-hidden { transform: translateY(calc(-130% - var(--ny-banner-h))) !important; }
.header-nav a { transition: color .25s ease, text-shadow .3s ease, opacity .25s ease; }
.header-nav a:hover { text-shadow: 0 0 14px rgba(233, 200, 126, .55); }
#mobileMenu { top: var(--ny-banner-h); }

/* ---------- 5. Snow ---------------------------------------------------- */
#ny-snow {
  position: fixed;
  inset: 0;
  z-index: 45;              /* under the nav (50) and banner (60) */
  pointer-events: none;
  overflow: hidden;
}
.ny-flake {
  position: absolute;
  top: -4vh;
  animation: nyFall linear infinite;
  will-change: transform;
}
.ny-flake i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 72%);
  animation: nySway ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes nyFall {
  to { transform: translate3d(0, 118vh, 0); }
}
@keyframes nySway {
  from { transform: translateX(-13px); }
  to   { transform: translateX(13px); }
}

@media (prefers-reduced-motion: reduce) {
  .ny-bulb, .ny-bauble, .ny-flake, .ny-flake i { animation: none !important; }
  #ny-snow { display: none; }
}