/* ============================================================
   wild.css — enhanced visual layer for 1XN
   Themes / Cursor / GSAP reveals / Hover preview / WebGL
   ============================================================ */

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
* { cursor: none !important; }

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--fg, #191a1c);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, opacity 0.2s ease;
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--fg, #191a1c);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  mix-blend-mode: difference;
}

.cursor-ring.is-hovered {
  width: 72px;
  height: 72px;
}

.cursor-ring.is-hidden,
.cursor-dot.is-hidden {
  opacity: 0;
}


/* ── COLOUR THEMES ─────────────────────────────────────────── */
/* :root = dark (default — no data-theme needed) */
:root {
  --bg:       #0a0a0a;
  --fg:       #e8e8e8;
  --accent:   #e8e8e8;
  --divider:  #2a2a2a;
  --muted:    #666666;
}

[data-theme="dark"] {
  --bg:       #0a0a0a;
  --fg:       #e8e8e8;
  --accent:   #e8e8e8;
  --divider:  #2a2a2a;
  --muted:    #666666;
}

[data-theme="red"] {
  --bg:       #ffffff;
  --fg:       #c0392b;
  --accent:   #c0392b;
  --divider:  #c0392b;
  --muted:    #e07070;
}

[data-theme="dark-red"] {
  --bg:       #080000;
  --fg:       #ff2a2a;
  --accent:   #ff2a2a;
  --divider:  #3a0000;
  --muted:    #883333;
}

[data-theme="blue"] {
  --bg:       #ffffff;
  --fg:       #1a3a8f;
  --accent:   #1a3a8f;
  --divider:  #1a3a8f;
  --muted:    #6680c4;
}

/* Apply variables to the page */
body {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  transition:
    background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

a,
a:visited { color: var(--fg) !important; }
a:hover   { color: var(--muted) !important; }

h1, h2, h3, h4, h5, h6, p, span, li, blockquote {
  color: inherit;
}

.divider {
  background-color: var(--divider) !important;
  transition: background-color 0.7s ease;
}

.text-large.post-info,
.copyright-text { color: var(--muted); }

.footer-link        { color: var(--fg) !important; }
.footer-link:hover  { color: var(--muted) !important; }

.nav-link           { color: var(--fg) !important; }
.nav-link:hover,
.nav-link.w--current { color: var(--muted) !important; }

/* Nav bar + mobile menu dropdown + burger button — all follow theme */
.navbar,
.w-nav {
  background-color: var(--bg) !important;
  transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.w-nav-menu,
.nav-menu {
  background-color: var(--bg) !important;
  transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.w-nav-button,
.menu-button {
  background-color: transparent !important;
}

/* Burger lines always follow theme fg */
.top-line,
.bottom-line {
  background-color: var(--fg) !important;
  transition: background-color 0.7s ease;
}

/* ── FULLSCREEN MOBILE MENU OVERLAY ────────────────────────── */
/* NOTE: NO display override here — Webflow JS controls show/hide.
   display:flex !important would break it by overriding display:none. */
.w-nav-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  background-color: var(--bg) !important;
  transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 8000 !important;
  overflow: hidden !important;
}

/* [data-nav-menu-open] only exists in DOM when menu is open — safe to flex */
[data-nav-menu-open] {
  position: static !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 0 80px !important;
  gap: 8px !important;
  width: 100% !important;
}

[data-nav-menu-open] .nav-link {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  padding: 8px 0 !important;
  color: var(--fg) !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

[data-nav-menu-open] .nav-link:hover {
  color: var(--muted) !important;
  opacity: 0.7;
}

/* Film-grain overlay on dark themes */
[data-theme="dark"] body::before,
[data-theme="dark-red"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 99990;
  opacity: 0.5;
  animation: grain-shift 0.5s steps(1) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 2px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -2px); }
  100% { transform: translate(1px, 1px); }
}


/* ── THEME SWITCHER DOT PANEL ──────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer !important;
  border: 1.5px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.theme-dot:hover { transform: scale(1.5); }

.theme-dot.active {
  box-shadow: 0 0 0 2px var(--fg, #191a1c);
}

.theme-dot[data-theme="dark"] {
  background: #0a0a0a;
  border-color: #666;
}
.theme-dot[data-theme="red"] {
  background: #ffffff;
  border-color: #c0392b;
}
.theme-dot[data-theme="red"]::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #c0392b;
}
.theme-dot[data-theme="dark-red"] {
  background: #080000;
  border-color: #ff2a2a;
}
.theme-dot[data-theme="blue"] {
  background: #ffffff;
  border-color: #1a3a8f;
}
.theme-dot[data-theme="blue"]::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1a3a8f;
}


/* ── WEBGL CANVAS (hero overlay) ───────────────────────────── */
#gl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 400px;
  pointer-events: none;
  opacity: 1;           /* shader controls per-dot alpha — don't dim here */
  z-index: 0;
}

.hero-section {
  position: relative;
  overflow: visible;
  min-height: 400px;
}
.hero-section .container {
  position: relative;
  z-index: 1;
}


/* ── HOVER IMAGE PREVIEW ───────────────────────────────────── */
.hover-img-preview {
  position: fixed;
  width: 340px;
  height: 240px;
  pointer-events: none;
  z-index: 8000;
  overflow: hidden;
  border-radius: 2px;
  transform: translate(-50%, -60%) scale(0.85) rotate(-1deg);
  opacity: 0;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.hover-img-preview.visible {
  opacity: 1;
  transform: translate(-50%, -60%) scale(1) rotate(0deg);
}
.hover-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Suppress default pointer on case wrappers so cursor shows */
.case-wrapper { cursor: none !important; }


/* ── GSAP / ANIMATION HELPERS ──────────────────────────────── */
/* Elements start invisible — GSAP controls reveal */
.gsap-fade-up {
  will-change: opacity, transform;
}

/* Stagger children for w-dyn-item lists */
.w-dyn-items .w-dyn-item {
  will-change: opacity, transform;
}

/* Override existing slide-in classes (GSAP takes over) */
.slide-in-bottom,
.slide-in-bottom-100ms {
  opacity: 1 !important;
  transform: none !important;
}

/* Smooth horizontal marquee for client list */
.client-list-marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── MISC POLISH ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* Improve image rendering across themes */
img { transition: opacity 0.5s ease; }

/* Button underline effect */
.button-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scaleX(0);
}
.button:hover .button-underline { transform: scaleX(1); transform-origin: left; }

/* ── RESPONSIVE ADJUSTMENTS ────────────────────────────────── */
@media (max-width: 767px) {
  .hover-img-preview { display: none; }
  .theme-toggle { bottom: 16px; right: 16px; }
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
}