@layer base, layout, components, animations;

:root {
  /* Colors */
  --color-bg:           #fdf6e3;
  --color-ink:          #1a1a2e;
  --color-accent:       #e63946;
  --color-accent-blue:  #7eb8f7;
  --color-accent-pink:  #ff85a1;
  --color-accent-gold:  #f4c542;
  --color-panel-border: #111;

  /* Typography */
  --font-title: 'Bangers', cursive;
  --font-body:  'Nunito', sans-serif;

  /* Sizing */
  --border-width:   4px;
  --shadow-ink:     5px 5px 0 var(--color-ink);
  --radius-panel:   6px;
  --header-padding: clamp(1rem, 4vw, 2.5rem);
  --girl-max-width: clamp(260px, 50vw, 480px);

  /* Animations */
  --anim-float: float 5s ease-in-out infinite;
  --anim-pulse: ink-pulse 3s ease-in-out infinite;
}

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-ink);
    height: 100dvh;

    /* Halftone dot texture */
    background-image: radial-gradient(
      circle,
      rgba(26, 26, 46, 0.08) 1px,
      transparent 1px
    );
    background-size: 18px 18px;
  }
}

@layer layout {
  body {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1.5vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 1rem) 1rem;
    min-height: 0;
  }
}

@layer components {
  /* ── Header ── */
  .site-header {
    position: relative;
    text-align: center;
    padding: var(--header-padding);
    border: var(--border-width) solid var(--color-panel-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-ink);
    margin: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 4vw, 3rem);
    background-color: var(--color-bg);
    overflow: hidden;
    z-index: 0;
  }

  /* Speed-line pseudo-element */
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(26, 26, 46, 0.04) 1deg,
      transparent 2deg,
      transparent 10deg,
      rgba(26, 26, 46, 0.04) 11deg,
      transparent 12deg,
      transparent 20deg,
      rgba(26, 26, 46, 0.04) 21deg,
      transparent 22deg,
      transparent 30deg,
      rgba(26, 26, 46, 0.04) 31deg,
      transparent 32deg,
      transparent 40deg,
      rgba(26, 26, 46, 0.04) 41deg,
      transparent 42deg,
      transparent 50deg,
      rgba(26, 26, 46, 0.04) 51deg,
      transparent 52deg,
      transparent 60deg,
      rgba(26, 26, 46, 0.04) 61deg,
      transparent 62deg
    );
    z-index: -1;
    pointer-events: none;
  }

  .site-title {
    font-family: var(--font-title);
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--color-accent);
    -webkit-text-stroke: 2px var(--color-ink);
    text-stroke: 2px var(--color-ink);
    letter-spacing: 0.04em;
    line-height: 1;
    animation: var(--anim-pulse);
  }

  .site-tagline {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    opacity: 0.7;
  }

  /* ── Character ── */
  .character-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .manga-girl {
    max-width: var(--girl-max-width);
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(3px 3px 0px var(--color-ink));
    animation: var(--anim-float);
  }

  /* ── Coming Soon ── */
  .coming-soon {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 10vw, 7rem);
    color: var(--color-ink);
    -webkit-text-stroke: 1.5px var(--color-accent);
    text-stroke: 1.5px var(--color-accent);
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1;
  }

  .sparkle {
    color: var(--color-accent-gold);
    -webkit-text-stroke: 0;
    text-stroke: 0;
    display: inline-block;
  }
}

@layer animations {
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-18px); }
  }

  @keyframes ink-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.02); }
  }
}