/* ==========================================================================
   Morph — scroll-scrubbed stage/pin/reveal structures + responsive + a11y
   Layout only here; the 0..1 scrub values are driven by morph.js (GSAP).
   ========================================================================== */

/* ===================== PORTFOLIO: pinned pill -> panel ==================== */
.morph-stage {
  position: relative;
  height: 300vh; /* scroll range to scrub the morph */
}
.morph-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.morph-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: var(--grad);
  overflow: hidden;
  will-change: width, height, border-radius;
  box-shadow: var(--glow-violet);
}
/* surface fill that crossfades in as it grows (JS tweens --fill 0->1) */
.morph-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  opacity: var(--fill, 0);
  z-index: 0;
}
.morph-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: #07070b;
  will-change: opacity;
}
.morph-card__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem;
  opacity: 0; /* JS reveals late */
  will-change: opacity, transform;
}
.morph-card__title { font-size: var(--text-3xl); font-weight: 900; }
.morph-card__lead { color: var(--text-muted); max-width: 44ch; font-size: var(--text-lg); }

/* ================= TESTIMONIALS: pinned horizontal scroll ================ */
.tst-stage { position: relative; height: 320vh; }
.tst-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tst-track {
  display: flex;
  gap: 1.6rem;
  padding-inline: clamp(1.25rem, 6vw, 6rem);
  will-change: transform;
}

/* ==================== CONTACT: grow -> pin -> exit CTA =================== */
.contact { position: relative; }
.cta-stage { position: relative; height: 240vh; }
.cta-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cta-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: var(--grad);
  overflow: hidden;
  will-change: width, height, border-radius, transform;
  box-shadow: var(--glow-cyan);
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  opacity: var(--fill, 0); /* JS tweens --fill 0->1 */
}
.cta-card__inner {
  position: relative;
  z-index: 2;
  opacity: 0; /* JS reveals late */
  will-change: opacity, transform;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 980px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 360px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card--lg { grid-column: span 2; grid-row: span 2; }
  .card--md { grid-column: span 2; }
}

@media (max-width: 720px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0.6rem);
    inset-inline: clamp(1.25rem, 4vw, 3rem);
    padding: 1rem;
    background: rgba(7, 7, 11, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .nav__indicator { display: none; }

  .about__stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .services__grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .card--lg,
  .card--md,
  .card--sm { grid-column: span 1; grid-row: span 1; }
  .form { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; text-align: center; }

  /* Shorten scrub stages on small screens so they don't feel endless */
  .morph-stage { height: 220vh; }
  .tst-stage { height: 300vh; }
  .cta-stage { height: 200vh; }
}

/* ========================= REDUCED MOTION GUARD ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Collapse scrub stages to a single screen; show final resting state */
  .morph-stage,
  .cta-stage { height: auto; }
  .tst-stage { height: auto; }
  .morph-pin,
  .cta-pin { position: static; height: auto; padding-block: var(--space-section); }
  .tst-pin { position: static; height: auto; overflow: visible; padding-block: var(--space-section); }

  .morph-card {
    width: min(100%, 920px);
    height: auto;
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 6vw, 4rem);
    background: var(--surface);
    box-shadow: none;
  }
  .morph-card::before { opacity: 1; }
  .morph-card__label { display: none; }
  .morph-card__content { position: static; opacity: 1; }

  .tst-track { flex-wrap: wrap; justify-content: center; transform: none !important; }

  .cta-card {
    width: min(100%, 760px);
    height: auto;
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: none;
  }
  .cta-card::before { opacity: 1; }
  .cta-card__inner { opacity: 1; }

  .services__rail-fill { transform: scaleX(1) !important; }
  .svc { transform: none !important; }
  .svc.on::before { opacity: 1; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
}