/* ─────────────────────────────────────────────────────────────────
   components.css — Preloader · Full-screen Nav · Footer
   Phase 2 global components
   ───────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   PRELOADER
   ═════════════════════════════════════════════════════════════════ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* During load: block scroll, hide overflow */
body.is-loading {
  overflow: hidden;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  direction: ltr;
}

.pl-arch-svg {
  width: clamp(120px, 15vw, 180px);
  color: var(--ink);
  overflow: visible;
}

.pl-arch {
  /* Initial state set by GSAP: strokeDasharray + strokeDashoffset */
  opacity: 0;
}

.pl-wordmark {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
  /* Initial state: opacity:0, translateY:8px — set by GSAP */
  opacity: 0;
  transform: translateY(8px);
}


/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER BUTTON
   ═════════════════════════════════════════════════════════════════ */

.hamburger {
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--ink);
  /* position relative so z-index works above overlay */
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

.ham-bar {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform var(--dur-rev) var(--ease),
    opacity   var(--dur-ui)  var(--ease),
    width     var(--dur-rev) var(--ease);
}

/* When nav is open: morph to × */
.hamburger.is-open .ham-bar--top {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.is-open .ham-bar--mid {
  opacity: 0;
  width: 0;
}
.hamburger.is-open .ham-bar--bot {
  transform: translateY(-6px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .hamburger:hover .ham-bar { background: var(--mocha); }
}

/* While nav is open, hide the header CTA (nav has its own) */
body.nav-open .header-cta { opacity: 0; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════════
   FULL-SCREEN NAV
   ═════════════════════════════════════════════════════════════════ */

.fullnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  /* CSS default hides nav; GSAP also sets this on init for safety */
  clip-path: inset(0 0 100% 0);
  /* Block pointer-events while visually hidden */
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

body.nav-open .fullnav {
  pointer-events: auto;
}

/* Force dark theme tokens inside the nav */
.fullnav[data-theme="dark"] {
  /* tokens are overridden by [data-theme="dark"] selector in tokens.css */
}

.fullnav-inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding-block: 100px var(--s8);
  padding-inline: var(--gutter);
}

/* ── Nav close row ───────────────────────────────────────────────── */
/* (close is done via hamburger in header — nothing needed here) */

/* ── Nav links grid ──────────────────────────────────────────────── */
.fullnav-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s8);
  padding-block: var(--s8) 0;
}

.fullnav-links {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.fn-link {
  font-family: var(--ff-serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  /* GSAP initial state: opacity:0, translateY:30px */
  opacity: 0;
  transform: translateY(30px);
  transition: color var(--dur-ui) var(--ease);
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  .fn-link:hover { color: var(--mocha); }
}

/* ── Image preview panel ─────────────────────────────────────────── */
.fullnav-preview {
  position: relative;
  flex-shrink: 0;
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
  align-self: center;
  pointer-events: none;
  /* Gradient placeholders: switched via data-active */
  background: var(--surface);
}

/* Service-specific gradient placeholders (DESIGN.md §7) */
.fullnav-preview[data-active="microblading"] {
  background: linear-gradient(145deg, #5C3D2E 0%, #C68B7B 100%);
}
.fullnav-preview[data-active="lash-lift"] {
  background: linear-gradient(145deg, #C68B7B 0%, #B9986A 100%);
}
.fullnav-preview[data-active="brow-lift"] {
  background: linear-gradient(145deg, #B9986A 0%, #5C3D2E 100%);
}
.fullnav-preview[data-active="gallery"] {
  background: linear-gradient(145deg, #6B5F54 0%, #C68B7B 55%, #B9986A 100%);
}
.fullnav-preview[data-active="consultation"] {
  background: linear-gradient(145deg, #F5EFE7 0%, #C68B7B 100%);
}

/* Preview overlay grain (DESIGN.md §7 warm grain) */
.fullnav-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── Nav footer strip ────────────────────────────────────────────── */
.fullnav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-block-start: var(--s8);
  border-block-start: 1px solid var(--line);
  opacity: 0;
  /* GSAP reveals this after links */
}

.fullnav-foot .cta-btn {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.fn-foot-links {
  display: flex;
  gap: var(--s5);
}

.fn-foot-link {
  font-family: var(--ff-sans);
  font-size: var(--f-small);
  color: var(--ink-soft);
  transition: color var(--dur-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .fn-foot-link:hover { color: var(--ink); }
}

/* Mobile: stack nav links bigger, hide preview */
@media (max-width: 640px) {
  .fullnav-body {
    flex-direction: column;
    gap: var(--s5);
  }

  .fullnav-preview {
    display: none;
  }

  .fn-link {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER
   ═════════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--s12) var(--s8);
  background: var(--bg);    /* resolves to dark #161210 via data-theme="dark" */
  color: var(--ink);
}

/* Ambient looping gradient — slow drift */
.footer-ambient {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 70% 60% at 25% 55%,
      rgba(201, 155, 130, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 75% 45%,
      rgba(210, 153, 138, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .footer-ambient {
    animation: footer-drift 22s ease-in-out infinite alternate;
  }
}

@keyframes footer-drift {
  from { transform: translate(-4%, -4%) scale(1.0); }
  to   { transform: translate(4%, 4%) scale(1.05); }
}

/* ── Footer top grid ────────────────────────────────────────────── */
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--s8);
  align-items: start;
  padding-block-end: var(--s8);
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-brand { grid-column: 1; }
}

/* Brand column */
.footer-brand .logo {
  margin-block-end: var(--s2);
}

.footer-tagline {
  font-size: var(--f-small);
  color: var(--ink-soft);
  max-width: 28ch;
  line-height: 1.6;
}

/* Nav columns */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.footer-nav-label {
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: var(--s1);
}

.footer-nav a {
  font-size: var(--f-small);
  color: var(--ink-soft);
  transition: color var(--dur-ui) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { color: var(--ink); }
}

/* CTA column */
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  align-self: start;
}

/* ── Footer bottom bar ──────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line);
  font-size: var(--f-label);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.footer-services-strip {
  letter-spacing: 0.08em;
}