/* =========================================================
   Lil Fox Labs — stylesheet
   ========================================================= */

:root{
  --void: #120E1F;
  --void-soft: #191330;
  --card: rgba(245, 241, 255, 0.06);
  --card-border: rgba(245, 241, 255, 0.1);
  --ink: #F5F1FF;
  --ink-dim: #B3A9D6;
  --ink-faint: #8378A6;

  --orange: #FF6B35;
  --red: #FF3D57;
  --blue: #3D5AFE;
  --gold: #FFC145;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1180px;
  --radius-lg: 28px;
  --radius-md: 18px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3{
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

p{ margin: 0; }

a{
  color: inherit;
  text-decoration: none;
}

img{ max-width: 100%; display: block; }

::selection{
  background: var(--orange);
  color: var(--void);
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: inline-block;
}

.loading-note{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  grid-column: 1 / -1;
}

/* =========================================================
   FLUID BLOB BACKGROUND — the signature element
   ========================================================= */

.blob-field{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.blob{
  position: absolute;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
  animation: morph 16s ease-in-out infinite;
}

.blob-orange{ background: var(--orange); }
.blob-red{ background: var(--red); }
.blob-blue{ background: var(--blue); }
.blob-gold{ background: var(--gold); }

.b1{ width: 46vw; height: 46vw; top: -14vw; left: -12vw; animation-delay: 0s; }
.b2{ width: 38vw; height: 38vw; top: 6vw; right: -14vw; animation-delay: -3s; opacity: 0.45; }
.b3{ width: 42vw; height: 42vw; bottom: -16vw; left: 8vw; animation-delay: -7s; opacity: 0.4; }
.b4{ width: 26vw; height: 26vw; top: 40vh; right: 12vw; animation-delay: -10s; opacity: 0.35; }
.b5{ width: 30vw; height: 30vw; bottom: 20vh; right: -8vw; animation-delay: -5s; opacity: 0.35; }
.b6{ width: 34vw; height: 34vw; top: 65vh; left: -10vw; animation-delay: -12s; opacity: 0.3; }

@keyframes morph{
  0%   { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  25%  { border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%; }
  50%  { border-radius: 65% 35% 45% 55% / 40% 55% 45% 60%; }
  75%  { border-radius: 35% 65% 55% 45% / 60% 45% 55% 40%; }
  100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
}

.grain{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation: none !important; transform: none !important; }
}

/* =========================================================
   LAYOUT SHELL
   ========================================================= */

main, header, footer{
  position: relative;
  z-index: 2;
}

section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 32px;
}

.section-head{
  max-width: 640px;
  margin-bottom: 64px;
}

.section-head h2{
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 18px;
}

.section-sub{
  color: var(--ink-dim);
  font-size: 1.05rem;
  max-width: 52ch;
}

/* =========================================================
   NAV
   ========================================================= */

.nav{
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px;
  max-width: var(--container);
  margin: 0 auto;
  z-index: 50;
  background: rgba(245, 241, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(18, 14, 31, 0.18);
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark{
  height: 58px;
  width: auto;
  display: block;
}

.nav-links{
  display: flex;
  gap: 34px;
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-links a{
  position: relative;
  color: var(--void);
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.nav-links a:hover{ opacity: 1; }
.nav-links a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.25s ease;
}
.nav-links a:hover::after{ width: 100%; }

.nav-toggle span{
  width: 22px; height: 2px;
  background: var(--void);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: var(--font-body);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary{
  background: var(--gold);
  color: var(--void);
  box-shadow: 0 0 0 rgba(255,193,69,0);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,193,69,0.28);
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--card-border);
}
.btn-ghost:hover{
  background: var(--card);
  transform: translateY(-2px);
}

.btn-nav{
  padding: 10px 22px;
  font-size: 0.88rem;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.hero-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-inner{ max-width: 640px; flex: 1 1 auto; }

.hero-visual{
  flex: 0 0 auto;
  width: min(38vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-character-img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(18, 14, 31, 0.55));
  animation: float-character 5s ease-in-out infinite;
}

@keyframes float-character{
  0%, 100%{ transform: translateY(0) rotate(-1.5deg); }
  50%{ transform: translateY(-16px) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero-character-img{ animation: none; }
}

.hero-title{
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 700;
  margin-bottom: 28px;
}

.hero-title .bite{
  color: var(--orange);
  font-style: normal;
  position: relative;
}

.hero-sub{
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 56ch;
  margin-bottom: 42px;
}

.hero-cta{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.hero-stats{
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.stat{ display: flex; flex-direction: column; gap: 4px; }
.stat-num{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}
.stat-label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scroll-cue{
  position: absolute;
  bottom: 40px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-line{
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--ink-faint), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after{
  content:"";
  position: absolute;
  top:0; left:-40px;
  width: 40px; height: 100%;
  background: var(--gold);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%{ left: -40px; }
  50%{ left: 40px; }
  100%{ left: -40px; }
}

/* =========================================================
   GAMES
   ========================================================= */

.game-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.game-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}
.game-card:hover{
  transform: translateY(-6px);
  border-color: var(--card-accent);
}

.game-card-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.game-genre{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.game-status{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-live{ background: rgba(255,193,69,0.16); color: var(--gold); }
.status-dev{ background: rgba(61,90,254,0.18); color: #8ea1ff; }
.status-proto{ background: rgba(255,61,87,0.16); color: #ff8a97; }

.game-art{
  height: 140px;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.game-art-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.art-shape{
  position: absolute;
  border-radius: 40%;
  filter: blur(2px);
}
.game-art-1 .shape-a{ width:100px; height:100px; background:var(--orange); top:-20px; left:20px; opacity:0.9;}
.game-art-1 .shape-b{ width:70px; height:70px; background:var(--gold); bottom:-10px; right:30px; opacity:0.85;}
.game-art-2 .shape-a{ width:110px; height:70px; background:var(--blue); top:20px; left:-10px; border-radius:50%; opacity:0.9;}
.game-art-2 .shape-b{ width:60px; height:60px; background:var(--ink); bottom:10px; right:40px; border-radius:50%; opacity:0.5;}
.game-art-3 .shape-a{ width:90px; height:130px; background:var(--red); top:-20px; right:20px; border-radius:50% 50% 30% 70%; opacity:0.85;}
.game-art-3 .shape-b{ width:50px; height:50px; background:var(--void); bottom:10px; left:30px; border-radius:50%; box-shadow: 0 0 0 3px rgba(255,61,87,0.4); }
.game-art-4 .shape-a{ width:130px; height:60px; background:var(--gold); top:30px; left:10px; border-radius:50px; opacity:0.9;}
.game-art-4 .shape-b{ width:60px; height:60px; background:var(--orange); bottom:-15px; right:20px; border-radius:50%; opacity:0.8;}

.game-card h3{
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.game-card p{
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.game-link{
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--card-accent);
}

/* =========================================================
   TIMELINE
   ========================================================= */

.timeline-track{
  position: relative;
  padding-left: 40px;
  border-left: 1px solid var(--card-border);
}

.timeline-item{
  position: relative;
  padding-bottom: 56px;
  padding-left: 40px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
}
.timeline-item:last-child{ padding-bottom: 0; }

.timeline-date{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold);
  font-size: 1rem;
  padding-top: 2px;
}

.timeline-dot{
  position: absolute;
  left: -46px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--void);
  border: 2px solid var(--gold);
}

.timeline-item-current .timeline-dot{
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(255,193,69,0.18);
}

.timeline-content h3{
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.timeline-content p{
  color: var(--ink-dim);
  max-width: 56ch;
  font-size: 0.96rem;
}

/* =========================================================
   TEAM
   ========================================================= */

.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.team-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.team-card:hover{
  transform: translateY(-5px);
  border-color: var(--avatar-color);
}

.team-photo-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--avatar-color);
  overflow: hidden;
}

.team-photo-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2rem;
  color: rgba(18, 14, 31, 0.85);
  background: var(--avatar-color);
}

.team-photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-info{
  padding: 22px 24px 26px;
}

.team-card h3{ font-size: 1.15rem; margin-bottom: 4px; }
.team-role{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-copy h2{
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 18px;
}

.contact-form{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.form-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-row label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-row input, .form-row textarea{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-row input::placeholder, .form-row textarea::placeholder{
  color: var(--ink-faint);
}
.form-row input:focus, .form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.06);
}

.btn-submit{
  width: 100%;
  margin-top: 6px;
}

.form-note{
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--gold);
  min-height: 1.2em;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 32px 40px;
  border-top: 1px solid var(--card-border);
}

.footer-top{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 56px;
}
.footer-logo-mark{
  height: 50px;
  width: auto;
}
.footer-tag{
  color: var(--ink-faint);
  font-size: 0.92rem;
  max-width: 40ch;
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}

.footer-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col h4{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.footer-col a{
  color: var(--ink-dim);
  font-size: 0.94rem;
  transition: color 0.2s ease;
}
.footer-col a:hover{ color: var(--gold); }

.social-icons{
  display: flex;
  gap: 14px;
}
.social-icons a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.social-icons a:hover{
  color: var(--void);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--card-border);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px){
  .hero-flex{
    flex-direction: column-reverse;
    text-align: left;
    gap: 20px;
  }
  .hero-visual{
    width: min(70vw, 340px);
    margin: 0 auto 12px;
  }
  .logo-mark{ height: 46px; }

  .nav-links{
    display: none;
    position: absolute;
    top: 68px;
    left: 24px;
    right: 24px;
    background: rgba(245, 241, 255, 0.97);
    border: 1px solid rgba(18,14,31,0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(18, 14, 31, 0.18);
    flex-direction: column;
    gap: 4px;
    padding: 18px;
  }
  .nav-links a{ padding: 10px 6px; color: var(--void); opacity: 0.8; }
  .nav-links.nav-links-open{ display: flex; }
  .btn-nav{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-toggle-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle-open span:nth-child(2){ opacity: 0; }
  .nav-toggle-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  section{ padding: 100px 24px; }

  .game-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-inner{ grid-template-columns: 1fr; gap: 40px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .logo-mark{ height: 40px; }
  .team-grid{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 32px; }
  .timeline-item{ grid-template-columns: 1fr; gap: 8px; padding-left: 4px; }
  .timeline-date{ font-size: 0.9rem; }
  .timeline-track{ padding-left: 24px; }
  .timeline-dot{ left: -30px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; }
}