/* =============================================================================
   THEME — "Nordic Aurora / Daylight"
   The aurora experience on a light palette: warm-white paper, pastel aurora
   hero, ink type, charcoal footer. Loads AFTER styles.css.
   To fully restore the original site: remove this stylesheet plus the GSAP /
   Three.js / Lenis CDN tags and assets/motion.js from the HTML pages.
   ========================================================================== */

:root {
  --ink: #1b1d1f;
  --ink-2: #101214;
  --muted: #6f716b;
  --faint: #a1a29b;
  --line: rgba(16, 18, 20, 0.09);
  --line2: rgba(16, 18, 20, 0.18);
  --bg: #f6f5f2;           /* warm daylight paper */
  --bg-soft: #efede9;
  --bg-sec: #e7e5e0;
  --accent: #0f9d77;       /* aurora green, deepened for light bg */
  --accent-dim: rgba(15, 157, 119, 0.12);
  --info-bg: #e2f0ea;
  --info-ink: #14654f;
  --overlay: rgba(10, 12, 13, 0.5);
  --menu-bg: rgba(246, 245, 242, 0.94);
}

::selection { background: var(--accent); color: #f6f5f2; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--accent); }

/* filmic grain — a whisper on light */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 2147483000;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-8%); }
  30% { transform: translate(4%,-4%); } 50% { transform: translate(-6%,6%); }
  70% { transform: translate(6%,3%); } 90% { transform: translate(-3%,8%); }
}

/* ---------- nav ---------- */
.nav {
  background: rgba(246, 245, 242, 0.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: transform .5s cubic-bezier(.22,1,.36,1), background .4s ease;
}
.nav--hidden { transform: translateY(-100%); }
.nav__logo .logo-dark { display: block; }
.nav__logo .logo-light { display: none; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: var(--ink-2); }

/* ---------- overlay menu: paper sheet ---------- */
.overlay {
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.overlay a {
  color: var(--faint);
  font-weight: 600; letter-spacing: -.03em;
  border-bottom: none; position: relative;
  transition: color .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.overlay a:hover { color: var(--accent); border-bottom: none; transform: translateX(-10px); }
/* light menu → keep dark logo and ink toggle */
.nav--menu-open { background: transparent; border-bottom-color: transparent; }
.nav--menu-open .nav__logo .logo-dark { display: block; }
.nav--menu-open .nav__logo .logo-light { display: none; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before, .nav__toggle.is-open span::after { background: var(--ink-2); }

/* ---------- home hero: full-screen aurora stage ---------- */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: 0;
  overflow: clip;
}
.hero .container { position: relative; z-index: 2; }
#aurora {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
}
.hero::after { /* bottom fade into the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 1;
  pointer-events: none;
}
.hero__tagline {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-2);
}
.hero__tagline b { font-weight: 600; }
.hero__tagline span { color: rgba(27, 29, 31, 0.44); font-weight: 400; }
/* char-split wrappers are <span>s — shield them from the base
   `.hero__tagline span` rule so each line keeps its own weight/colour */
.chw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.chc { display: inline-block; will-change: transform; }
.hero__tagline .chw, .hero__tagline .chc {
  font: inherit; color: inherit; letter-spacing: inherit;
}
/* scroll hint */
.hero__hint {
  position: absolute; left: var(--pad); bottom: 2.2rem; z-index: 2;
  display: flex; align-items: center; gap: .7rem;
  color: var(--muted); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.hero__hint::after {
  content: ""; width: 1px; height: 44px; background: var(--line2);
  transform-origin: top; animation: hintLine 2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hintLine { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- project grid: full-bleed, seamless ---------- */
.card { background: var(--bg-sec); }
.card__img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.card:hover .card__img { transform: scale(1.06); }
.card__overlay {
  background: linear-gradient(to top, rgba(10,12,13,.78) 0%, rgba(10,12,13,.16) 55%, transparent 100%);
}
.card__title { transform: translateY(10px); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.card:hover .card__title { transform: translateY(0); }
.card__cat { color: rgba(246,245,242,.6); }
.card__lock { background: rgba(10,12,13,.5); border-color: rgba(255,255,255,.25); }

/* ---------- labels / kickers ---------- */
.col__label, .ch-kicker, .case__meta dt, .ch-meta dt, .info__label,
.case__nav .lbl, .ch-step__num {
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--accent); font-size: .64rem; font-weight: 500;
}

/* ---------- get in touch ---------- */
.touch .container { border-color: var(--line); }
.touch a {
  color: var(--ink-2);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 500; letter-spacing: -.02em; position: relative;
}
.touch a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--accent);
  transition: right .5s cubic-bezier(.22,1,.36,1);
}
.touch a:hover { color: var(--accent); }
.touch a:hover::after { right: 2.4rem; }

/* ---------- footer: charcoal anchor ---------- */
.footer { background: #101214; padding: 3.6rem 0 5.6rem; border-top: none; }
.footer__col a { color: #9a9b94; }
.footer__col a:hover { color: #f6f5f2; }
.footer__copy { color: #71726c; }

/* ---------- case study ---------- */
.ch-section { padding: 4.4rem 0; }
.ch-section--alt { background: #eeece8; }
.ch-hero__fade { background: linear-gradient(to bottom, rgba(10,12,13,.3) 0%, rgba(10,12,13,0) 32%, rgba(10,12,13,.22) 60%, rgba(10,12,13,.85) 100%); }
.ch-lead { letter-spacing: -.015em; }
.ch-sol__item { border-radius: 10px; border-color: var(--line); background: #fdfdfc; }
.ch-sol__item--alt { background: #f1efeb; }
.ch-sol__media { border-radius: 6px; background: var(--bg-sec); }
.ch-sol__dots span { background: var(--line2); }
.ch-step__media { border-radius: 8px; border-color: var(--line2); background: var(--bg-sec); }
.ch-callout { border-radius: 8px; background: var(--info-bg); color: var(--info-ink); }
.ch-detail, .ch-frame { border-radius: 8px; background: var(--bg-sec); border-color: var(--line); }
.ch-quote, .case__quote { border-left-color: var(--accent); }
.ch-list li::before, .case__section ul li::before { background: var(--accent); }
.ch-pin, .ch-legend .n { background: var(--info-bg); color: var(--info-ink); box-shadow: 0 0 0 3px rgba(246,245,242,.9); }

/* password gate */
.gate__icon { border-radius: 8px; color: var(--accent); background: #fdfdfc; border-color: var(--line); }
.gate__input { border-radius: 8px; background: #fdfdfc; border-color: var(--line2); color: var(--ink); }
.gate__input:focus { border-color: var(--accent); }
.gate__btn { border-radius: 8px; background: var(--ink-2); color: var(--bg); }
.gate__btn:hover { opacity: 1; background: var(--accent); color: #fff; }
.gate__error { color: #c0392b; }

/* lightbox */
.lightbox { background: rgba(10, 12, 13, 0.72); }
.lightbox__img { border-radius: 8px; }

/* contact form */
.cform__field label { text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-size: .64rem; }
.cform__field input, .cform__field textarea { background: #fdfdfc; border-color: var(--line2); border-radius: 8px; }
.cform__field input:focus, .cform__field textarea:focus { border-color: var(--accent); }
.cform__btn { border-radius: 8px; background: var(--ink-2); }
.cform__btn:hover { opacity: 1; background: var(--accent); color: #fff; }
.cform__done h2 { letter-spacing: -.02em; }

/* info page */
.info__lead { color: var(--ink-2); letter-spacing: -.02em; }
.info__photo img { border-radius: 10px; }

/* ---------- custom cursor (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
  .cur-dot, .cur-ring {
    position: fixed; top: 0; left: 0; z-index: 2147483200;
    pointer-events: none; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cur-dot { width: 6px; height: 6px; background: var(--accent); }
  .cur-ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(15, 157, 119, 0.45);
    transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1),
                background-color .3s ease, border-color .3s ease;
  }
  .cur-ring.is-active {
    width: 58px; height: 58px;
    background: rgba(15, 157, 119, 0.08);
    border-color: var(--accent);
  }
}

/* ---------- page-transition wipe: ink curtain ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 2147483100;
  background: #101214; pointer-events: none;
  transform: scaleY(0); transform-origin: bottom;
}

/* ---------- media polish ---------- */
.case__cover, .case__cover img { border-radius: 10px; }
.ch-hero__media { will-change: transform; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #cfcdc7; border-radius: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }

/* ---------- reveal scaffolding (motion.js) ---------- */
.has-motion .rv { opacity: 0; }
.has-motion .rv-img { clip-path: inset(14% 8% 14% 8%); }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .hero__hint::after { animation: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .hero { min-height: 78svh; }
  .hero__hint { display: none; }
}