/* ═══════════════════════════════════════════════════════════════
   FOOTER.CSS — Shared footer styles for all portfolio pages.
   Uses tokens from style.css (--green-*, --cream*, --gold,
   --text-muted, fonts). Link this AFTER style.css on every page.
   ═══════════════════════════════════════════════════════════════ */

/* ── WRAPPER ── */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 6rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(45,158,95,0.10) 0%, transparent 60%),
    radial-gradient(circle 220px at 12% 25%, rgba(62,200,120,0.05) 0%, transparent 70%),
    radial-gradient(circle 260px at 88% 70%, rgba(200,168,75,0.04) 0%, transparent 70%),
    rgba(10,46,26,0.55);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATED BACKDROP — Four faded patterns drift independently
   behind the content: scattered hexagons (echoing the logo),
   code glyphs, a network-node constellation (Net-Centric theme),
   and a fine dot grid. All masked to fade in from the top edge,
   all pure CSS — no DOM nodes added.
   ═══════════════════════════════════════════════════════════ */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Layer 1: scattered hexagon outlines (320px tile) — echoes the brand mark */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' width='320' height='320'%3E%3Cg stroke='%233ec878' stroke-opacity='0.10' stroke-width='1.2' fill='none' stroke-linejoin='round'%3E%3Cpolygon points='50,20 80,37 80,73 50,90 20,73 20,37'/%3E%3Cpolygon points='260,80 285,94 285,124 260,138 235,124 235,94'/%3E%3Cpolygon points='150,160 175,174 175,204 150,218 125,204 125,174'/%3E%3Cpolygon points='40,230 70,247 70,283 40,300 10,283 10,247'/%3E%3Cpolygon points='240,250 268,266 268,298 240,314 212,298 212,266'/%3E%3C/g%3E%3C/svg%3E"),
    /* Layer 2: floating code glyphs (420px tile) — developer texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' width='420' height='420'%3E%3Cg font-family='ui-monospace,SFMono-Regular,Menlo,monospace' fill='%233ec878' fill-opacity='0.10' font-size='13'%3E%3Ctext x='30' y='60'%3E%7B %7D%3C/text%3E%3Ctext x='230' y='100'%3E%5B %5D%3C/text%3E%3Ctext x='340' y='150'%3E%3B%3C/text%3E%3Ctext x='90' y='210'%3Efn%28%29%3C/text%3E%3Ctext x='250' y='250'%3E01%3C/text%3E%3Ctext x='40' y='310'%3Epkt%3C/text%3E%3Ctext x='190' y='350'%3E10%3C/text%3E%3Ctext x='320' y='380'%3E%28 %29%3C/text%3E%3C/g%3E%3C/svg%3E"),
    /* Layer 3: network constellation (360px tile) — nodes connected by faint lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360' width='360' height='360'%3E%3Cg stroke='%233ec878' stroke-opacity='0.08' stroke-width='1' fill='none'%3E%3Cline x1='60' y1='80' x2='180' y2='140'/%3E%3Cline x1='180' y1='140' x2='290' y2='110'/%3E%3Cline x1='180' y1='140' x2='220' y2='260'/%3E%3Cline x1='220' y1='260' x2='100' y2='280'/%3E%3Cline x1='220' y1='260' x2='320' y2='300'/%3E%3C/g%3E%3Cg fill='%233ec878' fill-opacity='0.16'%3E%3Ccircle cx='60' cy='80' r='2.5'/%3E%3Ccircle cx='180' cy='140' r='3.5'/%3E%3Ccircle cx='290' cy='110' r='2.5'/%3E%3Ccircle cx='220' cy='260' r='3'/%3E%3Ccircle cx='100' cy='280' r='2.5'/%3E%3Ccircle cx='320' cy='300' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    /* Layer 4: fine dot grid (static base — keeps things grounded) */
    radial-gradient(circle, rgba(61,200,120,0.07) 1px, transparent 1px);
  background-size:
    320px 320px,
    420px 420px,
    360px 360px,
    30px 30px;
  background-repeat: repeat;
  mask-image: linear-gradient(to bottom, transparent, black 32%, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 32%, black);
  animation: footerDrift 30s linear infinite;
}

/* Each layer drifts a full tile in a unique direction, so the parallax
   keeps rearranging itself and never tiles obviously. Dot grid stays put. */
@keyframes footerDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position:
      -320px -320px,
       420px  420px,
      -360px  360px,
       0      0;
  }
}

/* ═══════════════════════════════════════════════════════════
   TOP EDGE — gradient accent line with a "packet" pip that
   sweeps across, like data traveling along a wire.
   ═══════════════════════════════════════════════════════════ */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background:
    linear-gradient(to right, transparent 0%, rgba(94,222,142,0.95) 50%, transparent 100%) no-repeat,
    linear-gradient(to right, transparent, rgba(61,200,120,0.5), transparent) no-repeat;
  background-size: 140px 100%, 100% 100%;
  background-position: -140px 0, 0 0;
  animation: footerPip 7s linear infinite;
  filter: drop-shadow(0 0 4px rgba(94,222,142,0.7));
}

@keyframes footerPip {
  from { background-position: -140px 0, 0 0; }
  to   { background-position: calc(100% + 140px) 0, 0 0; }
}

/* ── INNER WRAPPER ── */
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem 4rem 0;
}

/* ── TOP GRID: brand block + link columns ── */
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}

/* ── BRAND BLOCK ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 320px;
}

/* logo lockup: animated SVG mark + wordmark */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  width: fit-content;
}

/* backing tile keeps the green mark readable on the dark footer */
.footer-logo-tile {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61,200,120,0.08);
  border: 1px solid rgba(61,200,120,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.4s, background 0.4s;
}
.footer-logo:hover .footer-logo-tile {
  transform: rotate(-6deg) scale(1.06);
  border-color: rgba(61,200,120,0.5);
  background: rgba(61,200,120,0.14);
}

.footer-logo-mark {
  width: 34px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(61,200,120,0.35));
}

/* the inner "spool" of the logo floats gently forever */
.footer-logo-mark .logo-core {
  transform-origin: 50% 50%;
  animation: logoCoreFloat 5s ease-in-out infinite;
}
@keyframes logoCoreFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
/* hexagon ring draws itself once on load, then settles fully visible */
.footer-logo-mark .logo-hex {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: logoHexDraw 1.5s ease forwards 0.3s;
}
@keyframes logoHexDraw {
  to { stroke-dashoffset: 0; }
}

.footer-logo-word {
  font-family: 'DM Mono', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer-logo-word span { color: var(--green-bright); }

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-muted);
}

/* availability chip reused inside footer */
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-bright);
  border: 1px solid rgba(61,200,120,0.25);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  background: rgba(61,200,120,0.05);
  width: fit-content;
}
.footer-status .footer-dot {
  width: 7px; height: 7px;
  background: var(--green-bright);
  border-radius: 50%;
  animation: footerDotPulse 2s ease infinite;
}
@keyframes footerDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ── LINK COLUMNS ── */
/* NOTE: <nav> elements here must override the global `nav {position:fixed}`
   rule from style.css, which would otherwise rip them out of the grid. */
.site-footer nav.footer-col,
.footer-col {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  animation: none;
  inset: auto;
}

.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  position: relative;
  font-size: 0.86rem;
  color: var(--text-muted);
  text-decoration: none;
  width: fit-content;
  transition: color 0.25s, padding-left 0.25s;
}
/* arrow that slides in on hover */
.footer-links a::before {
  content: '→';
  position: absolute;
  left: -1.1rem;
  opacity: 0;
  color: var(--green-bright);
  font-family: 'DM Mono', monospace;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateX(-4px);
}
.footer-links a:hover {
  color: var(--cream);
  padding-left: 0.2rem;
}
.footer-links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* contact column rows with mini icons */
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-contact-row:hover { opacity: 0.7; }
.footer-contact-icon {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-bright);
  flex-shrink: 0;
  transition: border-color 0.25s, background 0.25s;
}
.footer-contact-row:hover .footer-contact-icon {
  border-color: var(--green-accent);
  background: rgba(45,158,95,0.08);
}
.footer-contact-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--cream-dark);
}

/* ── SOCIAL ICON ROW ── */
.footer-socials {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.footer-social {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s, transform 0.25s, background 0.25s;
}
.footer-social:hover {
  color: var(--green-bright);
  border-color: var(--green-accent);
  background: rgba(45,158,95,0.08);
  transform: translateY(-3px);
}

/* ── BACK TO TOP ── */
.footer-totop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.footer-totop:hover {
  color: var(--green-bright);
  border-color: var(--green-accent);
  background: rgba(45,158,95,0.06);
}
.footer-totop svg { transition: transform 0.25s; }
.footer-totop:hover svg { transform: translateY(-3px); }

/* ── BIG WORDMARK STRIP ── */
.footer-wordmark {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 0 0.5rem;
  overflow: hidden;
}
.footer-wordmark-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(61,200,120,0.14);
  text-wrap-style: 2px rgba(61,200,120,0.14);
  user-select: none;
  white-space: nowrap;
}
.footer-wordmark-text span {
  font-style: italic;
  -webkit-text-stroke: 1px rgba(200,168,75,0.18);
}

/* ── BOTTOM BAR ── */
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.8rem 4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1100px;
  margin: 0 auto;
}

/* Terminal-prompt flourish: a soft blinking `>` before the copyright */
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.footer-copy::before {
  content: '> ';
  color: var(--green-bright);
  font-weight: 700;
  animation: terminalBlink 1.6s steps(1) infinite;
}
@keyframes terminalBlink {
  0%, 55%    { opacity: 1; }
  55.01%, 100% { opacity: 0.25; }
}
.footer-copy span { color: var(--green-bright); }

.footer-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.footer-meta a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s;
}
.footer-meta a:hover { color: var(--cream); }
.footer-meta-sep { color: rgba(255,255,255,0.15); }

/* ── REVEAL SUPPORT (works with landing.css observer) ── */
.site-footer .reveal { will-change: opacity, transform; }

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — pause all the drift/sweep/blink animations
   for visitors who've asked the system to ease off.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .site-footer::before,
  .site-footer::after,
  .footer-copy::before,
  .footer-status .footer-dot,
  .footer-logo-mark .logo-core,
  .footer-logo-mark .logo-hex {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px) and Mobile (≤520px).
   Mobile spec: everything left-justified, uniform 2rem rhythm
   between sections, no awkward dead space.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-inner {
    padding: 3rem 1.75rem 0;
  }

  /* Brand block spans full width on top, rest of columns split below */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    align-items: flex-start;
  }

  /* Left-align all column content explicitly (safety against any inherited centering) */
  .footer-col,
  .site-footer nav.footer-col {
    align-items: flex-start;
    text-align: left;
  }

  /* Big watermark goes left, smaller, with rhythm-matching padding */
  .footer-wordmark {
    text-align: left;
    padding: 2rem 0;
  }
  .footer-wordmark-text {
    font-size: clamp(2.6rem, 18vw, 6rem);
    letter-spacing: 0;
  }

  /* Bottom bar stacks left-aligned with uniform internal spacing */
  .footer-bottom {
    padding: 1.5rem 1.75rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
  }
  .footer-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.8rem 1.2rem;
  }
  .footer-totop { align-self: flex-start; }

  /* On mobile the backdrop pattern feels heavy at full opacity — lighten it
     so foreground text stays legible against the smaller surface area. */
  .site-footer::before {
    background-size:
      240px 240px,
      320px 320px,
      260px 260px,
      28px 28px;
    opacity: 0.85;
  }
}

@media (max-width: 520px) {
  /* Single-column stack — same uniform 1.75rem rhythm between everything */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-inner { padding: 2.5rem 1.5rem 0; }
  .footer-bottom { padding: 1.5rem 1.5rem; }
  .footer-wordmark { padding: 1.75rem 0; }
}