/* --- Base reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:root {
  --bg: #000;
  --fg: #fff;
  --muted: #aaa;
  --ui-font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* --- Layout --- */
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* prevent any accidental scrollbars */
}

.wrap {
  height: 100dvh;                /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

/* --- Hero Logo --- */
.hero {
  margin: 0;
  display: grid;
  place-items: center;
  width: clamp(180px, 60vw, 480px); /* responsive, fits mobile and desktop */
  max-height: 55vh;                 /* ensures room for text */
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.45))
          drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  animation: floatY 6s ease-in-out infinite;
}
.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Tagline --- */
.tagline {
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--muted);
  letter-spacing: 0.03em;
  margin: 0;
  padding: 0 1rem;
  line-height: 1.3;
}

/* --- Responsive line break helper for tagline --- */
.break-mobile::after { content: ""; }
.tagline { white-space: normal; }
@media (max-width: 600px) {
  .break-mobile::after { content: "\A"; white-space: pre; }
}

/* --- Animation --- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --- Mobile & Safe-Area Adjustments --- */
@supports (padding: max(0px)) {
  .wrap {
    padding-bottom: max(6vh, env(safe-area-inset-bottom));
  }
}

/* --- Mobile tuning to avoid overlap --- */
@media (max-width: 600px) {
  .wrap { gap: 0.75rem; }
  .hero { max-height: 50vh; width: clamp(160px, 70vw, 420px); }
  .tagline { font-size: clamp(0.95rem, 3.2vw, 1.2rem); line-height: 1.25; }
}

/* --- Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none !important; }
}