/* Tiny Tomato Games — motion layer: entrances, reveals, hovers, grain */

/* ---------- film grain (always on, very subtle) ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* ---------- shadows per theme ---------- */
:root { --shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.45); }

/* ---------- nav ---------- */
.nav-inner { transition: padding 0.3s ease; }
.nav.scrolled .nav-inner { padding-top: 11px; padding-bottom: 11px; }
.nav.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-brand img { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-brand:hover img { transform: rotate(-8deg) scale(1.08); }

/* ---------- buttons: sheen sweep + glow ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { box-shadow: 0 10px 30px color-mix(in oklab, var(--accent) 38%, transparent); }
.btn.ghost:hover { box-shadow: none; }
.btn.ghost::after { background: linear-gradient(105deg, transparent, color-mix(in oklab, var(--text) 14%, transparent), transparent); }

/* ---------- game cards ---------- */
.game {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.4s;
}
.game:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-hover);
}
.game-media { position: relative; overflow: hidden; }
.game-media::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, color-mix(in oklab, var(--text) 9%, transparent), transparent);
  transform: skewX(-16deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.game:hover .game-media::after { left: 150%; }
@media (prefers-reduced-motion: no-preference) {
  .game:hover .game-media { animation: ttg-stripes 16s linear infinite; }
  @keyframes ttg-stripes { to { background-position: 56.57px 56.57px; } }
}

/* status pill: live dot */
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--leaf); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .status::before { animation: ttg-pulse 2.2s ease-out infinite; }
  @keyframes ttg-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--leaf) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}

/* tags + pillars */
.tags span { transition: border-color 0.25s, color 0.25s, transform 0.25s; }
.tags span:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); color: var(--text); transform: translateY(-1px); }
.pillar { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.35s; }
.pillar:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-hover);
}
.ctl button:hover { color: var(--text); }

/* hero h1: subtle vertical fade for depth */
.hero h1 {
  background: linear-gradient(180deg, var(--text) 55%, color-mix(in oklab, var(--text) 72%, transparent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- hero entrance + ambient (motion-safe only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero .mark-wrap, html.motion .hero > .mono, html.motion .hero h1, html.motion .hero > p, html.motion .hero .hero-ctas, html.motion .hero .scroll-cue {
    animation: ttg-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.motion .hero .mark-wrap { animation-delay: 0.05s; }
  html.motion .hero > .mono { animation-delay: 0.18s; }
  html.motion .hero h1 { animation-delay: 0.28s; }
  html.motion .hero > p { animation-delay: 0.4s; }
  html.motion .hero .hero-ctas { animation-delay: 0.52s; }
  html.motion .hero .scroll-cue { animation-delay: 0.8s; }
  @keyframes ttg-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero img.mark { animation: ttg-float 7s ease-in-out 1.4s infinite; }
  @keyframes ttg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .hero-glow { animation: ttg-breathe 9s ease-in-out infinite; }
  @keyframes ttg-breathe {
    0%, 100% { opacity: var(--glow); }
    50% { opacity: calc(var(--glow) * 1.45); }
  }

  /* scroll reveals — hidden only when JS confirmed motion (html.motion) */
  html.motion [data-reveal] {
    opacity: 0; transform: translateY(32px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--rd, 0s);
  }
  html.motion [data-reveal].revealed { opacity: 1; transform: translateY(0); }

  /* ---------- text wipe reveal: headings develop bottom-up through a mask ---------- */
  html.motion [data-reveal-text] {
    clip-path: inset(102% -14% -22% -14%);
    opacity: 0.001;
    transition: clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--rd, 0s),
                opacity 0.4s ease var(--rd, 0s);
    will-change: clip-path;
  }
  html.motion [data-reveal-text].revealed {
    clip-path: inset(-22% -14% -22% -14%);
    opacity: 1;
  }
}

/* mark wrapper (parallax target) */
.mark-wrap { display: inline-block; position: relative; will-change: transform; }
.hero img.mark { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); }

/* ---------- hero particles ---------- */
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-fx i {
  position: absolute; bottom: -8px; border-radius: 50%;
  background: var(--accent); opacity: 0;
  box-shadow: 0 0 7px color-mix(in oklab, var(--accent) 65%, transparent);
}
.hero-fx i.soft { filter: blur(1.4px); box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-fx i { animation: ttg-drift linear infinite; animation-duration: var(--dur); animation-delay: var(--del); }
  @keyframes ttg-drift {
    0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
    12% { opacity: var(--op); }
    50% { transform: translate(calc(var(--dx) * 0.5), -280px) scale(1); }
    85% { opacity: var(--op); }
    100% { opacity: 0; transform: translate(var(--dx), -600px) scale(0.85); }
  }
}

/* ---------- scroll cue ---------- */
.scroll-cue {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 64px;
}
.scroll-cue b {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 10px; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--faint);
}
.scroll-cue span { width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; display: block; }
.scroll-cue span::after {
  content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span::after { animation: ttg-cue 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes ttg-cue { to { top: 110%; } }
}

/* ---------- contact card ---------- */
.contact-card { transition: border-color 0.3s; }
.contact-card:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }

/* ---------- cursor spotlight ---------- */
#cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 270px; height: 270px; margin: -135px 0 0 -135px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 85%, #fff 0%) 0%, transparent 55%);
  opacity: 0; mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
body.cursor-on #cursor-glow { opacity: 0.14; }

/* per-card spotlight that tracks the pointer */
.game, .pillar, .contact-card { position: relative; }
.game::before, .pillar::before, .contact-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 65%);
  opacity: 0; transition: opacity 0.4s ease; z-index: 0;
}
.game:hover::before, .pillar:hover::before, .contact-card:hover::before { opacity: 1; }
.game > *, .pillar > *, .contact-card > :not(.hero-glow) { position: relative; z-index: 1; }