/* =============================================================================
   Dream — an "extreme aesthetic" swing for the Loop interior.
   Luminous aura-gradient world, frosted glass, bloom/glow, sparkle, gradient
   type. Uses Loop's OWN vivid landing tokens (--color-landing-*: plum/rose/gold/
   teal/coral on aubergine) so it's bold but still Loop's palette, not invented.
   Feminine, dreamy, digital-art — the opposite of a document layout.
   ========================================================================== */

body {
  font-family: var(--font-ui);
  background: var(--color-landing-ink-deep);
  color: var(--color-landing-cream);
  overflow-x: hidden;
}

/* ---- the aura: layered luminous blooms, blurred into a dream ---- */
.aura {
  position: fixed;
  inset: -25%;
  z-index: 0;
  filter: blur(70px) saturate(1.35);
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 78% 14%, color-mix(in srgb, var(--color-landing-rose) 92%, transparent), transparent 70%),
    radial-gradient(42% 34% at 16% 22%, color-mix(in srgb, var(--color-landing-plum) 90%, transparent), transparent 72%),
    radial-gradient(46% 40% at 30% 96%, color-mix(in srgb, var(--color-landing-gold) 80%, transparent), transparent 70%),
    radial-gradient(40% 34% at 92% 82%, color-mix(in srgb, var(--color-landing-teal) 70%, transparent), transparent 72%),
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--color-landing-coral) 42%, transparent), transparent 78%),
    var(--color-landing-ground);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%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)'/%3E%3C/svg%3E");
}
/* drifting sparkles */
.stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.stars i {
  position: absolute;
  color: var(--color-landing-cream);
  opacity: 0.85;
  font-size: 0.9rem;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-landing-cream) 60%, transparent));
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 0.95; transform: scale(1.1); }
}

.wrap {
  position: relative;
  z-index: 2;
  inline-size: min(92vw, 30rem);
  margin-inline: auto;
  padding-block: var(--space-4) calc(var(--space-10) + var(--space-9));
}

/* ---- floating glass chips ---- */
.topchips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.chip {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border-radius: var(--radius-pill);
  color: var(--color-landing-cream);
  background: color-mix(in srgb, var(--color-landing-cream) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-landing-cream) 22%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.chipRow {
  display: inline-flex;
  gap: var(--space-2);
}
.i {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* ---- hero: a glowing cover orb + gradient title ---- */
.hero {
  text-align: center;
  padding-block: var(--space-6) var(--space-4);
}
.orb {
  position: relative;
  inline-size: 15rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 42% 58% 56% 44% / 48% 42% 58% 52%;
  background:
    radial-gradient(70% 60% at 32% 26%, color-mix(in srgb, var(--color-landing-gold) 85%, #fff), transparent 60%),
    linear-gradient(150deg, var(--color-landing-rose), var(--color-landing-plum) 60%, var(--color-landing-coral));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-landing-cream) 24%, transparent),
    0 30px 80px -20px color-mix(in srgb, var(--color-landing-rose) 70%, transparent),
    0 10px 50px -10px color-mix(in srgb, var(--color-landing-plum) 60%, transparent);
  animation: float 7s ease-in-out infinite alternate;
}
.orb::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: inherit;
  background: radial-gradient(60% 50% at 40% 30%, color-mix(in srgb, #fff 55%, transparent), transparent 55%);
  mix-blend-mode: screen;
}
@keyframes float {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-14px) rotate(2deg); }
}
.hosts {
  position: relative;
  display: inline-flex;
  margin-block-start: calc(-1 * var(--space-6));
  margin-inline-start: 8.5rem;
}
.ava {
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-landing-ink-deep);
  background: var(--color-landing-cream);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-landing-plum) 60%, transparent), 0 8px 20px -6px rgba(0,0,0,.5);
}
.ava + .ava { margin-inline-start: calc(-1 * var(--space-3)); }
.ava--sm { inline-size: var(--space-7); block-size: var(--space-7); font-size: var(--font-size-xs); }

.eyebrow {
  margin-block-start: var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-landing-cream) 78%, transparent);
}
.title {
  margin-block-start: var(--space-2);
  font-size: clamp(2.8rem, 15vw, 4.2rem);
  font-weight: var(--font-weight-heavy);
  line-height: 0.94;
  letter-spacing: -0.035em;
  background: linear-gradient(
    100deg,
    var(--color-landing-gold),
    var(--color-landing-rose) 42%,
    var(--color-landing-cream) 78%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 20px color-mix(in srgb, var(--color-landing-rose) 45%, transparent));
}
.sub {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-relaxed);
  color: color-mix(in srgb, var(--color-landing-cream) 84%, transparent);
}
.sub b { color: var(--color-landing-gold); font-weight: var(--font-weight-semibold); }

/* ---- frosted glass card ---- */
.glass {
  position: relative;
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-landing-cream) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-landing-cream) 20%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-landing-cream) 30%, transparent),
    0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.gRow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.gRow + .gRow { border-block-start: 1px solid color-mix(in srgb, var(--color-landing-cream) 12%, transparent); }
.gGlyph {
  display: grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border-radius: var(--radius-md);
  flex: none;
  color: var(--color-landing-ink-deep);
}
.gGlyph--a { background: linear-gradient(140deg, var(--color-landing-gold), var(--color-landing-coral)); }
.gGlyph--b { background: linear-gradient(140deg, var(--color-landing-teal), var(--color-landing-plum)); }
.gBody { flex: 1; min-inline-size: 0; }
.gBody b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.gBody span { font-size: var(--font-size-sm); color: color-mix(in srgb, var(--color-landing-cream) 70%, transparent); }

/* ---- roster: glowing bubbles ---- */
.who {
  margin-block-start: var(--space-6);
  text-align: center;
}
.whoLabel {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-landing-cream) 66%, transparent);
}
.bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.bubble {
  display: grid;
  place-items: center;
  inline-size: var(--control-lg);
  block-size: var(--control-lg);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-landing-cream);
  background: color-mix(in srgb, var(--color-landing-cream) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-landing-cream) 24%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--glow, var(--color-landing-rose)) 80%, transparent);
}

/* ---- glossy jelly CTA ---- */
.cta {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--space-7);
  padding-block: var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-landing-ink-deep);
  background: linear-gradient(120deg, var(--color-landing-gold), var(--color-landing-rose) 58%, var(--color-landing-coral));
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, #fff 55%, transparent),
    inset 0 -3px 8px color-mix(in srgb, var(--color-landing-plum) 40%, transparent),
    0 18px 40px -12px color-mix(in srgb, var(--color-landing-rose) 75%, transparent);
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.cta:hover { filter: brightness(1.05); }
.cta:active { transform: scale(0.98); }

/* ---- dreamy nav pill ---- */
.nav {
  position: fixed;
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  inset-inline: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.navInner {
  pointer-events: auto;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-landing-ink-deep) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-landing-cream) 22%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.7);
}
.navInner button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: color-mix(in srgb, var(--color-landing-cream) 72%, transparent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.navInner button .lbl { display: none; }
.navInner button[aria-current='true'] {
  color: var(--color-landing-ink-deep);
  background: linear-gradient(120deg, var(--color-landing-gold), var(--color-landing-rose));
  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--color-landing-rose) 80%, transparent);
}
.navInner button[aria-current='true'] .lbl { display: inline; }