/* ═══════════════════════════════════════════════════════
   STEAMBURGER STUDIOS — style.css  (v2)
   Accent: Blue / Purple (replacing orange)
   Hero: Parallax blurred logo (no grid)
   ═══════════════════════════════════════════════════════ */

/* ─── 1. CUSTOM PROPERTIES ─── */
:root {
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-ui:      'Syne', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --max-width: 1240px;
  --nav-h: 68px;
  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.22s;
}

/* LIGHT */
[data-theme="light"], :root {
  --bg:           #f2f2f5;
  --bg-alt:       #e8e8ef;
  --bg-card:      #ffffff;
  --bg-inset:     #dddde8;
  --surface:      rgba(255,255,255,0.75);

  --text-primary:   #0a0a12;
  --text-secondary: #363645;
  --text-muted:     #6e6e8a;
  --text-faint:     #7e7ea8;

  --border:        rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.20);

  --accent:       #0a0a12;
  --accent-inv:   #f2f2f5;
  --accent-blue:  #3b82f6;
  --accent-purple:#8b5cf6;
  --accent-glow:  rgba(59,130,246,0.25);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow:    0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.14);
  --shadow-blue: 0 4px 24px rgba(59,130,246,0.3);
  --shadow-purple: 0 4px 24px rgba(139,92,246,0.3);
}

/* DARK */
[data-theme="dark"] {
  --bg:           #080810;
  --bg-alt:       #0e0e1a;
  --bg-card:      #121220;
  --bg-inset:     #1a1a2e;
  --surface:      rgba(12,12,24,0.85);

  --text-primary:   #eeeef8;
  --text-secondary: #b8b8d0;
  --text-muted:     #6e6e8a;
  --text-faint:     #b1b1be;

  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.16);

  --accent:       #eeeef8;
  --accent-inv:   #080810;
  --accent-blue:  #60a5fa;
  --accent-purple:#a78bfa;
  --accent-glow:  rgba(96,165,250,0.2);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
  --shadow:    0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.75);
  --shadow-blue: 0 4px 24px rgba(96,165,250,0.25);
  --shadow-purple: 0 4px 24px rgba(167,139,250,0.25);
}

/* AUTO — follow OS */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:#080810;--bg-alt:#0e0e1a;--bg-card:#121220;--bg-inset:#1a1a2e;
    --surface:rgba(12,12,24,0.85);
    --text-primary:#eeeef8;--text-secondary:#b8b8d0;--text-muted:#6e6e8a;--text-faint:#6e6e8a;
    --border:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.16);
    --accent:#eeeef8;--accent-inv:#080810;
    --accent-blue:#60a5fa;--accent-purple:#a78bfa;--accent-glow:rgba(96,165,250,0.2);
    --shadow-sm:0 1px 4px rgba(0,0,0,0.5);--shadow:0 4px 20px rgba(0,0,0,0.6);
    --shadow-lg:0 12px 48px rgba(0,0,0,0.75);
    --shadow-blue:0 4px 24px rgba(96,165,250,0.25);
    --shadow-purple:0 4px 24px rgba(167,139,250,0.25);
  }
}

/* ─── 2. RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  transition:background 0.3s var(--ease),color 0.3s var(--ease);
  overflow-x:hidden;
}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── 3. LAYOUT ─── */
.container{max-width:var(--max-width);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}

/* ─── 4. TYPOGRAPHY ─── */
.section-label{
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem;
}
.section-title{
  font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);
  line-height:0.92;letter-spacing:0.02em;color:var(--text-primary);margin-bottom:2.5rem;
}
.accent-blue{color:var(--accent-blue)!important}
.accent-purple{color:var(--accent-purple)!important}

/* ─── 5. BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.08em;font-weight:500;
  padding:0.75rem 1.5rem;border-radius:var(--radius);
  transition:all var(--dur) var(--ease);white-space:nowrap;text-transform:uppercase;
}
.btn-primary{background:var(--accent-blue);color:#fff;border:2px solid var(--accent-blue)}
.btn-primary:hover{background:var(--accent-purple);border-color:var(--accent-purple);transform:translateY(-2px);box-shadow:var(--shadow-purple)}
.btn-ghost{background:transparent;color:var(--text-primary);border:2px solid var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent-blue);color:var(--accent-blue);transform:translateY(-2px)}
.btn-sm{
  font-size:0.72rem;padding:0.5rem 1rem;
  background:var(--bg-inset);color:var(--text-secondary);border:1px solid var(--border);
}
.btn-sm:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.btn-sm.btn-disabled{opacity:0.4;pointer-events:none}
.btn-steam{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.4rem 0.9rem;border-radius:var(--radius);border:1px solid var(--border-strong);
  color:var(--text-primary);transition:all var(--dur) var(--ease);
}
.btn-steam:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.steam-icon{width:1em;height:1em;fill:currentColor;flex-shrink:0}

/* ─── 6. NAVIGATION ─── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:stretch;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  background:var(--surface);border-bottom:1px solid var(--border);
  transition:background 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow)}
.nav-inner{
  display:flex;align-items:center;gap:1.5rem;width:100%;
  max-width:var(--max-width);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem);
}
.logo{display:flex;align-items:center;gap:0.7rem;text-decoration:none;flex-shrink:0}
.logo-icon{width:36px;height:36px;object-fit:contain}
.logo-text{font-family:var(--font-display);font-size:1.15rem;line-height:1.1;letter-spacing:0.06em;color:var(--text-primary)}
.logo-text em{color:var(--text-muted);font-style:normal;font-size:0.9em}
.nav-links{display:flex;align-items:center;gap:0.25rem;margin-left:auto}
.nav-links a{
  font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);padding:0.4rem 0.75rem;border-radius:var(--radius);
  transition:color var(--dur),background var(--dur);
}
.nav-links a:hover{color:var(--text-primary);background:var(--border)}
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);
  color:var(--text-primary);font-size:1rem;transition:all var(--dur) var(--ease);
  flex-shrink:0;margin-left:0.5rem;
}
.theme-toggle:hover{background:var(--bg-inset)}
.toggle-sun,.toggle-moon{line-height:1}
[data-theme="light"] .toggle-moon,[data-theme="auto"]:not(.is-dark) .toggle-moon{display:none}
[data-theme="dark"] .toggle-sun,[data-theme="auto"].is-dark .toggle-sun{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;margin-left:0.5rem}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all var(--dur) var(--ease)}
.mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:var(--bg-card);border-bottom:1px solid var(--border);padding:1rem 0;z-index:99;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:0.75rem clamp(1.25rem,5vw,3rem);
  font-family:var(--font-mono);font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid var(--border);transition:all var(--dur);
}
.mobile-menu a:hover{color:var(--text-primary);background:var(--bg-inset)}

/* ─── 7. HERO + VIDEO BACKGROUND ─── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;background:var(--bg);padding-top:var(--nav-h);
}

/* ── Video wrap: fills the hero, clips overflow ── */
.hero-video-wrap{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

/* ── The <video> element: cover-fit, parallax driven by JS ── */
.hero-video{
  position:absolute;
  /* Start centered; JS will apply translateY for parallax */
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  /* Cover the container at any aspect ratio */
  min-width:100%;min-height:100%;
  width:auto;height:auto;
  /* Match video-spec: most game trailers are landscape 16:9 */
  object-fit:cover;
  /* Tone down brightness so text stays legible */
  opacity:0.45;
  filter:saturate(0.75) brightness(0.6);
  transition:opacity 0.8s ease;
  will-change:transform;
}
/* Slightly brighter in light mode (more contrast is needed for dark text) */
[data-theme="light"] .hero-video,
[data-theme="auto"]:not(.is-dark) .hero-video{
  opacity:0.25;
  filter:saturate(0.5) brightness(0.7);
}
/* When video hasn't loaded / no sources — hide the element */
.hero-video:not([src]):not(:has(source)){opacity:0}

/* ── Fallback blurred logo (shown when no video sources provided) ── */
.hero-video-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  /* Hidden by default; JS reveals it if video can't play */
  opacity:0;
  transition:opacity 0.5s;
  pointer-events:none;
}
.hero-video-fallback.visible{opacity:1}
.hero-parallax-img{
  width:min(70vw,620px);height:auto;
  opacity:0.18;
  filter:blur(32px) saturate(0);
  user-select:none;-webkit-user-drag:none;
}
[data-theme="dark"] .hero-parallax-img,
[data-theme="auto"].is-dark .hero-parallax-img{opacity:0.10}

/* ── Layered vignette: darkens edges + bottom so text pops ── */
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    /* bottom gradient: strong fade to page bg */
    linear-gradient(to bottom, transparent 50%, var(--bg) 100%),
    /* top gradient: subtle fade for nav legibility */
    linear-gradient(to top, transparent 70%, rgba(0,0,0,0.35) 100%),
    /* radial: dim corners */
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(0,0,0,0.45) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:var(--max-width);margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);padding-block:4rem 6rem;
}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent-blue);margin-bottom:1rem;
  opacity:0;animation:fadeUp 0.6s var(--ease) 0.1s forwards;
}
.hero-title{
  font-family:var(--font-display);font-size:clamp(4.5rem,14vw,11rem);
  line-height:0.88;letter-spacing:-0.01em;margin-bottom:1.5rem;
  opacity:0;animation:fadeUp 0.7s var(--ease) 0.25s forwards;
}
.ht-line1{color:var(--text-primary)}
.ht-line2{color:var(--text-muted)}
.ht-line3{color:var(--text-primary)}
.hero-sub{
  font-size:clamp(1rem,2vw,1.2rem);color:var(--text-secondary);
  max-width:40ch;line-height:1.7;margin-bottom:2.5rem;
  opacity:0;animation:fadeUp 0.7s var(--ease) 0.4s forwards;
}
.hero-cta{
  display:flex;flex-wrap:wrap;gap:1rem;
  opacity:0;animation:fadeUp 0.7s var(--ease) 0.55s forwards;
}
.hero-scroll-hint{
  position:absolute;bottom:2.5rem;left:clamp(1.25rem,5vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  z-index:2;
  opacity:0;animation:fadeUp 0.7s var(--ease) 1s forwards;
}
.scroll-line{
  width:1px;height:48px;
  background:linear-gradient(to bottom,var(--accent-blue),transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
.scroll-label{
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--text-faint);writing-mode:vertical-rl;
}

/* ─── 8. FEATURED SECTIONS ─── */
.featured-section{padding-block:5rem;border-top:1px solid var(--border)}
.featured-primary{background:var(--bg-alt)}
.featured-secondary{background:var(--bg)}

/* Primary layout: logo left, info+widget right */
.featured-hero-layout{
  display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start;
  margin-bottom:3rem;
}
.featured-hero-logo{
  display:flex;align-items:flex-start;justify-content:flex-start;
}
.game-logo-img{
  max-width:100%;height:auto;
  border-radius:var(--radius-lg);
}
.game-logo-img--camping{
  border-radius:var(--radius-lg);
  background:var(--bg-inset);
  padding:0.5rem;
}
.game-genre{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--accent-blue);margin-bottom:1rem;
}
.game-desc{font-size:0.95rem;color:var(--text-secondary);line-height:1.75;margin-bottom:1.25rem}
.game-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem}
.tag{
  font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.3rem 0.7rem;border:1px solid var(--border-strong);border-radius:2px;color:var(--text-muted);
}
.steam-widget-wrap{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-blue);border:1px solid var(--border);
  background:var(--bg-card);margin-bottom:1.5rem;
}
.steam-widget-wrap iframe{width:100%;height:190px;border:none}
.featured-actions{display:flex;flex-wrap:wrap;gap:1rem}

/* Media grid */
.media-row{margin-top:1rem}
.media-row-label{
  font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem;
}
.media-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:1rem;
}
/* Secondary layout: media left, info right */
.featured-split-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;
}
.split-media{display:flex;flex-direction:column;gap:1rem}
.split-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
.split-body{display:flex;flex-direction:column;gap:0.75rem}
.inline-video{border-radius:var(--radius-lg);overflow:hidden;margin:0.5rem 0}

/* ─── 9. VIDEO PLACEHOLDERS ─── */
.video-card{border-radius:var(--radius-lg);overflow:hidden}
.video-placeholder{
  position:relative;background:var(--bg-inset);border:1px solid var(--border);
  border-radius:var(--radius-lg);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.video-placeholder::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-inset) 100%);opacity:0.5;
}
.video-placeholder:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-blue)}
.video-placeholder:hover .play-btn{background:var(--accent-blue);transform:scale(1.1)}
.vp-inner{position:relative;z-index:1;text-align:center;padding:1.5rem}
.play-btn{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--accent-inv);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 0.75rem;transition:all var(--dur) var(--ease-bounce);
}
.play-btn svg{width:22px;height:22px;margin-left:3px}
.play-btn--sm{width:40px;height:40px}
.play-btn--sm svg{width:18px;height:18px}
.featured-video .play-btn{width:64px;height:64px}
.featured-video .play-btn svg{width:28px;height:28px}
.vp-title{font-family:var(--font-display);font-size:1rem;letter-spacing:0.05em;color:var(--text-primary);margin-bottom:0.25rem}
.vp-sub{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}

/* ─── 10. SCREENSHOT PLACEHOLDERS ─── */
.shot-card{border-radius:var(--radius-lg);overflow:hidden}
.shot-placeholder{
  aspect-ratio:16/9;background:var(--bg-inset);border:1px solid var(--border);
  border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur);
}
.shot-placeholder span{font-family:var(--font-mono);font-size:0.6rem;color:var(--text-faint);letter-spacing:0.1em}
.shot-placeholder:hover{border-color:var(--accent-purple)}

/* ─── 11. ALL GAMES ─── */
.games-section{padding-block:5rem;background:var(--bg-alt);border-top:1px solid var(--border)}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.game-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:box-shadow var(--dur),transform var(--dur);
}
.game-card:hover{box-shadow:var(--shadow-blue);transform:translateY(-4px)}
.card-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-inset)}
.card-logo-img{width:100%;height:100%;object-fit:contain}
.screen-placeholder{
  width:100%;height:100%;background:var(--bg-inset);
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  transition:transform 0.4s var(--ease);
}
.game-card:hover .screen-placeholder{transform:scale(1.04)}
.screen-placeholder--tba{
  background:repeating-linear-gradient(45deg,var(--bg-inset),var(--bg-inset) 10px,var(--bg-alt) 10px,var(--bg-alt) 20px);
}
.screen-icon{line-height:1}
.card-badge{
  position:absolute;top:0.75rem;right:0.75rem;
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.25rem 0.6rem;background:var(--accent-blue);color:#fff;border-radius:2px;
}
.card-badge--purple{background:var(--accent-purple)}
.card-badge--alt{background:transparent;border:1px solid var(--border-strong);color:var(--text-muted)}
.card-body{padding:1.25rem;display:flex;flex-direction:column;gap:0.5rem}
.card-title{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.04em;line-height:1}
.card-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.6}
.card-meta{display:flex;justify-content:space-between;align-items:center;padding-top:0.25rem}
.card-platform,.card-year{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint)}
.card-shots{display:flex;gap:0.5rem;margin:0.25rem 0}
.shot-thumb{
  flex:1;aspect-ratio:16/9;background:var(--bg-inset);border:1px solid var(--border);
  border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color var(--dur);
}
.shot-thumb span{font-family:var(--font-mono);font-size:0.55rem;color:var(--text-faint);letter-spacing:0.1em}
.shot-thumb:hover{border-color:var(--accent-purple)}

/* ─── 12. ABOUT ─── */
.about-section{padding-block:5rem;background:var(--bg);border-top:1px solid var(--border)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text p{color:var(--text-secondary);font-size:0.95rem;line-height:1.8;margin-bottom:1rem}
.about-text strong{color:var(--text-primary);font-weight:700}
.about-stats{display:flex;gap:2.5rem;margin:2rem 0;padding:1.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{display:flex;flex-direction:column;gap:0.2rem}
.stat-num{font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--text-primary)}
.stat-label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted)}
.about-socials{display:flex;gap:0.75rem;flex-wrap:wrap}
.social-link{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.45rem 1rem;border:1px solid var(--border-strong);border-radius:var(--radius);
  color:var(--text-muted);transition:all var(--dur);
}
.social-link:hover{color:var(--accent-blue);border-color:var(--accent-blue);background:var(--bg-inset)}

/* About graphic */
.about-graphic{display:flex;align-items:center;justify-content:center}
.ag-rings{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.ag-ring{position:absolute;border-radius:50%;border:1px solid var(--border)}
.ag-ring-1{width:100%;height:100%;animation:ringPulse 4s linear infinite}
.ag-ring-2{width:75%;height:75%;animation:ringPulse 4s linear 1.3s infinite}
.ag-ring-3{width:50%;height:50%;animation:ringPulse 4s linear 2.6s infinite}
.ag-logo-img{
  position:absolute;
  width:140px;height:140px;object-fit:contain;
  filter:drop-shadow(0 0 20px var(--accent-glow));
}

/* Logo graphic */
.lg-logo-img{
  position:relative;
  float: right;
  align-items:right;
  width:240px;height:240px;object-fit:contain;
  filter:drop-shadow(0 0 20px var(--accent-glow));
}

/* ─── 13. CONTACT ─── */
.contact-section{padding-block:5rem;background:var(--bg-alt);border-top:1px solid var(--border)}
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.contact-info p{color:var(--text-secondary);font-size:0.95rem;line-height:1.7;margin-bottom:1rem}
.email-link{font-family:var(--font-mono);font-size:0.85rem;color:var(--accent-blue);transition:color var(--dur)}
.email-link:hover{color:var(--accent-purple)}
.newsletter-form{display:flex;flex-direction:column;gap:0.75rem}
.form-row{display:flex;gap:0.75rem}
.form-row input[type="email"]{
  flex:1;padding:0.75rem 1rem;background:var(--bg-card);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  color:var(--text-primary);font-family:var(--font-mono);font-size:0.82rem;
  outline:none;transition:border-color var(--dur);
}
.form-row input[type="email"]::placeholder{color:var(--text-faint)}
.form-row input[type="email"]:focus{border-color:var(--accent-blue)}
.form-note{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.05em;color:var(--text-muted)}
.form-note a{color:var(--text-muted);text-decoration:underline}


/* Mailchimp submit input styled to match .btn.btn-primary */
.mc-submit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid var(--accent-blue);
  background: var(--accent-blue);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.mc-submit:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: translateY(-2px);
}

/* Mailchimp response messages */
#mce-responses { margin-top: 0.5rem; }
.mc-response {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}
.mc-response--error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.mc-response--success {
  color: var(--accent-blue);
  background: var(--accent-glow);
  border: 1px solid var(--accent-blue);
}


/* ─── 14. FOOTER ─── */
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding-block:2.5rem}
.footer-top{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);
}
.footer-brand{display:flex;align-items:center;gap:0.6rem}
.footer-logo-img{width:28px;height:28px;object-fit:contain}
.footer-brand-name{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.08em}
.footer-nav{display:flex;flex-wrap:wrap;gap:0.25rem}
.footer-nav a{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);padding:0.3rem 0.75rem;border-radius:var(--radius);transition:color var(--dur),background var(--dur);
}
.footer-nav a:hover{color:var(--text-primary);background:var(--bg-inset)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}
.copyright,.footer-credit{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.05em;color:var(--text-muted)}

/* ─── 15. ANIMATIONS ─── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(1);opacity:1}
  50%{transform:scaleY(0.6);opacity:0.4}
}
@keyframes ringPulse{
  0%{opacity:0.12;transform:scale(0.97)}
  50%{opacity:0.45;transform:scale(1.03)}
  100%{opacity:0.12;transform:scale(0.97)}
}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ─── 16. RESPONSIVE ─── */
@media(max-width:1100px){
  .media-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:0.75rem}
  .media-grid .shot-card:last-child{display:none}
}
@media(max-width:900px){
  .featured-hero-layout,.featured-split-layout,.about-layout,.contact-layout{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr 1fr 1fr}
  .featured-video{grid-column:1/-1}
  .about-graphic{display:none}
  .split-shots{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  :root{--nav-h:60px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-title{font-size:clamp(3.8rem,18vw,5.5rem)}
  .media-grid{grid-template-columns:1fr 1fr}
  .media-grid .shot-card{display:none}
  .games-grid{grid-template-columns:1fr}
  .about-stats{gap:1.5rem}
  .form-row{flex-direction:column}
  .form-row .btn{width:100%;justify-content:center}
  .footer-top{flex-direction:column;align-items:flex-start}
}


/* ─── 18. SCROLL BUDDY ─────────────────────────────────────────
   Fixed corner character GIF. position:fixed already follows the
   viewport — no JS scrolling needed on the container itself.
   Bob animation lives on the IMAGE so it doesn't conflict with
   the JS-driven lean transform on the same element.
──────────────────────────────────────────────────────────────── */
.scroll-buddy {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
 
  /* Hidden until JS adds .is-visible */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
 
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
 
.scroll-buddy[data-side="left"] {
  right: auto;
  left: 2rem;
}
 
.scroll-buddy.is-visible {
  opacity: 1;
  pointer-events: auto;
}
 
/* The image: bob loop + smooth snap-back for the lean */
.scroll-buddy__img {
  display: block;
  width: var(--buddy-size, 80px);
  height: auto;
  image-rendering: pixelart;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.40));
  transform-origin: bottom center;
 
  /* Smooth snap-back to upright when scrolling stops */
  transition: transform 0.15s ease-out;
 
  /* Bob loop — runs on the image so lean transform doesn't cancel it */
  animation: buddyBob 2.8s ease-in-out infinite;
}
 
/* Entrance: one-shot squish pop applied via JS to buddyImg */
@keyframes buddyEntrance {
  0%   { transform: scaleY(0.1) scaleX(1.5) rotate(0deg); opacity: 0; }
  55%  { transform: scaleY(1.12) scaleX(0.92) rotate(0deg); opacity: 1; }
  75%  { transform: scaleY(0.96) scaleX(1.03) rotate(0deg); }
  100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
}
 
/* After entrance the JS removes the inline animation and adds this class */
.scroll-buddy__img.entrance-done {
  animation: buddyBob 2.8s ease-in-out infinite;
}
 
/* Bob — translate only, plays nicely alongside the rotate lean */
@keyframes buddyBob {
  0%   { translate: 0 0px;  }
  45%  { translate: 0 -7px; }
  55%  { translate: 0 -7px; }
  100% { translate: 0 0px;  }
}
 
/* Desktop only */
@media (max-width: 1024px) {
  .scroll-buddy { display: none !important; }
}