/* Createful apps hub — a splash, for now: the studio's wordmark and one
   line, on the navy-and-hexagons world of createful.com. The app shelf
   comes back when there's a shelf's worth to show; app folders are
   untouched by anything in this file. */

:root {
  --navy: #1E1C30;
  --line: rgba(255, 255, 255, 0.10);
  --white: #FFFFFF;
  --body: rgba(255, 255, 255, 0.72);
  --raspberry: #E33363;
  --violet: #3D38AC;

  --sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(61, 56, 172, 0.25), transparent 60%),
    var(--navy);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- Drifting hexagons ---- */

.hexfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hex {
  position: absolute;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  opacity: 0.05;
}
.hex-a { width: 340px; top: -80px; right: -60px; stroke: var(--raspberry); opacity: 0.10; }
.hex-b { width: 220px; bottom: 12%; left: -70px; }
.hex-c { width: 140px; top: 38%; right: 12%; opacity: 0.04; }

@media (prefers-reduced-motion: no-preference) {
  .hex { animation: hex-drift 26s ease-in-out infinite alternate; }
  .hex-b { animation-duration: 34s; animation-delay: -12s; }
  .hex-c { animation-duration: 22s; animation-delay: -6s; }
  @keyframes hex-drift {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(26px) rotate(9deg); }
  }
}

/* ---- The splash ---- */

.splash {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  text-align: center;
}

.logo {
  width: min(320px, 70vw);
  height: auto;
  fill: var(--white);
  filter: drop-shadow(0 6px 30px rgba(227, 51, 99, 0.25));
}

.strap {
  margin: 0;
  font-size: clamp(17px, 3.4vw, 21px);
  font-weight: 700;
  color: var(--body);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
  .logo, .strap {
    animation: settle 700ms ease backwards;
  }
  .strap { animation-delay: 160ms; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(10px); }
  }
}