/* ============================================================
   COMPONENTS
   Nav, hero/parallax, cards, buttons, tags, footer.
   ============================================================ */

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 1.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--ease-default), box-shadow var(--ease-default);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--white);
  transition: color var(--ease-default);
}
.nav.scrolled .nav-logo { color: var(--ink); }
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.nav.scrolled .nav-links a { color: var(--warm-gray); }
.nav-links a:hover { color: var(--teal); }
/* ── MOBILE MENU TOGGLE ──────────────────────────────────────
   Hidden on desktop; visible on mobile (see responsive block).
   Three bars of varying widths — feels editorial / not generic.
   Morphs to an X when the menu is open.
*/
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--white);
  cursor: pointer;
  position: relative;
  transition: color var(--ease-default);
}
.nav.scrolled .nav-toggle { color: var(--ink); }

.nav-toggle-bar {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  margin-left: auto;
  margin-right: 2px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.6,-.28,.735,.045),
              width 0.25s var(--ease-default),
              opacity 0.2s var(--ease-default),
              margin 0.25s var(--ease-default);
}
.nav-toggle-bar:nth-child(1) { width: 22px; margin-top: 12px; margin-bottom: 5px; }
.nav-toggle-bar:nth-child(2) { width: 28px; margin-bottom: 5px; }
.nav-toggle-bar:nth-child(3) { width: 16px; }

/* Open state: bars converge into an X (center-aligned) */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar {
  margin-left: auto;
  margin-right: auto;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  width: 26px;
  transform: translateY(7px) rotate(-45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  width: 26px;
  transform: translateY(-7px) rotate(45deg);
}

/* ── MOBILE MENU PANEL ───────────────────────────────────────
   Slides in from the right. Backdrop blurs the content behind.
   Controlled via .is-open class on body + menu.
*/
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  padding: 5.5rem 2rem 2rem;
  background: var(--cream);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
  z-index: 95;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu::before {
  /* Teal accent bar along the left edge */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(var(--teal), var(--teal-deep));
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
}
.mobile-menu-list li { border-bottom: 1px solid var(--light-gray); }
.mobile-menu-list li:last-child { border-bottom: none; }
.mobile-menu-list a {
  display: block;
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  transition: color var(--ease-default), padding-left var(--ease-default);
}
.mobile-menu-list a:hover,
.mobile-menu-list a:focus-visible {
  color: var(--teal);
  padding-left: 0.5rem;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-default),
              visibility 0s linear 0.3s;
  z-index: 90;
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Body scroll lock while menu open */
body.menu-open { overflow: hidden; }

/* When menu is open, force the nav into a light scheme so the
   toggle/logo remain visible against the cream menu panel. */
body.menu-open .nav {
  background: rgba(250, 249, 247, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.menu-open .nav-logo,
body.menu-open .nav-toggle { color: var(--ink); }

/* ── HERO + PARALLAX ─────────────────────────────────────────
   Images currently reference V1 folder (one level up).
   When you migrate images into Version 2/images/hero/,
   change `../../images/` → `../images/hero/` across this block.
*/
.hero {
  position: relative;
  min-height: 100vh;         /* fallback */
  min-height: 100dvh;        /* dynamic viewport — no mobile URL-bar jump */
  overflow: hidden;
  background: linear-gradient(165deg,
    #064a43 0%,
    #0d7a6e 25%,
    #1a9e8f 50%,
    #3cc4b1 78%,
    #7be0c8 100%);
}

/* Subtle radial vignette behind hero text so tagline contrast
   stays above 4.5:1 regardless of the parallax layer beneath. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.05) 45%,
    transparent 75%
  );
  z-index: 6;
  pointer-events: none;
}

/* Soft fade into the cream section below */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(transparent, var(--cream));
  pointer-events: none;
  z-index: 8;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  will-change: transform;
  pointer-events: none;
}

.parallax-layer--sun {
  background-image: url('../images/hero/layerSun.svg');
  background-size: contain;
  background-position: 70% 18%;
  z-index: 1;
}
.parallax-layer--l1 { background-image: url('../images/hero/layer1.svg'); z-index: 2; }
.parallax-layer--l2 { background-image: url('../images/hero/layer2.svg'); z-index: 3; }
.parallax-layer--l3 { background-image: url('../images/hero/layer3.svg'); z-index: 4; background-position: center bottom 40px; }
.parallax-layer--l4 { background-image: url('../images/hero/layer4.svg'); z-index: 5; background-position: center bottom 40px; }
.parallax-layer--l5 { background-image: url('../images/hero/layer5.svg'); z-index: 6; background-position: center bottom 40px; }

/* ── PELICANS ────────────────────────────────────────────────
   Low-poly silhouettes gliding across the hero above the far
   skyline. Each instance has its own speed, altitude, size, and
   start delay so they never sync up. Disabled under reduced-motion. */
.pelican-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pelicans {
  position: absolute;
  inset: 0;
  z-index: 3;   /* same stacking level as layer2 but drawn after it */
  pointer-events: none;
}
.pelican {
  position: absolute;
  left: 0;
  color: #053b35;         /* dark teal silhouette */
  fill: currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation: pelican-fly linear infinite;
}
/* Wing flap — each wing polygon pivots at its base (fill-box bottom).
   Per-pelican flap rate set via --flap custom property so the flock
   doesn't beat in lockstep. */
.pelican-wing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pelican-flap var(--flap, 0.7s) ease-in-out infinite;
}
/* Six instances: varied altitude, size, flight speed, flap rate, and
   start delay so the flock feels natural. One appears every 2–3s. */
.pelican--1 { top: 14%; width: 110px; animation-duration: 22s; animation-delay:  0s;   --flap: 0.70s; }
.pelican--2 { top: 22%; width:  83px; animation-duration: 28s; animation-delay:  3s;   --flap: 0.85s; }
.pelican--3 { top:  9%; width: 122px; animation-duration: 20s; animation-delay:  6s;   --flap: 0.60s; }
.pelican--4 { top: 19%; width:  74px; animation-duration: 26s; animation-delay:  9.5s; --flap: 0.90s; }
.pelican--5 { top: 26%; width:  98px; animation-duration: 24s; animation-delay: 13s;   --flap: 0.75s; }
.pelican--6 { top:  6%; width:  90px; animation-duration: 30s; animation-delay: 16.5s; --flap: 1.00s; }

@keyframes pelican-fly {
  0%   { transform: translate(-120px, 0);              opacity: 0;    }
  8%   { opacity: 0.5; }
  25%  { transform: translate(25vw, -10px);            opacity: 0.55; }
  50%  { transform: translate(50vw, 3px);              opacity: 0.55; }
  75%  { transform: translate(75vw, -8px);             opacity: 0.55; }
  92%  { opacity: 0.5; }
  100% { transform: translate(calc(100vw + 120px), 0); opacity: 0;    }
}

/* Wings pivot at their base (set via transform-origin on .pelican-wing).
   scaleY flips the triangle below the pivot on the downstroke, giving a
   gentle flap without needing separate up/down shapes. */
@keyframes pelican-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(-0.55); }
}

/* Honor user's motion preference */
@media (prefers-reduced-motion: reduce) {
  .pelicans { display: none; }
}

/* Atmospheric-haze pane. Sits at z-index 3 but AFTER pelicans in DOM order,
   so backdrop-filter captures everything painted before it (sun, mountains,
   distant buildings, pelicans) while layer3+ at z-index 4+ render crisp on top. */
.parallax-blur {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-content {
  position: relative;
  z-index: 7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}
/* Hero text cluster — no scrim. Pulled upward so it reads clearly above
   the skyline/sun rather than sitting dead-center over the brightest zone. */
.hero-plate {
  max-width: min(90%, 760px);
  margin-top: -350px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}
.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero-accent {
  font-weight: 600;
  color: #fff;
}
.hero-note {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Fade-up intro animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-plate > * { animation: fadeUp 0.8s ease-out both; }
.hero-plate > *:nth-child(2) { animation-delay: 0.15s; }
.hero-plate > *:nth-child(3) { animation-delay: 0.3s; }

/* ── CARD (base) ─────────────────────────────────────────── */
.card {
  padding: 2.5rem 2rem;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}
.card--hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* ── TAG / PILL ──────────────────────────────────────────── */
/* Muted neutral pill — used for project highlights/metrics. Kept color-
   neutral on purpose so it doesn't compete with the project CTA button
   for attention. */
.tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--light-gray);
  color: var(--warm-gray);
}

/* ── BUTTON / LINK-ARROW ─────────────────────────────────── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal);
  transition: gap var(--ease-default);
}
.link-arrow:hover { gap: 0.7rem; }

.btn-outline {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(26, 158, 143, 0.3);
  border-radius: var(--radius-pill);
  color: var(--teal);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background var(--ease-default), color var(--ease-default);
}
.btn-outline:hover {
  background: var(--teal);
  color: var(--white);
}

/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 2rem 3rem;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .footer { padding: 1.5rem; }
}

/* Hide mobile menu completely on larger screens (accessibility:
   keeps it out of the tab order + screen-reader flow on desktop). */
@media (min-width: 769px) {
  .mobile-menu,
  .mobile-menu-backdrop { display: none; }
}