/* ═══════════════════════════════════════════════════
   Studio Lyko — main.css
   Shared styles across all pages
   ═══════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg-stone:    #191714;
  --bg-deep:     #111009;
  --off-white:   #f0ece6;
  --cream:       #ddd5c4;
  --stone-light: #8a837a;
  --dim:         rgba(240,236,230,0.07);
  --dim-mid:     rgba(240,236,230,0.12);
  --btn-border:  rgba(240,236,230,0.25);
  --sv:          rgba(100,80,200,0.28);
  --sa:          rgba(200,140,55,0.24);
  --t-hover:     350ms ease;
  --amber-violet: linear-gradient(135deg, rgba(200,140,55,0.22) 0%, rgba(100,80,200,0.22) 100%);
}
[data-theme="light"] {
  --bg-stone:    #f5f2ed;
  --bg-deep:     #ede8e0;
  --off-white:   #191714;
  --cream:       #4a4540;
  --stone-light: #8a837a;
  --dim:         rgba(25,23,20,0.08);
  --dim-mid:     rgba(25,23,20,0.15);
  --btn-border:  rgba(25,23,20,0.3);
  --sv:          rgba(100,80,200,0.35);
  --sa:          rgba(200,140,55,0.30);
  --amber-violet: linear-gradient(135deg, rgba(200,140,55,0.18) 0%, rgba(100,80,200,0.18) 100%);
}

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-stone);
  color:var(--off-white);
  -webkit-font-smoothing:antialiased;
  font-family:'DM Sans',sans-serif;
  transition:background 400ms ease, color 400ms ease;
  overflow-x:hidden;
}
a { text-decoration:none; }

/* ── Prism canvas ────────────────────────────────── */
#prism-canvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ── Nav ─────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px,4vw,60px);
  background:rgba(25,23,20,0.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dim);
  transition:background 400ms ease;
}
[data-theme="light"] nav { background:rgba(245,242,237,0.88); }

.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo img { height:24px; width:auto; }
[data-theme="light"] .nav-logo img { filter:invert(1); }

.nav-links {
  display:flex; gap:clamp(20px,3vw,40px); list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a {
  font-weight:400; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--stone-light);
  transition:color var(--t-hover);
}
.nav-links a:hover, .nav-links a.active { color:var(--off-white); }

.nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }

/* Theme toggle */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:none; border:1px solid var(--dim-mid);
  cursor:pointer; color:var(--stone-light); position:relative;
  transition:border-color var(--t-hover), color var(--t-hover);
}
.theme-toggle:hover { border-color:rgba(240,236,230,0.45); color:var(--off-white); }
.icon-dark, .icon-light { position:absolute; transition:opacity 300ms, transform 300ms; }
:root .icon-dark,           [data-theme="dark"] .icon-dark  { opacity:1; transform:scale(1); }
:root .icon-light,          [data-theme="dark"] .icon-light { opacity:0; transform:scale(0.7); }
[data-theme="light"] .icon-dark  { opacity:0; transform:scale(0.7); }
[data-theme="light"] .icon-light { opacity:1; transform:scale(1); }

/* Nav CTA */
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--off-white);
  padding:10px 20px;
  border:1px solid var(--btn-border);
  position:relative; overflow:hidden;
  transition:border-color var(--t-hover);
  white-space:nowrap;
}
[data-theme="light"] .nav-cta { border-color:rgba(25,23,20,0.3); }
.nav-cta::before {
  content:''; position:absolute; inset:-100%;
  background:radial-gradient(circle at 15% 50%, var(--sv) 0%, transparent 55%),
             radial-gradient(circle at 85% 50%, var(--sa) 0%, transparent 55%);
  opacity:0; transition:opacity var(--t-hover); pointer-events:none;
}
.nav-cta::after {
  content:''; position:absolute;
  top:-20%; left:-80%; width:50%; height:140%;
  background:linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.06) 60%, transparent 75%);
  transform:skewX(-15deg); transition:left 650ms ease; pointer-events:none;
}
.nav-cta span { position:relative; z-index:1; }
.nav-cta:hover { border-color:rgba(240,236,230,0.55); }
.nav-cta:hover::before { opacity:1; }
.nav-cta:hover::after  { left:130%; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:36px; height:36px;
  background:none; border:1px solid var(--dim-mid);
  cursor:pointer; padding:0 9px;
}
.hamburger span {
  display:block; height:1px; background:var(--off-white);
  transition:transform 400ms ease, opacity 300ms ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position:fixed; inset:0; z-index:90;
  background:var(--bg-deep);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:40px;
  opacity:0; pointer-events:none;
  transition:opacity 400ms ease;
}
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a {
  font-family:'Fraunces',serif; font-weight:300; font-style:italic;
  font-size:clamp(36px,8vw,56px); line-height:1;
  letter-spacing:-0.02em; color:var(--off-white);
  font-variation-settings:'opsz' 72,'WONK' 1;
  transition:opacity 300ms;
}
.mobile-menu a:hover { opacity:0.6; }
.mobile-menu-cta {
  font-family:'DM Sans',sans-serif !important;
  font-style:normal !important; font-size:12px !important;
  letter-spacing:0.18em !important; text-transform:uppercase;
  padding:14px 32px; border:1px solid var(--btn-border); margin-top:16px;
}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--off-white);
  padding:16px 28px;
  border:1px solid var(--btn-border);
  background:transparent;
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color var(--t-hover), color var(--t-hover);
  white-space:nowrap;
}
.btn-primary::before {
  content:''; position:absolute; inset:-100%;
  background:radial-gradient(circle at 15% 50%, var(--sv) 0%, transparent 55%),
             radial-gradient(circle at 85% 50%, var(--sa) 0%, transparent 55%);
  opacity:0; transition:opacity var(--t-hover); pointer-events:none; z-index:0;
}
.btn-primary::after {
  content:''; position:absolute;
  top:-20%; left:-80%; width:50%; height:140%;
  background:linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.06) 60%, transparent 75%);
  transform:skewX(-15deg); transition:left 650ms ease; pointer-events:none; z-index:1;
}
.btn-primary span   { position:relative; z-index:2; }
.btn-primary .arr   { display:inline-block; transition:transform var(--t-hover); }
.btn-primary:hover  { border-color:rgba(240,236,230,0.55); }
[data-theme="light"] .btn-primary:hover { border-color:rgba(25,23,20,0.55); }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover::after  { left:130%; }
.btn-primary:hover .arr    { transform:translateX(4px); }
.btn-primary:active { opacity:0.75; transition:opacity 100ms ease; }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:400; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--stone-light);
  background:transparent; border:none; cursor:pointer; padding:0;
  position:relative; transition:color var(--t-hover);
  white-space:nowrap;
}
.btn-secondary::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--off-white);
  transition:width var(--t-hover);
}
.btn-secondary .arr { display:inline-block; transition:transform var(--t-hover); }
.btn-secondary:hover { color:var(--off-white); }
.btn-secondary:hover::after { width:calc(100% - 24px); }
.btn-secondary:hover .arr { transform:translateX(5px); }
.btn-secondary:active { opacity:0.65; transition:opacity 100ms ease; }

/* ── Gradients ───────────────────────────────────── */
.grad-warm {
  background:linear-gradient(90deg, rgb(255,255,255) 0%, rgb(255,240,180) 18%, rgb(255,210,100) 36%, rgb(255,155,90) 56%, rgb(230,80,90) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="light"] .grad-warm {
  background:linear-gradient(90deg, rgb(210,160,50) 0%, rgb(200,90,65) 50%, rgb(155,35,60) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.grad-cool {
  background:linear-gradient(90deg, rgb(140,155,255) 0%, rgb(185,215,255) 28%, rgb(185,215,255) 44%, rgb(255,225,144) 62%, rgb(255,255,255) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-theme="light"] .grad-cool {
  background:linear-gradient(90deg, rgb(70,60,185) 0%, rgb(100,155,210) 46%, rgb(210,160,50) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Footer ─────────────────────────────────────── */
footer {
  position:relative; z-index:1;
  background:var(--bg-deep);
  border-top:1px solid var(--dim);
  padding:clamp(40px,5vw,56px) clamp(24px,4vw,60px);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:24px;
  transition:background 400ms ease;
}
[data-theme="light"] footer { background:var(--bg-deep); }
.footer-logo img { height:20px; width:auto; opacity:0.35; }
[data-theme="light"] .footer-logo img { filter:invert(1); }
.footer-nav { display:flex; gap:clamp(16px,3vw,32px); list-style:none; flex-wrap:wrap; }
.footer-nav a {
  font-weight:300; font-size:12px; letter-spacing:0.1em;
  color:var(--stone-light); transition:color var(--t-hover);
}
.footer-nav a:hover { color:var(--off-white); }
.footer-copy {
  font-weight:300; font-size:11px; letter-spacing:0.08em;
  color:var(--stone-light); opacity:0.4; line-height:1.7;
}

/* ── Case Studies ────────────────────────────────── */
.cs-hero {
  padding:clamp(100px,12vw,160px) clamp(24px,8vw,160px) clamp(60px,8vw,100px);
  border-bottom:1px solid var(--dim);
  position:relative; z-index:1;
}
.cs-eyebrow {
  font-weight:300; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--stone-light); margin-bottom:clamp(20px,3vw,32px);
}
.cs-client {
  font-weight:300; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--stone-light); opacity:0.6; margin-bottom:12px;
}
.cs-title {
  font-family:'Fraunces',serif; font-weight:300; font-style:italic;
  font-size:clamp(32px,5vw,64px); line-height:1.1;
  letter-spacing:-0.02em; color:var(--off-white);
  font-variation-settings:'opsz' 72,'WONK' 1;
  margin-bottom:clamp(16px,2vw,28px); max-width:800px;
}
.cs-subtitle {
  font-family:'Cormorant',serif; font-style:italic; font-weight:400;
  font-size:clamp(18px,2vw,24px); line-height:1.45;
  color:var(--cream); max-width:680px;
}

.cs-body {
  position:relative; z-index:1;
  background:var(--bg-deep);
  transition:background 400ms ease;
  padding:clamp(60px,8vw,100px) clamp(24px,8vw,160px);
}
.cs-body::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(135deg, rgba(200,140,55,0.14) 0%, rgba(100,80,200,0.14) 100%);
}
.cs-body > * { position:relative; z-index:1; }
.cs-body h2 {
  font-family:'Cormorant',serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,2.5vw,30px); line-height:1.2;
  color:var(--off-white);
  margin:clamp(40px,5vw,64px) 0 clamp(14px,2vw,20px);
}
.cs-body h2:first-child { margin-top:0; }
.cs-body p {
  font-weight:300; font-size:clamp(15px,1.1vw,17px); line-height:1.9;
  color:var(--cream); margin-bottom:clamp(16px,2vw,22px);
  max-width:720px;
}

.cs-pillars {
  font-weight:300; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--stone-light);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--dim);
  margin-top:clamp(40px,6vw,64px);
}

.cs-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(32px,4vw,48px) clamp(24px,8vw,160px);
  border-top:1px solid var(--dim);
  background:var(--bg-deep);
  flex-wrap:wrap; gap:16px;
  position:relative; z-index:1;
  transition:background 400ms ease;
}
.cs-nav-link {
  font-weight:300; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--stone-light); transition:color 300ms;
  display:flex; align-items:center; gap:8px;
}
.cs-nav-link:hover { color:var(--off-white); }
.cs-nav-back {
  font-weight:300; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--stone-light); transition:color 300ms;
}
.cs-nav-back:hover { color:var(--off-white); }

@media (max-width:640px) {
  .cs-body p { font-size:18px; line-height:1.85; }
  .cs-body h2 { font-size:clamp(24px,6vw,32px); }
  .cs-eyebrow, .cs-client { font-size:13px; }
  .cs-subtitle { font-size:clamp(20px,5vw,26px); }
  .cs-pillars { font-size:13px; }
}
@media (max-width:680px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-cta   { display:none; }
}

/* ── Mobile line breaks ─────────────────────────── */
.mobile-br { display:none; }
@media (max-width:640px) {
  .mobile-br { display:block; }
}