/* ═══════════════════════════════════════════════════════
   ANIMATION SYSTEM — nicklemen.com
   ═══════════════════════════════════════════════════════ */

/* ── Max-width + full-bleed backgrounds ─────────────────
   Body text content is constrained to 1400px centered.
   Sections with visible backgrounds break out to the full
   viewport using the negative-margin / padding-compensate
   technique. overflow-x: hidden on html stops any
   horizontal scrollbar from the negative right margins.

   Formula (works at any viewport width):
     margin: calc(-50vw + 50%)  →  shifts element to
       viewport edge (0 when viewport ≤ 1400px)
     padding: calc(50vw - 50% + 4rem)  →  keeps inner
       content at body left edge + original 4rem padding  */

:root {
  --cursor:       url('cursor_normal.svg') 4 2, auto;
  --cursor-hover: url('cursor_hover_click.svg') 9 0, pointer;
}

html {
  background: #F7F5F0;
  overflow-x: hidden;
}

body {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  cursor: var(--cursor);
}

a, button, label, select,
input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"] {
  cursor: var(--cursor-hover);
}

/* Index hero – canvas fills wrapper, content uses .hero */
/* .hero-wrapper breaks out to full viewport width, so its
   child .hero can't use the 50% trick (50% = 50vw there).
   Instead, directly compute the body centering offset:
     max(4rem, (100vw - 1400px) / 2 + 4rem)
   → 4rem at viewports ≤ 1400px; grows wider beyond that. */
.hero-wrapper {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero-wrapper .hero {
  padding-left: max(4rem, calc((100vw - 1400px) / 2 + 4rem));
}

/* Case study / art / applied-ai page heroes */
.page-hero {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left:  calc(50vw - 50% + 4rem);
  padding-right: calc(50vw - 50% + 4rem);
}

/* Sections with distinct background colours */
.pillars-section,
.writing-section,
.about-strip,
.contact-section,
footer {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left:  calc(50vw - 50% + 4rem);
  padding-right: calc(50vw - 50% + 4rem);
}

/* ── Noise / grain texture overlay ──────────────────────
   SVG feTurbulence fractal noise tiled at 300px.
   mix-blend-mode: overlay integrates with both light and
   dark sections without muddying either.                 */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.48;
  mix-blend-mode: overlay;
  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.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ── Keyframe ────────────────────────────────────────── */
@keyframes floatUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Index: hero stagger ─────────────────────────────── */
/* animation-fill-mode: both keeps the element invisible  */
/* during the delay, then holds the end state afterward.  */

.hero-headline {
  animation: floatUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.hero-sub {
  animation: floatUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}

.hero-cta {
  animation: floatUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
}

/* ── Case study pages: hero stagger ─────────────────── */
.hero-label {
  animation: floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.page-hero h1 {
  animation: floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.hero-right > p {
  animation: floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

.btn-external {
  animation: floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}

/* ── Upgraded .fade-up easing ─────────────────────────
   Overrides the tighter per-page inline transition with
   a more natural deceleration curve.                    */
.fade-up {
  transition:
    opacity  0.82s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.82s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── Scroll text-reveal (applied by animate.js) ─────── */
/* Only used on elements outside .fade-up parent blocks. */
.text-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.text-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Nav dropdown separator ─────────────────────────── */
.nav-dropdown-sep {
  display: block;
  height: 1px;
  background: var(--sage, #C8D5C0);
  margin: 0.35rem 0;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — shared across all pages
   ══════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ───────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: relative;
  z-index: 300;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--ink, #1A2218);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile breakpoint ──────────────────────────────── */
@media (max-width: 760px) {

  /* Show hamburger, hide nothing else initially */
  .nav-hamburger { display: flex; }

  /* Nav links become a full-screen overlay */
  .nav-links {
    position: fixed !important;
    inset: 0;
    background: var(--parchment, #F7F5F0);
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    z-index: 599;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 2rem;
  }

  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links > li {
    padding: 0.55rem 0;
    text-align: center;
  }

  .nav-links a {
    font-size: 1.15rem !important;
    color: var(--ink, #1A2218) !important;
  }

  /* Portfolio dropdown: hidden until tapped */
  .nav-dropdown-menu {
    position: static !important;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none !important;
    transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0.25s;
    padding-top: 0;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 300px;
    padding-top: 0.4rem;
  }

  .nav-dropdown-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .nav-dropdown-inner a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    font-size: 0.82rem !important;
    color: var(--ink-muted, #6B7A63) !important;
    padding: 0.15rem 0 !important;
  }

  /* Reduce full-bleed section padding at mobile */
  .page-hero,
  .pillars-section,
  .writing-section,
  .about-strip,
  .contact-section,
  footer {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  /* Hero left-align override */
  .hero-wrapper .hero {
    padding-left: 1.5rem !important;
  }
}