/* ============================================================
   REVAMP LAYER — filmic depth, refined motion, micro-interactions
   Loaded AFTER styles.css. Purely additive; safe to remove.
   ============================================================ */

/* ---- Scroll progress: a gold hairline that fills as you read ---- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 400; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--gold-grad);
  box-shadow: 0 0 12px rgba(200, 161, 90, 0.55);
  will-change: transform; pointer-events: none;
}

/* ---- Film grain: subtle cinematic texture across the whole page ---- */
.fx-grain {
  position: fixed; inset: -60%; z-index: 300; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain 0.55s steps(4) infinite;
}
@keyframes fxGrain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -4%); }
  75%  { transform: translate(-3%, -2%); }
  100% { transform: translate(2%, 3%); }
}
/* Animating a 220%-of-viewport blended layer is a permanent full-screen
   repaint. Phones keep the texture; they don't pay for the flicker. */
@media (pointer: coarse) {
  .fx-grain { animation: none; }
}

/* ---- Nav: retract on scroll-down, glide back on scroll-up ---- */
.nav {
  transition: transform .5s var(--ease), padding .5s var(--ease),
              background .5s var(--ease), border-color .5s var(--ease);
}
.nav--hidden { transform: translateY(-105%); }

/* ---- Section titles draw a gold underline as they reveal in ---- */
.section-head__title { position: relative; }
.section-head__title::after {
  content: ""; position: absolute; left: 0; bottom: -0.7rem;
  height: 2px; width: clamp(48px, 6vw, 96px);
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease) .25s;
}
.section-head__title.in::after { transform: scaleX(1); }

/* ---- Magnetic controls glide smoothly back to rest ---- */
.btn-solid, .btn-outline, .btn-submit {
  transition: transform .35s var(--ease), background .5s var(--ease),
              color .5s var(--ease), box-shadow .4s var(--ease);
}

/* ---- Crisp keyboard focus ring (accessibility) ---- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}

/* ============================================================
   FULL-SCREEN TAKEOVER MENU (all breakpoints)
   Nav becomes: logo + toggle → giant cinematic overlay.
   Reuses the existing toggle JS (adds .open + body.menu-open).
   ============================================================ */
.nav__toggle { display: flex; position: relative; z-index: 110; }
.nav__logo   { position: relative; z-index: 110; }
.nav__toggle.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle.open span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }
/* Page scroll lock. `overflow: hidden` on body does nothing here — html carries
   overflow-x:hidden, so body's overflow stops propagating to the viewport and
   the page scrolls on behind the overlay. Pinning body takes it out of flow;
   script.js parks the scroll offset in `top` and restores it on close. */
body.menu-open {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}

.nav__links {
  position: fixed; inset: 0; z-index: 105;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: clamp(0.2rem, 1.2vh, 0.8rem);
  padding: 6rem var(--gutter) 3rem;
  background: linear-gradient(180deg, rgba(8,7,6,0.98), rgba(8,7,6,0.95));
  backdrop-filter: blur(16px);
  transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .7s var(--ease), opacity .5s var(--ease), visibility .7s var(--ease);
  overflow-y: auto; counter-reset: navi;
}
.nav__links.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }

/* Auto margins centre the stack when there is room and collapse to zero when
   there isn't. `justify-content: center` would push the overflow equally in both
   directions on a short/landscape viewport, putting the first link above the
   scroll origin where it can never be reached. */
.nav__links > :first-child { margin-top: auto; }
.nav__links > :last-child  { margin-bottom: auto; }

.nav__links a {
  font-family: var(--f-serif); font-weight: 300; text-transform: none;
  font-size: clamp(2rem, 6.5vh, 5.4rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); display: flex; align-items: baseline; gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0.06em 0;
  transform: translateY(38px); opacity: 0;
  transition: transform .7s var(--ease), opacity .7s var(--ease), color .3s var(--ease);
}
.nav__links a::before {
  counter-increment: navi;
  content: counter(navi, decimal-leading-zero);
  font-family: var(--f-mono); font-weight: 400; font-size: 0.9rem; letter-spacing: 0;
  color: var(--gold); opacity: 0.85; align-self: center; min-width: 2.4rem;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--gold); }
.nav__links.open a { transform: none; opacity: 1; }
.nav__links.open a:nth-child(1) { transition-delay: .14s; }
.nav__links.open a:nth-child(2) { transition-delay: .20s; }
.nav__links.open a:nth-child(3) { transition-delay: .26s; }
.nav__links.open a:nth-child(4) { transition-delay: .32s; }
.nav__links.open a:nth-child(5) { transition-delay: .38s; }

/* Contact block injected into the takeover menu by script.js.
   Must be styled here so it behaves at ALL breakpoints, not just <=720px
   (otherwise it inherits the giant .nav__links a font and overflows). */
.nav__contact {
  position: static; left: auto; right: auto; bottom: auto;
  display: flex; flex-direction: column; gap: 0.4rem;
  width: 100%; max-width: 100%;
  margin-top: clamp(1.6rem, 4vh, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.nav__contact a {
  display: inline-block; width: auto; max-width: 100%;
  padding: 0; gap: 0;
  font-family: var(--f-mono); font-weight: 400;
  font-size: clamp(0.8rem, 2.6vw, 0.95rem); line-height: 1.4;
  letter-spacing: 0.03em; text-transform: none; color: var(--ink-soft);
  overflow-wrap: anywhere; word-break: break-word;
  transform: none;                    /* skip the giant-link slide-in transform */
}
.nav__contact a::before { content: none; }   /* no counter number */
.nav__contact a:first-child { color: var(--gold-soft); }

/* ---- Contextual cursor: gold "View" pill over project cards ---- */
.fx-cursor-label {
  position: fixed; top: 0; left: 0; z-index: 998; pointer-events: none;
  padding: 0.75rem 1.25rem; border-radius: 100px;
  background: var(--gold-grad); color: #14100a;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap; opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 12px 34px -10px rgba(200, 161, 90, 0.6);
  will-change: transform, opacity;
}
#cursor.fx-dim { opacity: 0; }
@media (hover: none) { .fx-cursor-label { display: none; } }

/* ============================================================
   STICKY WHATSAPP — a standing line to the studio
   Sits under the takeover menu (z 105) and the loader (z 1000).
   ============================================================ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.6vw, 2.2rem);
  bottom: clamp(1rem, 2.6vw, 2.2rem);
  z-index: 90;
  display: flex; align-items: center; gap: 0;
  padding: 0.85rem; border-radius: 100px;
  background: var(--gold-grad); color: #14100a;
  border: 1px solid rgba(232, 210, 154, 0.35);
  box-shadow: 0 16px 38px -14px rgba(0, 0, 0, 0.85),
              0 8px 26px -14px rgba(200, 161, 90, 0.5);
  transition: transform .45s var(--ease), opacity .45s var(--ease),
              gap .5s var(--ease), filter .35s var(--ease),
              box-shadow .45s var(--ease);
}
.wa-float svg { display: block; flex: none; }

.wa-float__label {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .5s var(--ease), opacity .35s var(--ease);
}

@media (hover: hover) {
  .wa-float:hover {
    transform: translateY(-4px); gap: 0.6rem;
    filter: brightness(1.08);
    box-shadow: 0 20px 44px -12px rgba(200, 161, 90, 0.6);
  }
  .wa-float:hover .wa-float__label { max-width: 12rem; opacity: 1; padding-right: 0.4rem; }
}

/* Slow halo — a quiet pulse, not a nightclub. */
@media (prefers-reduced-motion: no-preference) {
  .wa-float::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    border: 1px solid rgba(200, 161, 90, 0.65); pointer-events: none;
    animation: waPulse 2.8s var(--ease) infinite;
  }
  .wa-float:hover::after { animation-play-state: paused; opacity: 0; }
}
@keyframes waPulse {
  0%        { transform: scale(1);    opacity: 0.7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* The takeover menu owns the screen while it's open. */
body.menu-open .wa-float {
  opacity: 0; pointer-events: none; transform: translateY(14px);
}

/* ---- Gentle blur-in on reveal (motion-safe only) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    filter: blur(8px);
    transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1.1s var(--ease);
  }
  .reveal.in { filter: blur(0); }
}