/* ─── PAGE TRANSITION ─────────────────────────────── */
body { opacity: 1; transition: opacity 0.35s ease; }
body.page-exit { opacity: 0; }

/* ─── SCROLL FADE-UP ──────────────────────────────── */
.anim-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
              transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.anim-ready.anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HERO SLIDE IN ───────────────────────────────── */
.hero-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1),
              transform 0.9s cubic-bezier(0.4,0,0.2,1);
}
.hero-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1) 0.12s,
              transform 0.9s cubic-bezier(0.4,0,0.2,1) 0.12s;
}
.hero-left.anim-in,
.hero-right.anim-in {
  opacity: 1;
  transform: translateX(0);
}

/* ─── MARQUEE SCROLL ──────────────────────────────── */
.marquee-section { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-clone { padding-left: 60px; }
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── NAV LINK UNDERLINE SLIDE ────────────────────── */
.nav-links a:not(.active) {
  position: relative;
}
.nav-links a:not(.active)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--klei);
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:not(.active):hover::after { width: 100%; }

/* ─── FOOTER NAV UNDERLINE ────────────────────────── */
.footer-nav a {
  position: relative;
}
.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--klei);
  transition: width 0.25s ease;
}
.footer-nav a:hover::after { width: 100%; }

/* ─── BUTTON LIFT + RIPPLE ────────────────────────── */
.btn-svc,
.form-submit,
.portfolio-cta-btn,
.t-cta-btn,
.email-form button {
  position: relative;
  overflow: hidden;
  transition: background 0.2s, transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.btn-svc:hover,
.form-submit:hover,
.portfolio-cta-btn:hover,
.t-cta-btn:hover,
.email-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(38,34,32,0.18);
}
.btn-svc:active,
.form-submit:active,
.portfolio-cta-btn:active,
.t-cta-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  pointer-events: none;
  animation: ripple-burst 0.55s linear forwards;
}
@keyframes ripple-burst {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(4); opacity: 0; }
}

/* ─── ACCORDION SPRING ────────────────────────────── */
.acc-item.is-open .acc-plus {
  transform: rotate(45deg) !important;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ─── IMAGE CELL ZOOM ─────────────────────────────── */
.img-row-cell { transition: box-shadow 0.35s ease; }
.img-row-cell:hover { box-shadow: inset 0 0 0 2px var(--ink); }

/* ─── PORTFOLIO ITEM OVERLAY ──────────────────────── */
.portfolio-item { transition: box-shadow 0.35s ease; }
.portfolio-item:hover { box-shadow: 0 8px 32px rgba(38,34,32,0.2); }

/* ─── ACCORDION ITEM FADE ─────────────────────────── */
.acc-list li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.acc-item.is-open .acc-list li { opacity: 1; transform: translateX(0); }
.acc-item.is-open .acc-list li:nth-child(1) { transition-delay: 0.05s; }
.acc-item.is-open .acc-list li:nth-child(2) { transition-delay: 0.10s; }
.acc-item.is-open .acc-list li:nth-child(3) { transition-delay: 0.15s; }
.acc-item.is-open .acc-list li:nth-child(4) { transition-delay: 0.20s; }
.acc-item.is-open .acc-list li:nth-child(5) { transition-delay: 0.25s; }
.acc-item.is-open .acc-list li:nth-child(6) { transition-delay: 0.30s; }
.acc-item.is-open .acc-list li:nth-child(7) { transition-delay: 0.35s; }