/* ── HOME 3D ─────────────────────────────────────────────────────────────────────────────
   The start screen (empty chat, .main.home-mode) in the mobile app's futuristic HUD look:
   a 3D neon grid floor and drifting particles behind everything, the logo floating over a
   glowing tilted ring, and the starter cards as 3D glowing buttons (gradient rim, icon chip,
   glossy top, mouse tilt, press-to-sink). Built by assets/js/core/home3d.js; only shows while
   .main has .home-mode, so chats look exactly as before. Colours follow the athlete's colour
   theme (--brand / --brand2). */

.h3d-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--brand2) 14%, transparent), transparent 70%);
}
.main.home-mode .h3d-bg { opacity: 1; }

.h3d-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The neon floor: a grid laid flat in perspective, scrolling toward the viewer. */
.h3d-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -2%;
  height: 44%;
  perspective: 420px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.h3d-floor::before {
  content: '';
  position: absolute;
  inset: 0 0 -60% 0;
  transform: rotateX(68deg);
  transform-origin: 50% 0%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--brand) 55%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, color-mix(in srgb, var(--brand2) 50%, transparent) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  animation: h3dFloor 2.4s linear infinite;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 70%, transparent));
}
@keyframes h3dFloor { from { background-position: 0 0; } to { background-position: 0 64px; } }

/* The horizon line where the floor meets the sky. */
.h3d-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand2), var(--brand), var(--brand2), transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--brand) 60%, transparent);
  opacity: 0.55;
}

/* Two soft glowing orbs drifting in the sky. */
.h3d-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: h3dOrb 14s ease-in-out infinite alternate;
}
.h3d-orb.a { width: 340px; height: 340px; left: 8%;  top: 6%;  background: var(--brand); }
.h3d-orb.b { width: 280px; height: 280px; right: 6%; top: 22%; background: var(--brand2); animation-delay: -7s; }
@keyframes h3dOrb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.15); } }

/* Everything on the start screen sits above the background. */
.main.home-mode .chat-area,
.main.home-mode .input-area { position: relative; z-index: 1; }
.main.home-mode .input-area { background: transparent; }

/* ── The logo: floating, tilting in 3D over a glowing ring ── */
.main.home-mode .empty-state { perspective: 1100px; }
.h3d-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
}
.main.home-mode .empty-logo {
  width: 260px;
  height: 260px;
  position: relative;
  transform-style: preserve-3d;
  animation: h3dFloat 6s ease-in-out infinite;
}
.main.home-mode .empty-logo img {
  width: 260px;
  height: 260px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--brand) 55%, transparent))
          drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  transition: transform 0.25s ease-out;
}
@keyframes h3dFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(6deg) rotateY(-6deg); }
  50%      { transform: translate3d(0, -12px, 30px) rotateX(-4deg) rotateY(6deg); }
}
/* The ring under the logo: a spinning conic halo laid flat in 3D. */
.h3d-ring {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  transform: translateY(42%) rotateX(76deg);
  background: conic-gradient(from 0deg, transparent 0deg, var(--brand) 70deg, transparent 140deg, var(--brand2) 220deg, transparent 300deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
          mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
  filter: drop-shadow(0 0 10px var(--brand));
  animation: h3dSpin 7s linear infinite;
  z-index: 1;
}
.h3d-ring.inner {
  width: 220px; height: 220px; margin-left: -110px; bottom: 26px;
  animation-duration: 11s;
  animation-direction: reverse;
  opacity: 0.7;
}
@keyframes h3dSpin { from { transform: translateY(42%) rotateX(76deg) rotateZ(0deg); } to { transform: translateY(42%) rotateX(76deg) rotateZ(360deg); } }

.h3d-sub {
  margin: 18px 0 26px;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.h3d-sub b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.32em;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Starter cards: 3D HUD buttons ── */
.main.home-mode .starter-grid {
  max-width: 640px;
  gap: 14px;
  perspective: 900px;
}
.main.home-mode .starter-card {
  --acc: var(--brand);
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 14px;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 15px;
  border: 1.4px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 18%, transparent)) border-box;
  box-shadow:
    0 6px 0 -1px color-mix(in srgb, var(--acc) 30%, #05070f),
    0 10px 26px -8px color-mix(in srgb, var(--acc) 55%, transparent);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, color 0.15s;
  color: #94a3b8;
}
.main.home-mode .starter-card:nth-child(even) { --acc: var(--brand2); }
.main.home-mode .starter-card:hover {
  color: var(--text);
  box-shadow:
    0 6px 0 -1px color-mix(in srgb, var(--acc) 40%, #05070f),
    0 16px 36px -8px color-mix(in srgb, var(--acc) 75%, transparent);
}
.main.home-mode .starter-card:active {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(4px);
  box-shadow:
    0 2px 0 -1px color-mix(in srgb, var(--acc) 30%, #05070f),
    0 6px 16px -8px color-mix(in srgb, var(--acc) 55%, transparent);
}
/* A light sweep across the card on hover. */
.main.home-mode .starter-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 120% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}
.main.home-mode .starter-card:hover::after { background-position: -20% 0; }

.sc-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 50%, transparent), color-mix(in srgb, var(--acc) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc) 75%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 50%, transparent);
  transform: translateZ(24px);
}
.sc-icon svg { width: 20px; height: 20px; }
.main.home-mode .starter-card strong {
  grid-column: 2;
  margin: 0 0 2px;
  font-size: 14.5px;
  transform: translateZ(16px);
}
.sc-prompt {
  grid-column: 2;
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--acc);
  font-size: 18px;
  font-weight: 800;
  transition: transform 0.18s;
}
.main.home-mode .starter-card:hover .sc-arrow { transform: translateX(3px); }

/* Cards rise in one after another. */
.main.home-mode .starter-card { animation: h3dRise 0.55s cubic-bezier(.2, .9, .3, 1.2) both; }
.main.home-mode .starter-card:nth-child(2) { animation-delay: 0.07s; }
.main.home-mode .starter-card:nth-child(3) { animation-delay: 0.14s; }
.main.home-mode .starter-card:nth-child(4) { animation-delay: 0.21s; }
.main.home-mode .starter-card:nth-child(n+5) { animation-delay: 0.28s; }
/* (The `translate` property, not `transform`: a finished animation's transform would pin the
   card flat and switch off the mouse tilt and the press.) */
@keyframes h3dRise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* The message box glows like a HUD panel on the start screen. */
.main.home-mode .input-wrap {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent),
              0 10px 34px -10px color-mix(in srgb, var(--brand) 60%, transparent);
}

/* ── Light theme: the same shapes, toned down ── */
body.light .h3d-floor::before { filter: none; opacity: 0.45; }
body.light .h3d-orb { opacity: 0.18; }
body.light .main.home-mode .starter-card {
  box-shadow:
    0 5px 0 -1px color-mix(in srgb, var(--acc) 30%, #cbd5e1),
    0 10px 24px -10px color-mix(in srgb, var(--acc) 45%, transparent);
  color: #475569;
}
body.light .main.home-mode .starter-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 18%, transparent)) border-box;
}

/* ── Phones ── */
@media (max-width: 640px) {
  .main.home-mode .empty-logo,
  .main.home-mode .empty-logo img { width: 180px; height: 180px; }
  .h3d-ring { width: 210px; height: 210px; margin-left: -105px; }
  .h3d-ring.inner { width: 150px; height: 150px; margin-left: -75px; bottom: 20px; }
  .h3d-sub { font-size: 13.5px; margin: 12px 0 18px; }
  .h3d-orb.a { width: 220px; height: 220px; }
  .h3d-orb.b { width: 180px; height: 180px; }
  .main.home-mode .starter-grid { gap: 10px; }
  .main.home-mode .starter-card { grid-template-columns: 36px 1fr 12px; padding: 12px 14px; }
  .sc-icon { width: 36px; height: 36px; border-radius: 10px; }
  .sc-prompt { -webkit-line-clamp: 1; }
}

/* ── No motion for people who asked for none ── */
@media (prefers-reduced-motion: reduce) {
  .h3d-floor::before, .h3d-orb, .h3d-ring, .main.home-mode .empty-logo, .main.home-mode .starter-card { animation: none !important; }
  .main.home-mode .starter-card { transform: none !important; }
}