@import url("mz-menu.css"); /* login-control styles (.mz-user / .mz-gbtn) */
/* Align the home login icon with the top-bar login slot on every other page:
   the right edge of the centered 1080 content column (minus its 24px + 2px insets). */
.mz-auth-home { position: fixed; top: 26px; right: max(18px, calc((100vw - 1080px) / 2 + 26px)); z-index: 6000; }
.mz-auth-home:empty { display: none; }
/* css/landing.css — Mazmazika "Music Planet" landing hub.
   Extracted from the design prototype; component-injected CSS (tweaks panel,
   shared hero) ships inside js/landing/mz-ui.jsx. */

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: var(--font-body, "Geist", system-ui, sans-serif);
    color: var(--ink, #f3efff);
    background: var(--bg, #080611);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  #root { height: 100%; }

  .app {
    position: relative;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    color: var(--ink);
    transition: color .5s ease;
  }

  /* ── Background ───────────────────────────────────────────── */
  .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .bg-base {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 95% at 50% 12%, var(--bg3), transparent 56%),
      radial-gradient(110% 80% at 50% 118%, var(--bg2), transparent 62%),
      var(--bg);
    transition: background .5s ease;
  }
  .bg-nebula {
    position: absolute; inset: -22%;
    background:
      radial-gradient(52% 58% at 24% 26%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 76%),
      radial-gradient(56% 60% at 80% 80%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 78%),
      radial-gradient(48% 52% at 84% 20%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 78%);
    filter: blur(54px);
    opacity: .5;
    transition: opacity .5s ease;
  }
  .app[data-motion="1"] .bg-nebula { animation: nebula-drift 38s ease-in-out infinite alternate; }
  @keyframes nebula-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
  }
  .is-light .bg-nebula { opacity: .4; }

  .bg-stars { position: absolute; inset: 0; color: #fff; }
  .bg-stars span {
    position: absolute; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent);
  }
  .app[data-motion="1"] .bg-stars.twinkle span { animation: twinkle linear infinite; }
  @keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
  .is-light .bg-stars { color: var(--accent); opacity: .3; }

  .bg-grain {
    position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .5;
    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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }
  .bg-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(115% 100% at 50% 42%, transparent 52%, color-mix(in srgb, var(--bg) 92%, black) 100%);
    transition: background .5s ease;
  }

  /* ── Hero (siblings share root stacking context for depth) ─ */
  .hero { position: absolute; inset: 0; pointer-events: none; }

  /* welcome wordmark — moved to the TOP of the page */
  .hero-text {
    position: absolute; left: 50%; top: 30px; transform: translateX(-50%);
    z-index: 650; text-align: center; pointer-events: none; width: min(94vw, 920px);
  }
  .hero-eyebrow {
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: .42em; text-indent: .42em; color: var(--sub);
    text-transform: uppercase; margin-bottom: 10px; opacity: .9;
  }
  .wordmark {
    margin: 0; font-family: var(--font-display); font-style: var(--display-style);
    font-weight: 600; line-height: .9; letter-spacing: -.01em;
    font-size: clamp(40px, 7vw, 100px);
    color: var(--ink);
    text-shadow: 0 2px 40px color-mix(in srgb, var(--glow) 45%, transparent);
  }
  .is-dark .wordmark { color: #fff; }
  .tagline {
    margin: 8px 0 0; font-family: var(--font-display); font-style: var(--display-style);
    font-size: clamp(16px, 2.2vw, 24px); color: var(--ink); opacity: .82;
    letter-spacing: .01em;
  }

  /* decorative orbit rings around the sun */
  .orbits { position: absolute; inset: 0; z-index: 120; }
  .orbit {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
    border-radius: 50%;
  }
  .orbit-1 { width: 760px; height: 232px; }
  .orbit-2 { width: 1040px; height: 318px; border-color: color-mix(in srgb, var(--ink) 8%, transparent); }

  /* ── Musical Sun — realistic warm star, smaller & lifted above the bubbles ── */
  .sun {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
    width: 300px; height: 300px; z-index: 300; pointer-events: none;
  }
  .sun-glow {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255,170,80,.5) 0%,
      rgba(255,120,40,.28) 26%,
      color-mix(in srgb, var(--glow) 22%, transparent) 48%,
      transparent 64%);
    filter: blur(30px); opacity: .9; transition: background .5s ease;
  }
  .app[data-motion="1"] .sun-glow { animation: sunglow 6s ease-in-out infinite; }
  @keyframes sunglow { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
  .is-light .sun-glow { opacity: .62; }

  .sun-ripple {
    position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; border-radius: 50%;
    border: 1.5px solid rgba(255,190,120,.45);
    transform: translate(-50%,-50%) scale(.55); opacity: 0;
  }
  .app[data-motion="1"] .sun-ripple { animation: sunripple 4.4s ease-out infinite; }
  .sr2 { animation-delay: 1.5s !important; }
  .sr3 { animation-delay: 3s !important; }
  @keyframes sunripple {
    0% { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
    14% { opacity: .5; }
    100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
  }

  .sun-eq { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
    filter: drop-shadow(0 0 7px rgba(255,150,60,.5)); }
  .eq-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--base)); }
  .app[data-motion="1"] .eq-bar { animation-name: eq; animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; animation-direction: alternate; }
  @keyframes eq {
    from { transform: scaleY(calc(var(--base) * .4)); }
    to   { transform: scaleY(calc(var(--base) * 1.3)); }
  }

  .sun-core {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background:
      radial-gradient(circle at 42% 37%,
        #fffdf4 0%, #ffe7a2 15%, #ffc24d 38%, #ff8a32 64%, #ef5a1c 85%, #be3a11 100%);
    box-shadow:
      0 0 64px 2px rgba(255,150,60,.5),
      inset -9px -13px 30px rgba(140,38,8,.6),
      inset 7px 9px 24px rgba(255,244,210,.5);
    color: rgba(255,255,255,.96);
  }
  .sun-surface {
    position: absolute; inset: 0; border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    background-size: 150% 150%; mix-blend-mode: soft-light; opacity: .6;
  }
  .app[data-motion="1"] .sun-surface { animation: boil 16s linear infinite; }
  @keyframes boil {
    0% { background-position: 0% 0%; transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { background-position: 120% 90%; transform: scale(1); }
  }
  .sun-flare {
    position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
    background: radial-gradient(38% 30% at 64% 30%, rgba(255,246,210,.85), transparent 60%),
                radial-gradient(30% 24% at 32% 66%, rgba(255,170,90,.6), transparent 62%);
  }
  .app[data-motion="1"] .sun-flare { animation: flare 9s ease-in-out infinite; }
  @keyframes flare { 0%,100% { opacity: .8; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(8deg) scale(1.05); } }
  .sun-core-sheen { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(50% 40% at 38% 26%, rgba(255,255,255,.7), transparent 56%); }
  .sun-wave { position: relative; width: 96px; height: 38px; z-index: 1;
    filter: drop-shadow(0 1px 3px rgba(120,40,0,.5)); }
  .wave-path { color: rgba(255,255,255,.96); }
  .app[data-motion="1"] .wave-path { animation: wavebreathe 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes wavebreathe { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(1.15); } }

  .now-orbit {
    position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%);
    z-index: 720; display: inline-flex; align-items: center; gap: 26px;
    max-width: min(92vw, 900px);
    padding: 24px 38px 24px 30px; border-radius: 30px;
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 24px 70px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
    font-family: var(--font-body); pointer-events: none;
    animation: nowin .5s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes nowin { from { transform: translate(-50%, 10px); } to { transform: translateX(-50%); } }
  .no-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); box-shadow: 0 0 16px 2px var(--accent); }
  .app[data-motion="1"] .no-dot { animation: blip 1.8s ease-in-out infinite; }
  @keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .no-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
  .no-label { font-family: var(--font-display); font-style: var(--display-style);
    font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--ink); white-space: nowrap;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--glow) 30%, transparent); }
  .no-desc { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4; color: var(--ink); opacity: .82;
    text-wrap: pretty; }
  .no-open { pointer-events: auto; flex-shrink: 0; margin-left: 6px; padding: 13px 24px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
    box-shadow: 0 0 22px -2px color-mix(in srgb, var(--accent) 70%, transparent); transition: filter .15s ease, transform .12s ease; }
  .no-open:hover { filter: brightness(1.1); transform: translateY(-1px); }

  .explore-hint {
    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
    z-index: 720; font-family: var(--font-body); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sub); opacity: .6; pointer-events: none;
  }

  /* ── Wheel ────────────────────────────────────────────────── */
  .wheel-stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
  .wheel-stage.grabbing { cursor: grabbing; }
  .wheel-ring { position: absolute; inset: 0; }

  .bubble {
    position: absolute; left: 50%; top: 50%;
    width: 176px; display: flex; flex-direction: column; align-items: center;
    text-decoration: none; cursor: pointer;
    will-change: transform, filter, opacity;
  }
  .bubble-orb {
    position: relative; width: 152px; height: 152px; border-radius: 50%;
    display: grid; place-items: center;
    background:
      radial-gradient(circle at 34% 25%, rgba(255,255,255,.58), rgba(255,255,255,.06) 36%, transparent 56%),
      radial-gradient(circle at 64% 84%, color-mix(in srgb, var(--bubbleColor) 32%, transparent), transparent 64%),
      color-mix(in srgb, var(--bubbleColor) 9%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--bubbleColor) 48%, white 30%);
    -webkit-backdrop-filter: blur(5px) saturate(150%); backdrop-filter: blur(5px) saturate(150%);
    box-shadow:
      inset 0 6px 24px rgba(255,255,255,.30),
      inset 0 -28px 48px color-mix(in srgb, var(--bubbleColor) 28%, transparent),
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 20px 54px -18px color-mix(in srgb, var(--bubbleColor) 45%, transparent);
    transition: transform .25s cubic-bezier(.3,.7,.4,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
  }
  .is-light .bubble-orb {
    background:
      radial-gradient(circle at 34% 25%, rgba(255,255,255,.9), rgba(255,255,255,.12) 38%, transparent 58%),
      radial-gradient(circle at 64% 84%, color-mix(in srgb, var(--bubbleColor) 28%, transparent), transparent 64%),
      color-mix(in srgb, var(--bubbleColor) 12%, rgba(255,255,255,.16));
    border-color: color-mix(in srgb, var(--bubbleColor) 42%, white 12%);
    box-shadow:
      inset 0 6px 22px rgba(255,255,255,.72),
      inset 0 -24px 44px color-mix(in srgb, var(--bubbleColor) 20%, transparent),
      inset 0 0 0 1px rgba(255,255,255,.5),
      0 20px 50px -20px color-mix(in srgb, var(--bubbleColor) 38%, transparent);
  }
  .bubble-sheen {
    position: absolute; inset: 9px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(62% 42% at 38% 19%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%);
  }
  .bubble-icon { color: #ffffff; display: grid; place-items: center;
    filter: drop-shadow(0 1px 7px color-mix(in srgb, var(--bubbleColor) 45%, transparent)); }
  .is-light .bubble-icon { color: #0b0b12; filter: drop-shadow(0 1px 4px rgba(0,0,0,.16)); }
  .bubble-icon svg { display: block; width: 54px; height: 54px; }

  .bubble-label {
    margin-top: 17px; font-family: var(--font-body); font-weight: 600; font-size: 16px;
    color: var(--ink); white-space: nowrap; letter-spacing: .005em;
    text-shadow: 0 2px 16px color-mix(in srgb, var(--bg) 82%, transparent);
    transition: color .3s ease;
  }
  .bubble.is-front .bubble-label { color: var(--ink); }
  .bubble.is-front .bubble-orb {
    border-color: color-mix(in srgb, var(--bubbleColor) 70%, white 30%);
    box-shadow:
      inset 0 6px 26px rgba(255,255,255,.38),
      inset 0 -30px 52px color-mix(in srgb, var(--bubbleColor) 36%, transparent),
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 26px 64px -16px color-mix(in srgb, var(--bubbleColor) 52%, transparent),
      0 0 34px -4px color-mix(in srgb, var(--bubbleColor) 36%, transparent);
  }
  .bubble.is-hover .bubble-orb { transform: translateY(-6px); }

  .bubble-desc {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 6px);
    width: 196px; padding: 11px 14px; border-radius: 13px;
    font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--ink);
    background: color-mix(in srgb, var(--bg2) 80%, transparent);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 14px 40px -16px rgba(0,0,0,.7);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
    text-wrap: pretty; z-index: 5;
  }
  .bubble.is-hover .bubble-desc { opacity: 1; transform: translate(-50%, 0); }

  /* ── Menu rail ────────────────────────────────────────────── */
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 66px; z-index: 6000;
    display: flex; flex-direction: column; padding: 16px 0;
    background: color-mix(in srgb, var(--bg) 66%, transparent);
    border-right: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    overflow: hidden;
    transition: width .3s cubic-bezier(.3,.7,.4,1), box-shadow .3s ease, background .5s ease;
  }
  .rail:hover { width: 252px; box-shadow: 30px 0 80px -30px rgba(0,0,0,.7); }

  .rail-brand { display: flex; align-items: center; gap: 16px; height: 46px; padding-left: 22px;
    text-decoration: none; flex-shrink: 0; margin-bottom: 10px; }
  .rail-logo { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 70%, transparent)); display: grid; place-items: center; }
  .rail-brand-text { font-family: var(--font-display); font-style: var(--display-style);
    font-size: 21px; font-weight: 600; color: var(--ink); white-space: nowrap;
    opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease; }

  .rail-items { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 6px 0;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  .rail-items::-webkit-scrollbar { width: 0; }

  .rail-item, .rail-theme {
    display: flex; align-items: center; gap: 16px; height: 44px;
    margin: 0 10px; padding-left: 12px; border-radius: 12px;
    text-decoration: none; color: var(--sub); border: 0; background: transparent;
    font: inherit; cursor: pointer; flex-shrink: 0; width: calc(100% - 20px);
    transition: background .18s ease, color .18s ease;
  }
  .rail-theme { margin-top: 10px; }
  .rail-item:hover, .rail-theme:hover {
    background: color-mix(in srgb, var(--bubbleColor, var(--accent)) 18%, transparent);
    color: var(--ink);
  }
  .rail-item:hover .rail-ico { color: var(--bubbleColor, var(--accent));
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bubbleColor, var(--accent)) 70%, transparent)); }
  .rail-ico { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; color: inherit; transition: color .18s ease, filter .18s ease; }
  .rail-label { font-family: var(--font-body); font-size: 14.5px; font-weight: 500; white-space: nowrap;
    color: inherit; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease; }
  .rail:hover .rail-brand-text, .rail:hover .rail-label { opacity: 1; transform: translateX(0); }
  .rail-theme { color: var(--sub); }

  /* ── Tweak panel: custom theme swatch grid ────────────────── */
  .mz-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mz-sw { height: 26px; border-radius: 7px; border: 0; cursor: pointer; padding: 0;
    box-shadow: 0 0 0 .5px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .12s ease; }
  .mz-sw:hover { transform: translateY(-1px); }
  .mz-sw.on { box-shadow: 0 0 0 2px rgba(20,20,30,.9), 0 2px 6px rgba(0,0,0,.2); }

  /* ── responsive ───────────────────────────────────────────── */
  @media (max-width: 760px) {
    .sun { width: 300px; height: 300px; }
    .sun-glow { width: 300px; height: 300px; }
    .sun-core { width: 120px; height: 120px; }
    .sun-wave { width: 84px; height: 34px; }
    .orbit-1 { width: 460px; height: 150px; } .orbit-2 { width: 640px; height: 200px; }
    .bubble { width: 124px; } .bubble-orb { width: 108px; height: 108px; }
    .bubble-icon svg { width: 40px; height: 40px; }
    .bubble-label { font-size: 14px; margin-top: 13px; }
    .hero-text { top: 18px; width: 92vw; }
    /* keep the changing description visible — it's the centrepiece — just compact */
    .now-orbit { gap: 14px; padding: 16px 18px; max-width: 94vw; bottom: 46px; }
    .no-label { font-size: clamp(22px, 6.4vw, 30px); }
    .no-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; font-size: 14px; line-height: 1.35; }
    .no-open { padding: 11px 18px; font-size: 15px; }
    .explore-hint { display: none; }
    .rail { width: 56px; } .rail:hover { width: 230px; }
  }
  @media (max-width: 460px) {
    .sun { width: 248px; height: 248px; }
    .sun-glow { width: 248px; height: 248px; }
    .sun-core { width: 104px; height: 104px; }
    .sun-wave { width: 74px; height: 30px; }
    .orbit-1 { width: 360px; height: 116px; } .orbit-2 { width: 500px; height: 158px; }
    .bubble { width: 104px; } .bubble-orb { width: 90px; height: 90px; }
    .bubble-icon svg { width: 34px; height: 34px; }
    .bubble-label { font-size: 12.5px; margin-top: 11px; }
    .wordmark { font-size: clamp(32px, 11vw, 46px); }
    .tagline { font-size: clamp(14px, 4.2vw, 18px); }
    .now-orbit { gap: 12px; padding: 13px 14px; bottom: 28px; border-radius: 22px; }
    .no-open { padding: 9px 14px; font-size: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bg-nebula, .sun-glow, .sun-surface, .sun-flare, .sun-ripple, .eq-bar, .wave-path, .no-dot, .bg-stars span { animation: none !important; }
  }

/* No-JS / crawler fallback nav (rendered only inside <noscript>) */
.landing-noscript { padding: 24px; font-family: system-ui, sans-serif; color: #f3efff; background: #080611; }
.landing-noscript a { color: #a35bff; }