/*
 * Home hero: full-screen title stage + the "SUPERSTARS of Love" letter glyphs.
 * Shared resets live in base.css; the star/streak atoms live in background.css.
 */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.canvas {
  width: 100%;
  height: 100%;
  clear: both;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
/* ---- Letter images ------------------------------------------------ */
.cosmic-container img,
.strawberry-container img {
  display: block;
  height: var(--glyph-h);
  width: auto;
  /* neon bloom */
  filter: drop-shadow(0 0 1px rgba(30, 155, 255, 0.9))
          drop-shadow(0 0 1px rgba(30, 155, 255, 0.5));
}
.cosmic-container {
  --glyph-h: clamp(32px, 7.5vw, 112px);
  position: relative;
  width: 100%;
  margin: 75px auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--glyph-h) * 0.1);
}
.cosmic-container > div {
  position: relative;
}
.strawberry-container {
  /* "of" uses --of-size; "Love" overrides --glyph-h to the big size below.
     --straw-gap is derived from --of-size (which "Love" does NOT override), so
     the gap above and below "of" resolve to the same length -- centering "of"
     vertically between SUPERSTARS and LOVE. */
  --of-size: clamp(20px, 4.6vw, 68px);
  --glyph-h: var(--of-size);
  --straw-gap: calc(var(--of-size) * 0.55);
  position: relative;
  display: flex;
  flex-direction: column; /* stack "of" over "Love" */
  align-items: center;
  margin-top: var(--straw-gap); /* gap: SUPERSTARS -> of */
}
/* Each word is its own centered row of letters. */
.strawberry-container .word {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--glyph-h) * 0.1);
}
/* "Love" matches the SUPERSTARS glyph size; drops onto its own line. */
.strawberry-container .word--love {
  --glyph-h: clamp(32px, 7.5vw, 112px);
  margin-top: var(--straw-gap); /* equal gap: of -> LOVE */
}
.strawberry-container .letter {
  position: relative;
}