/* ============================================================
   Tanuki site styles
   Sections: variables · base · nav · hero · reveal · showcase
             · feature rows · montage grid · closer · footer · responsive
   ============================================================ */

:root {
  --bg: #0a0a0c;
  --text: #f2f2f5;
  --muted: #8b8b96;
  --line: rgba(255, 255, 255, 0.10);
  --accent: #ff5c8a;
  --maxw: 1280px;
  --display: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* film grain overlay for a richer, artistic feel */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- spotlight grid ----------
   Huly-style cursor reveal (adapted from murplz.com).
   An uneven plaid mesh sits behind the page content (z-index:-1, so it shows
   through the transparent sections). It's invisible at rest; a radial mask
   centered on the cursor (--mx/--my, set by script.js) reveals only the
   patch of grid around the pointer. */
.spotlight-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .5s ease;

  /* two line-grids at different scales + a half-cell offset on the minor one
     give the irregular, woven feel instead of a flat checkerboard */
  background-image:
    linear-gradient(to right,  rgba(255, 92, 138, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 92, 138, 0.07) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255, 92, 138, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 92, 138, 0.03) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px, 29px 29px, 29px 29px;
  background-position: 0 0, 0 0, 15px 8px, 15px 8px;

  --mx: 50%; --my: 50%;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 75%);
          mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 75%);
}
.spotlight-grid.active { opacity: 1; }

/* touch / no-mouse devices — no cursor to follow, so drop it entirely */
@media (hover: none) { .spotlight-grid { display: none; } }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(10, 10, 12, 0.72); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.5px; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 0.92rem; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--display);
  padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  border: 1px solid var(--text); color: var(--bg); background: var(--text);
  cursor: pointer; transition: transform .12s, opacity .2s;
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--line); }
.btn-outline:hover { border-color: var(--text); opacity: 1; }

/* ---------- hero (full-bleed video) ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; display: grid; place-items: center; overflow: hidden; }
.hero video, .hero .video-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero .video-fallback { background: radial-gradient(1000px 600px at 50% 30%, #241830, #0a0a0c 70%); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.45) 0%, rgba(10, 10, 12, 0.15) 35%, rgba(10, 10, 12, 0.55) 75%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 980px; }
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 7rem); line-height: 0.98; letter-spacing: -2px;
}

/* staggered per-letter entrance — script.js wraps each glyph in .char and sets
   its animation-delay, so the title assembles itself letter by letter on load */
.hero h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(12px);
  animation: charIn 0.75s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* the subtitle + buttons fade up just after the headline lands */
.hero .sub, .hero-cta {
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
.hero .sub  { animation-delay: 0.9s; }
.hero-cta   { animation-delay: 1.05s; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* respect users who ask for less motion — show everything, no animation */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .char, .hero .sub, .hero-cta {
    animation: none; opacity: 1; transform: none; filter: none;
  }
}
.hero .sub { color: rgba(242, 242, 245, 0.85); font-size: clamp(1.05rem, 2.2vw, 1.5rem); margin: 26px auto 0; max-width: 600px; }
.hero-cta { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--muted); font-size: 0.8rem; letter-spacing: 2px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---------- scroll-reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- big showcase ---------- */
.showcase { padding: 130px 0; }
.showcase .eyebrow { font-family: var(--display); color: var(--accent); letter-spacing: 3px; font-size: 0.82rem; text-transform: uppercase; }
.showcase h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5.5vw, 4rem); letter-spacing: -1.5px; line-height: 1.02; margin: 18px 0 0; max-width: 16ch; }
.showcase .big-frame { margin-top: 56px; }

/* shared video frame (showcase, feature rows, montage) */
.video-frame {
  position: relative; width: 100%; border-radius: 18px; overflow: hidden;
  background: #111114; border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); aspect-ratio: 16/9;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px; }

/* ---------- alternating feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 90px 0; }
.feature-row:nth-child(even) .copy { order: 2; }
.feature-row .copy h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.6rem); letter-spacing: -0.8px; line-height: 1.05; }
.feature-row .copy .num { font-family: var(--display); color: var(--accent); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 14px; }
.feature-row .copy p { color: var(--muted); font-size: 1.08rem; margin-top: 16px; max-width: 42ch; }

/* ---------- montage grid ---------- */
.montage { padding: 120px 0; }
.montage .section-head { text-align: center; margin-bottom: 60px; }
.montage .section-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing: -1px; }
.montage .section-head p { color: var(--muted); margin-top: 12px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid .video-frame { aspect-ratio: 16/10; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5); }

/* ---------- closing CTA ---------- */
.closer { padding: 160px 0; text-align: center; }
.closer h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 5.5rem); letter-spacing: -2px; line-height: 1; }
.closer p { color: var(--muted); margin: 22px auto 38px; font-size: 1.1rem; }
.closer .dl-meta { margin: 18px auto 0; font-size: 0.85rem; letter-spacing: 0.3px; opacity: 0.7; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted); font-size: 0.88rem; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }
footer .brand { font-size: 1.1rem; }
footer a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .feature-row { grid-template-columns: 1fr; gap: 30px; padding: 60px 0; }
  .feature-row:nth-child(even) .copy { order: 0; }
  .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  html { scroll-behavior: auto; }
}