/* ═══════════════════════════════════════════════════════════
   SELF MADE — landing.css  v9  Pixel-Perfect Render Match
   ═══════════════════════════════════════════════════════════ */

/* ── LAYER 1: Deep space background ─────────────────────── */
.landing {
  position: relative;
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   #0e1520 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 50%,  #060810 0%, #020305 60%, #010203 100%);
}

/* ── LAYER 2: Noise mist ─────────────────────────────────── */
.landing::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px; opacity: 0.04; mix-blend-mode: screen;
}

/* ── LAYER 3: Top light beams ────────────────────────────── */
.landing::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 55% at 38% 0%, rgba(255,255,255,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 25% 45% at 62% 0%, rgba(255,255,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 18% 35% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 45%);
  filter: blur(35px);
}

/* ── LAYER 4A: Background asteroid field ────────────────── */
.landing-bg-asteroids {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url('s4.png') center center / cover no-repeat;
  opacity: 0.45;
  mix-blend-mode: luminosity;
  filter: brightness(0.28) contrast(1.45);
  will-change: transform;
}

/* ── LAYER 4B: Big rock — bottom left ───────────────────── */
.landing-rock-left {
  position: absolute; left: -6%; bottom: -8%; z-index: 3;
  width: 48%; max-width: 680px; pointer-events: none;
  will-change: transform;
}
.landing-rock-left img {
  width: 100%; height: auto;
  filter: brightness(0.38) contrast(1.55) saturate(0);
  transform: rotate(-12deg) scaleX(-1);
  animation: rockFloat 18s ease-in-out infinite;
  mix-blend-mode: lighten;
}

/* ── LAYER 4C: Big rock — right side ────────────────────── */
.landing-rock-right {
  position: absolute; right: -3%; top: 3%; z-index: 3;
  width: 36%; max-width: 500px; pointer-events: none;
  will-change: transform;
}
.landing-rock-right img {
  width: 100%; height: auto;
  filter: brightness(0.4) contrast(1.6) saturate(0);
  transform: rotate(10deg);
  animation: rockFloat 22s ease-in-out infinite reverse;
  mix-blend-mode: lighten;
}

/* ── LAYER 4D: Small asteroid top-left ──────────────────── */
.landing-rock-tl {
  position: absolute; left: 9%; top: 7%; z-index: 4;
  width: 7%; max-width: 110px; pointer-events: none;
  animation: rockFloat 14s ease-in-out infinite; animation-delay: -3s;
  will-change: transform;
}
.landing-rock-tl img {
  width: 100%; height: auto;
  filter: brightness(0.5) contrast(1.4) saturate(0);
  mix-blend-mode: screen;
}

/* ── LAYER 4E: Small asteroid top-right ─────────────────── */
.landing-rock-tr {
  position: absolute; right: 19%; top: 9%; z-index: 4;
  width: 4.5%; max-width: 75px; pointer-events: none;
  animation: rockFloat 11s ease-in-out infinite; animation-delay: -6s;
  will-change: transform;
}
.landing-rock-tr img {
  width: 100%; height: auto;
  filter: brightness(0.42) contrast(1.5) saturate(0);
  mix-blend-mode: screen;
}

/* ── LAYER 5: Black Chrome orbs ─────────────────────────── */
/* From render: large orb top-right, medium scattered, small floating */
.chrome-orb {
  position: absolute; z-index: 4; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5a5a5a 0%, #1e1e1e 35%, #080808 65%, #000 100%);
  box-shadow:
    inset -6px -6px 18px rgba(0,0,0,0.98),
    inset 4px 4px 10px rgba(140,140,140,0.14),
    0 10px 40px rgba(0,0,0,0.95),
    0 0 80px rgba(0,0,0,0.8);
  animation: orbDrift var(--od,12s) var(--odl,0s) ease-in-out infinite;
  will-change: transform;
}
/* Large orb — top right (matches render) */
.orb-a { width:90px; height:90px;  top:8%;  right:10%; --od:14s; --odl:0s; }
/* Medium orb — top left area */
.orb-b { width:48px; height:48px;  top:20%; left:16%;  --od:10s; --odl:-3s; }
/* Small orb — top center-right */
.orb-c { width:26px; height:26px;  top:6%;  right:26%; --od:8s;  --odl:-5s; }
/* Medium orb — mid right */
.orb-d { width:64px; height:64px;  top:38%; right:5%;  --od:16s; --odl:-2s; }
/* Small orb — lower left */
.orb-e { width:32px; height:32px;  bottom:36%; left:11%; --od:9s; --odl:-7s; }

/* ── LAYER 6: Orbital rings (thin gold lines from render) ── */
.orbital-ring {
  position: absolute; z-index: 4; border-radius: 50%;
  border: 1px solid rgba(200,180,140, 0.20); pointer-events: none;
  animation: ringRotate var(--rspd,28s) linear infinite;
}
.orbital-ring::before {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px solid rgba(200,180,140, 0.07);
}
.ring-main  { width:480px; height:480px; left:-20%; top:8%;    --rspd:36s; transform:rotate(-22deg); }
.ring-small { width:200px; height:200px; right:7%;  bottom:25%;--rspd:22s; animation-direction:reverse; border-color:rgba(200,180,140,0.10); }

/* ── LAYER 7A: Ghost text behind title ──────────────────── */
.landing-ghost-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  z-index: 5; pointer-events: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(170px, 26vw, 340px);
  line-height: 0.85; letter-spacing: 0.06em;
  text-align: center; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.025);
  user-select: none;
}

/* ── LAYER 7B: Wireframe geometry ───────────────────────── */
.wireframe-geo { position: absolute; z-index: 5; pointer-events: none; opacity: 0.07; }
.wireframe-geo-left {
  left: 2%; top: 22%; width: 130px; height: 190px;
  border: 1px solid rgba(255,255,255,0.5);
  border-right: none; border-bottom: none;
}
.wireframe-geo-left::before {
  content: ''; position: absolute; top: 28px; left: 18px;
  width: 75px; height: 95px;
  border: 1px solid rgba(255,255,255,0.5); border-right: none;
}

/* ── STARS ───────────────────────────────────────────────── */
.stars-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: starP var(--d,3s) var(--dl,0s) ease-in-out infinite;
}
@keyframes starP { 0%,100%{opacity:var(--lo,.04)} 50%{opacity:var(--hi,.3)} }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes rockFloat {
  0%,100% { transform: rotate(var(--rot,0deg)) translateY(0px); }
  33%     { transform: rotate(var(--rot,0deg)) translateY(-14px); }
  66%     { transform: rotate(var(--rot,0deg)) translateY(-6px); }
}
@keyframes orbDrift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-20px) rotate(5deg); }
  66%     { transform: translateY(-9px) rotate(-3deg); }
}
@keyframes ringRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ══════════════════════════════════════════════════════════
   TOP NAVIGATION — pixel-perfect match to render
   ══════════════════════════════════════════════════════════ */
.landing-nav {
  position: relative; z-index: 20;
  display: flex; align-items: center;
  padding: 28px 48px;
}

/* Logo — top left, stacked SELF / MADE */
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  margin-right: auto;
}
.nav-logo-img {
  width: 38px; height: 38px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.nav-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.92); line-height: 1.05;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 4px 8px; border-radius: 4px;
}

/* Nav links — center */
.nav-links {
  display: flex; align-items: center; gap: 44px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  background: none; border: none; padding: 0;
  cursor: pointer; transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: rgba(255,255,255,0.95); }

/* Nav actions — right */
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: rgba(255,255,255,0.4); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; padding: 7px 12px; cursor: pointer; transition: color 0.2s;
}
.lang-toggle-btn:hover { color: rgba(255,255,255,0.8); }

/* JOIN US — exact from render: rounded border, white */
.join-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 10px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.92);
  cursor: pointer; transition: all 0.22s;
}
.join-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
}

/* Left nav dots */
.landing-nav-indicators {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 20px; z-index: 20;
}
.nav-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.2); transition: background 0.2s;
}
.nav-dot.active { background: rgba(255,255,255,0.9); }

/* Right SCROLL */
.scroll-label {
  position: absolute; right: 20px; top: 50%; z-index: 20;
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.28); text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; animation: fadeU 1s 1.2s both;
}
.scroll-label::after {
  content: ''; width: 1px; height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.22), transparent);
}

/* ══════════════════════════════════════════════════════════
   HERO CENTER — WELCOME TO + typography image + tagline
   ══════════════════════════════════════════════════════════ */
.hero-center {
  position: relative; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 10px 40px 0;
  flex: 1; justify-content: center;
  max-width: 860px; margin: 0 auto; width: 100%;
}

.hero-welcome {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.38em; text-transform: uppercase;
  margin-bottom: 20px;
  animation: fadeU 0.8s 0.3s both;
}

/* Typography image */
.hero-title-wrap { position: relative; display: inline-block; will-change: transform; transform-origin: center center; }
.hero-title-img {
  width: clamp(300px, 46vw, 600px);
  height: auto; display: block;
  filter:
    drop-shadow(0 0 40px rgba(255,255,255,0.1))
    drop-shadow(0 20px 60px rgba(0,0,0,0.9))
    drop-shadow(0 4px 8px rgba(0,0,0,0.95));
  animation: titleIn 1s cubic-bezier(0.22,1,0.36,1) both;
  user-select: none; pointer-events: none;
}
@keyframes titleIn {
  from { opacity:0; transform: translateY(40px) scale(0.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Tagline — from render */
.hero-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,0.42);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 24px; line-height: 2;
  animation: fadeU 0.8s 0.5s both;
}

/* CTA button — from render: rounded, minimal */
.hero-cta { margin-top: 36px; animation: fadeU 0.8s 0.65s both; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 48px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  cursor: pointer; transition: all 0.25s;
}
.cta-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 0 30px rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.cta-btn-arrow { font-size: 14px; opacity: 0.7; transition: transform 0.25s; }
.cta-btn:hover .cta-btn-arrow { transform: translateX(5px); opacity: 1; }

/* ══════════════════════════════════════════════════════════
   THE FAMILY — pixel-perfect match to render
   ══════════════════════════════════════════════════════════ */
.family-section {
  position: relative; z-index: 20;
  padding: 28px 60px 64px;
  animation: fadeU 0.9s 0.8s both;
}
.family-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.44em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
  text-align: center; margin-bottom: 44px;
}

/* Grid — 5 columns matching render exactly */
.family-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 0;
  max-width: 1000px; margin: 0 auto;
}

/* Member card */
.family-member {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  cursor: pointer;
  will-change: transform, opacity;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.family-member:hover { transform: translateY(-8px) !important; }

/* Avatar circle — from render: ~170px, visible border, grayscale photo */
.family-avatar {
  width: 165px; height: 165px;
  border-radius: 50%;
  position: relative; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 50px rgba(255,255,255,0.04),
    0 10px 50px rgba(0,0,0,0.85),
    inset 0 0 40px rgba(0,0,0,0.5);
  background: #080808;
  transition: all 0.32s;
}

/* Lens glare — top-left highlight */
.family-avatar::before {
  content: ''; position: absolute; z-index: 3;
  top: -15%; left: -10%; width: 55%; height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Rim light — warm gold glow (visible in render on some members) */
.family-avatar::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%; z-index: 2;
  background: conic-gradient(
    from 95deg,
    transparent 0%,
    rgba(255,200,100,0.28) 15%,
    rgba(255,230,160,0.12) 26%,
    transparent 40%,
    transparent 100%
  );
  opacity: 0; transition: opacity 0.32s; pointer-events: none;
}
.family-member:hover .family-avatar::after { opacity: 1; }
/* Certain members always have the glow (as in render) */
.family-member:nth-child(3) .family-avatar::after  { opacity: 0.7; }
.family-member:nth-child(4) .family-avatar::after  { opacity: 0.55; }
.family-member:nth-child(8) .family-avatar::after  { opacity: 0.4; }

/* Hover: border brightens */
.family-member:hover .family-avatar {
  border-color: rgba(255,255,255,0.5);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 60px rgba(255,255,255,0.08),
    0 14px 60px rgba(0,0,0,0.95),
    inset 0 0 20px rgba(0,0,0,0.3);
}

/* Emoji fallback */
.avatar-emoji {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  background: radial-gradient(circle at 38% 32%, #1c1c1c 0%, #060606 68%);
}

/* Photo — grayscale, high contrast like render */
.avatar-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  filter: grayscale(100%) contrast(1.22) brightness(0.75);
  transition: filter 0.3s;
}
.family-member:hover .avatar-img {
  filter: grayscale(100%) contrast(1.28) brightness(0.82);
}

/* Name — uppercase mono */
.family-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
/* Role */
.family-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-top: -8px;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM-LEFT MINI PLAYER (waveform bars from render)
   ══════════════════════════════════════════════════════════ */
.landing-mini-eq {
  position: absolute; bottom: 22px; left: 28px; z-index: 20;
  display: flex; align-items: flex-end; gap: 3px; height: 22px;
}
.landing-mini-eq span {
  width: 3px; background: rgba(255,255,255,0.35); border-radius: 2px;
  animation: lmeq 1s ease-in-out infinite;
}
.landing-mini-eq span:nth-child(1){height:8px; animation-delay:0s}
.landing-mini-eq span:nth-child(2){height:16px;animation-delay:.1s}
.landing-mini-eq span:nth-child(3){height:10px;animation-delay:.2s}
.landing-mini-eq span:nth-child(4){height:20px;animation-delay:.05s}
.landing-mini-eq span:nth-child(5){height:13px;animation-delay:.15s}
@keyframes lmeq { 0%,100%{opacity:.35;transform:scaleY(0.6)} 50%{opacity:.7;transform:scaleY(1)} }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeU {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── LIGHT MODE overrides ────────────────────────────────── */
.light-mode .landing {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #d8dde8 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 50%, #e8eaee 0%, #f0f2f5 60%, #f5f5f5 100%);
}
/* WebGL canvas inherits bg via JS; hide it in light mode if WebGL loaded so CSS bg shows */
.light-mode #space-canvas {
  opacity: 0.18;   /* dim the dark space scene instead of hiding it entirely */
  mix-blend-mode: multiply;
}
.light-mode .landing-rock-left img,
.light-mode .landing-rock-right img,
.light-mode .landing-rock-tl img,
.light-mode .landing-rock-tr img {
  filter: brightness(0.55) contrast(1.3) saturate(0) !important;
  mix-blend-mode: multiply !important;
}
.light-mode .landing-bg-asteroids {
  filter: brightness(0.4) contrast(1.3) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.3 !important;
}
.light-mode .hero-title-img { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3)) brightness(0.1) !important; }
.light-mode .hero-welcome,
.light-mode .hero-tagline { color: rgba(0,0,0,0.5) !important; }
.light-mode .cta-btn { border-color: rgba(0,0,0,0.35) !important; color: #111 !important; }
.light-mode .family-name { color: rgba(0,0,0,0.85) !important; }
.light-mode .family-role { color: rgba(0,0,0,0.4) !important; }
.light-mode .family-label { color: rgba(0,0,0,0.3) !important; }
.light-mode .family-avatar {
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.1) !important;
}
.light-mode .family-avatar::after { display: none; }
.light-mode .nav-link { color: rgba(0,0,0,0.5) !important; }
.light-mode .nav-link:hover, .light-mode .nav-link.active { color: #000 !important; }
.light-mode .join-btn { border-color: rgba(0,0,0,0.5) !important; color: #111 !important; }
.light-mode .nav-logo-text { color: #111 !important; border-color: rgba(0,0,0,0.25) !important; }
.light-mode .nav-logo-img { filter: none !important; }
.light-mode .scroll-label { color: rgba(0,0,0,0.3) !important; }
.light-mode .orbital-ring { border-color: rgba(0,0,0,0.1) !important; }
.light-mode .chrome-orb {
  background: radial-gradient(circle at 32% 28%, #bbb 0%, #888 40%, #444 70%, #222 100%) !important;
}
.light-mode .landing-ghost-text { -webkit-text-stroke-color: rgba(0,0,0,0.035) !important; }
.light-mode .landing-mini-eq span { background: rgba(0,0,0,0.3) !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .family-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 0; }
  .family-avatar { width: 140px; height: 140px; }
}
@media (max-width: 900px) {
  .landing-nav { padding: 18px 20px; }
  .nav-links { display: none; }
  .landing-nav-indicators, .scroll-label { display: none; }
  .family-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .family-avatar { width: 110px; height: 110px; }
  .family-name { font-size: 9px; }
  .family-section { padding: 20px 20px 48px; }
  .landing-rock-left { width: 65%; left: -15%; }
  .landing-rock-right { width: 50%; right: -10%; }
  .hero-title-img { width: clamp(220px, 70vw, 360px); }
}
@media (max-width: 560px) {
  .family-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .family-avatar { width: 130px; height: 130px; }
}

/* ══════════════════════════════════════════════════════════
   ON FIRE — 5-column single row, NEW badge
   ══════════════════════════════════════════════════════════ */

/* Override grid to always be 5 columns, single row */
.family-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
}

/* ON FIRE label */
.family-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.on-fire-icon {
  font-size: 13px;
  animation: fireFlicker 1.4s ease-in-out infinite;
}
@keyframes fireFlicker {
  0%,100% { transform: scale(1) rotate(-3deg); }
  33%     { transform: scale(1.15) rotate(3deg); }
  66%     { transform: scale(0.95) rotate(-1deg); }
}

/* NEW badge — sits on top-right of avatar */
.avatar-new-badge {
  position: absolute;
  top: 8px; right: 4px;
  z-index: 4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px; font-weight: 800;
  letter-spacing: 0.12em;
  color: #000;
  background: #fff;
  border-radius: 999px;
  padding: 3px 7px;
  box-shadow:
    0 0 12px rgba(255,255,255,0.55),
    0 2px 8px rgba(0,0,0,0.6);
  animation: badgePop 0.5s var(--mi, 0.1s) cubic-bezier(0.34,1.56,0.64,1) both;
  pointer-events: none;
}
@keyframes badgePop {
  from { opacity:0; transform: scale(0.4); }
  to   { opacity:1; transform: scale(1); }
}

/* Light mode badge */
.light-mode .avatar-new-badge {
  background: #111;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15);
}

/* Responsive: 5 col always, shrink avatar on small screens */
@media (max-width: 800px) {
  .family-grid { grid-template-columns: repeat(5, 1fr) !important; }
  .family-avatar { width: 115px !important; height: 115px !important; }
  .avatar-new-badge { font-size: 6px; padding: 2px 5px; }
}
@media (max-width: 560px) {
  .family-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .family-avatar { width: 105px !important; height: 105px !important; }
}

/* ══════════════════════════════════════════════════════════
   HOVER MUTE BUTTON
   ══════════════════════════════════════════════════════════ */
.hover-mute-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  position: relative;
}
.hover-mute-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  transform: scale(1.08);
}
/* Muted state — subtle red tint */
.hover-mute-btn.muted {
  color: rgba(255,100,100,0.6);
  border-color: rgba(255,80,80,0.2);
  background: rgba(255,50,50,0.05);
}
.hover-mute-btn.muted:hover {
  color: rgba(255,120,120,0.9);
  border-color: rgba(255,80,80,0.35);
}
/* Tooltip */
.hover-mute-btn::after {
  content: 'HOVER SOUND';
  position: absolute; bottom: -28px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.hover-mute-btn:hover::after { opacity: 1; }

/* Light mode */
.light-mode .hover-mute-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.5);
}
.light-mode .hover-mute-btn:hover {
  background: rgba(0,0,0,0.09);
  color: rgba(0,0,0,0.85);
}
.light-mode .hover-mute-btn.muted {
  color: rgba(200,50,50,0.7);
  border-color: rgba(200,50,50,0.2);
}

/* Avatar sound ripple — visual feedback when sound plays */
.family-member.sound-playing .family-avatar {
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 0 30px rgba(255,255,255,0.12),
    0 10px 50px rgba(0,0,0,0.85),
    inset 0 0 20px rgba(0,0,0,0.3) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

/* ══════════════════════════════════════════════════════════
   WARP TRANSITION — landing → main site
   ══════════════════════════════════════════════════════════ */

/* Landing locked state — after warp fires */
#landing.warp-done {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Warp overlay — the "tunnel" canvas sits here */
#warp-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  opacity: 0;
}

/* Main site slides up from below during warp */
#main-site.warp-enter {
  transform: translateY(60px);
  opacity: 0;
}
#main-site.warp-visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              opacity    0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Landing zoom-in as it flies away */
#landing.warp-fly {
  transition: transform 0.75s cubic-bezier(0.4, 0, 1, 1),
              opacity   0.5s  cubic-bezier(0.4, 0, 1, 1);
  transform: scale(1.18) translateY(-6%);
  opacity: 0;
  pointer-events: none;
}