/**
 * km-page-animations.css  —  Per-section scroll animations for inner pages
 * Each section gets its own distinct entrance. Triggered by .is-visible added
 * by motion.js IntersectionObserver (same engine as homepage).
 *
 * Animation catalogue used per page:
 *   About    — split slide (left/right), stagger-up pillars, fade-scale CTA
 *   Service  — fade-up with clip mask, counter ghost watermark, card pop
 *   Contact  — slide-up panel, spring bounce form card, accordion fade
 *   Gallery  — zoom-blur cells, filter chip fade, CTA reveal
 *   Materials— slide-in carousel text, tile stagger, tail section rise
 *
 * All transitions are gated behind html.km-motion-on so they are inert
 * for bots, screenshots, and prefers-reduced-motion users.
 */

/* ── Easing tokens ───────────────────────────────────────── */
:root {
  --pa-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --pa-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --pa-dur-fast:    0.55s;
  --pa-dur-base:    0.75s;
  --pa-dur-slow:    1.0s;
}

/* ══════════════════════════════════════════════════════════
   HERO — subpage  (clip-path curtain wipe from left)
══════════════════════════════════════════════════════════ */
.km-subpage-hero .container,
.km-page-hero .container {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}

html.km-motion-on .km-subpage-hero .container:not(.is-visible),
html.km-motion-on .km-page-hero .container:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}

.km-subpage-hero .container.is-visible,
.km-page-hero .container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════ */

/* ── About intro: image slides from left, copy from right ── */
.km-about-left {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease),
    transform var(--pa-dur-slow) var(--pa-ease);
}
.km-about-right {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease),
    transform var(--pa-dur-slow) var(--pa-ease) 0.15s;
}

html.km-motion-on .km-about-left:not(.is-visible) {
  opacity: 0;
  transform: translateX(-56px);
}
html.km-motion-on .km-about-right:not(.is-visible) {
  opacity: 0;
  transform: translateX(56px);
}

.km-about-left.is-visible,
.km-about-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Pull-quote fade-up ───────────────────────────────────── */
.km-about-intro__pull {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease) 0.3s,
    transform var(--pa-dur-base) var(--pa-ease) 0.3s;
}
html.km-motion-on .km-about-intro__pull:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}
.km-about-intro__pull.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Pillars: stagger-up with numbered watermark ─────────── */
.km-about-pillar {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-about-pillar:not(.is-visible) {
  opacity: 0;
  transform: translateY(36px);
}
.km-about-pillar.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delays for each pillar */
.km-about-pillars__grid .km-about-pillar:nth-child(1) { transition-delay: 0.00s; }
.km-about-pillars__grid .km-about-pillar:nth-child(2) { transition-delay: 0.10s; }
.km-about-pillars__grid .km-about-pillar:nth-child(3) { transition-delay: 0.20s; }
.km-about-pillars__grid .km-about-pillar:nth-child(4) { transition-delay: 0.30s; }

/* ── CEO card: fade-up + slight perspective tilt ─────────── */
.km-ceo-reveal--intro {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease),
    transform var(--pa-dur-slow) var(--pa-ease);
}
html.km-motion-on .km-ceo-reveal--intro:not(.is-inview):not(.is-visible) {
  opacity: 0;
  transform: perspective(900px) translate3d(-24px, 40px, 0) rotateY(4deg);
}
.km-ceo-reveal--intro.is-inview,
.km-ceo-reveal--intro.is-visible {
  opacity: 1;
  transform: perspective(900px) translate3d(0, 0, 0) rotateY(0);
}

/* Portrait slides from right */
.km-ceo-reveal--portrait {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease) 0.1s,
    transform var(--pa-dur-slow) var(--pa-ease) 0.1s;
}
html.km-motion-on .km-ceo-reveal--portrait:not(.is-inview):not(.is-visible) {
  opacity: 0;
  transform: translate3d(40px, 24px, 0);
}
.km-ceo-reveal--portrait.is-inview,
.km-ceo-reveal--portrait.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Pillars pop up with spring */
.km-ceo-reveal--pillars {
  transition:
    opacity var(--pa-dur-base) var(--pa-spring) 0.25s,
    transform var(--pa-dur-base) var(--pa-spring) 0.25s;
}
html.km-motion-on .km-ceo-reveal--pillars:not(.is-inview):not(.is-visible) {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
}
.km-ceo-reveal--pillars.is-inview,
.km-ceo-reveal--pillars.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── About CTA band: scale-in ────────────────────────────── */
.km-about-cta-band .reveal {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-spring);
}
html.km-motion-on .km-about-cta-band .reveal:not(.is-visible) {
  opacity: 0;
  transform: scale(0.95) translateY(16px);
}
.km-about-cta-band .reveal.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.km-about-cta-band .reveal:nth-child(2) { transition-delay: 0.1s; }
.km-about-cta-band .reveal:nth-child(3) { transition-delay: 0.2s; }

/* ══════════════════════════════════════════════════════════
   SERVICE PAGE
══════════════════════════════════════════════════════════ */

/* ── Intro band: slide up ────────────────────────────────── */
.km-service-intro-band .row {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-service-intro-band .row:not(.is-visible) {
  opacity: 0;
  transform: translateY(32px);
}
.km-service-intro-band .row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Showcase head: clip-path curtain ────────────────────── */
.km-service-showcase__head {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    clip-path var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-service-showcase__head:not(.is-visible) {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
.km-service-showcase__head.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* ── Service cards: flip-up with perspective ─────────────── */
.km-service-card {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-service-card:not(.is-visible) {
  opacity: 0;
  transform: perspective(800px) rotateX(-12deg) translateY(30px);
  transform-origin: top center;
}
.km-service-card.is-visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translateY(0);
}
.km-service-showcase__grid .km-service-card:nth-child(1) { transition-delay: 0.00s; }
.km-service-showcase__grid .km-service-card:nth-child(2) { transition-delay: 0.10s; }
.km-service-showcase__grid .km-service-card:nth-child(3) { transition-delay: 0.20s; }
.km-service-showcase__grid .km-service-card:nth-child(4) { transition-delay: 0.30s; }

/* ── Service CTA band ────────────────────────────────────── */
.km-service-cta-band .reveal {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-service-cta-band .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}
.km-service-cta-band .reveal.is-visible { opacity: 1; transform: translateY(0); }
.km-service-cta-band .reveal:nth-child(2) { transition-delay: 0.1s; }
.km-service-cta-band .reveal:nth-child(3) { transition-delay: 0.2s; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════ */

/* ── Contact panel: slide from left ─────────────────────── */
.km-contact-panel {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease),
    transform var(--pa-dur-slow) var(--pa-ease);
}
html.km-motion-on .km-contact-panel:not(.is-visible) {
  opacity: 0;
  transform: translateX(-40px);
}
.km-contact-panel.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Form card: spring bounce ────────────────────────────── */
.km-contact-form-card {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease) 0.15s,
    transform var(--pa-dur-slow) var(--pa-spring) 0.15s;
}
html.km-motion-on .km-contact-form-card:not(.is-visible) {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
}
.km-contact-form-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── FAQ items: stagger fade-up ──────────────────────────── */
.km-contact-faq details {
  transition:
    opacity var(--pa-dur-fast) var(--pa-ease),
    transform var(--pa-dur-fast) var(--pa-ease);
}
html.km-motion-on .km-contact-faq details:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}
.km-contact-faq details.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.km-contact-faq details:nth-child(1) { transition-delay: 0.00s; }
.km-contact-faq details:nth-child(2) { transition-delay: 0.08s; }
.km-contact-faq details:nth-child(3) { transition-delay: 0.16s; }
.km-contact-faq details:nth-child(4) { transition-delay: 0.24s; }
.km-contact-faq details:nth-child(5) { transition-delay: 0.32s; }

/* ══════════════════════════════════════════════════════════
   ARCHITECTURE / GALLERY PAGE
══════════════════════════════════════════════════════════ */

/* ── Gallery heading: text wipe ─────────────────────────── */
.km-arch-gallery-section .heading_container {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-arch-gallery-section .heading_container:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}
.km-arch-gallery-section .heading_container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Filter chips: fade stagger ──────────────────────────── */
.km-arch-filters__btn {
  transition:
    opacity var(--pa-dur-fast) var(--pa-ease),
    transform var(--pa-dur-fast) var(--pa-ease),
    background-color 0.25s ease,
    border-color 0.25s ease;
}
html.km-motion-on .km-arch-filters__btn:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}
.km-arch-filters__btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Gallery cards: zoom-blur stagger ───────────────────── */
.km-gallery-grid-cell {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease),
    filter var(--pa-dur-base) var(--pa-ease);
  transition-delay: calc(var(--km-gallery-i, 0) * 0.06s);
}
html.km-motion-on .km-gallery-grid-cell:not(.is-visible) {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px);
}
.km-gallery-grid-cell.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* ══════════════════════════════════════════════════════════
   MATERIALS PAGE
══════════════════════════════════════════════════════════ */

/* ── Carousel text: slide from left ─────────────────────── */
.km-materials-carousel__stack {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-materials-carousel__stack:not(.is-visible) {
  opacity: 0;
  transform: translateX(-40px);
}
.km-materials-carousel__stack.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Material tiles: stagger pop ────────────────────────── */
.km-material-tile {
  transition:
    opacity var(--pa-dur-fast) var(--pa-ease),
    transform var(--pa-dur-fast) var(--pa-spring);
}
html.km-motion-on .km-material-tile:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px) scale(0.92);
}
.km-material-tile.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.km-materials-grid .km-material-tile:nth-child(1) { transition-delay: 0.00s; }
.km-materials-grid .km-material-tile:nth-child(2) { transition-delay: 0.07s; }
.km-materials-grid .km-material-tile:nth-child(3) { transition-delay: 0.14s; }
.km-materials-grid .km-material-tile:nth-child(4) { transition-delay: 0.21s; }
.km-materials-grid .km-material-tile:nth-child(5) { transition-delay: 0.28s; }

/* ── Summary tail section: rise ─────────────────────────── */
.km-subpage-hero--tail .container {
  transition:
    opacity var(--pa-dur-slow) var(--pa-ease),
    transform var(--pa-dur-slow) var(--pa-ease);
}
html.km-motion-on .km-subpage-hero--tail .container:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px);
}
.km-subpage-hero--tail .container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   FOOTER (all pages)
══════════════════════════════════════════════════════════ */
.km-site-footer__cta,
.km-site-footer__main,
.km-site-footer__bar {
  transition:
    opacity var(--pa-dur-base) var(--pa-ease),
    transform var(--pa-dur-base) var(--pa-ease);
}
html.km-motion-on .km-site-footer.km-footer-reveal:not(.is-inview) .km-site-footer__cta {
  opacity: 0;
  transform: translateY(28px);
  transition-delay: 0.08s;
}
html.km-motion-on .km-site-footer.km-footer-reveal:not(.is-inview) .km-site-footer__main {
  opacity: 0;
  transform: translateY(28px);
  transition-delay: 0.18s;
}
html.km-motion-on .km-site-footer.km-footer-reveal:not(.is-inview) .km-site-footer__bar {
  opacity: 0;
  transform: translateY(28px);
  transition-delay: 0.28s;
}
.km-site-footer.km-footer-reveal.is-inview .km-site-footer__cta,
.km-site-footer.km-footer-reveal.is-inview .km-site-footer__main,
.km-site-footer.km-footer-reveal.is-inview .km-site-footer__bar {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   LAZY LOADING  — skeleton placeholder heights
   Prevents layout shift while images load
══════════════════════════════════════════════════════════ */

/* About intro image */
.km-about-intro__figure {
  min-height: clamp(320px, 50vw, 520px);
  background: var(--r-sand, #e8dcc8);
}
.km-about-intro__figure img {
  display: block;
  min-height: clamp(320px, 50vw, 520px);
  background: var(--r-sand, #e8dcc8);
}

/* CEO portrait */
.km-ceo-portrait-card {
  min-height: clamp(260px, 40vw, 440px);
  background: rgba(255,255,255,0.04);
}

/* Architecture gallery cells */
.km-gallery-card__viewport {
  min-height: clamp(200px, 28vw, 280px);
  background: var(--r-charcoal, #1c1c1e);
}

/* Materials carousel */
.km-materials-carousel-section .carousel-img {
  min-height: clamp(360px, 55vh, 640px);
  background: var(--r-charcoal, #1c1c1e);
}

/* Service cards */
.km-service-card {
  min-height: clamp(220px, 28vw, 320px);
}

/* Value cards */
.km-val-card {
  min-height: clamp(260px, 32vw, 360px);
}

/* ══════════════════════════════════════════════════════════
   WHITE SPACE — extra vertical breathing room per section
══════════════════════════════════════════════════════════ */

/* Breathing gap between hero and first content section */
.km-page-hero   + *,
.km-subpage-hero + * {
  margin-top: 0;   /* sections already have their own top padding */
}

/* Extra space between body sections on inner pages */
.km-about-intro       { margin-bottom: 0; }
.km-about-pillars     { margin-top:    0; }
.km-about-cta-band    { margin-top:    0; }

/* Whitespace helper utility */
.km-section-gap {
  padding-top:    clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION fallback — make everything visible instantly
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .km-about-left, .km-about-right,
  .km-about-intro__pull, .km-about-pillar,
  .km-ceo-reveal--intro, .km-ceo-reveal--portrait, .km-ceo-reveal--pillars,
  .km-about-cta-band .reveal,
  .km-service-intro-band .row, .km-service-showcase__head,
  .km-service-card, .km-service-cta-band .reveal,
  .km-contact-panel, .km-contact-form-card,
  .km-contact-faq details,
  .km-arch-gallery-section .heading_container,
  .km-arch-filters__btn, .km-gallery-grid-cell,
  .km-materials-carousel__stack, .km-material-tile,
  .km-subpage-hero--tail .container,
  .km-subpage-hero .container, .km-page-hero .container {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    clip-path: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PRINT / screenshot — force everything visible
══════════════════════════════════════════════════════════ */
@media print {
  .km-about-left, .km-about-right,
  .km-about-intro__pull, .km-about-pillar,
  .km-ceo-reveal--intro, .km-ceo-reveal--portrait, .km-ceo-reveal--pillars,
  .km-service-card, .km-contact-panel, .km-contact-form-card,
  .km-contact-faq details, .km-gallery-grid-cell,
  .km-material-tile, .km-subpage-hero--tail .container,
  .km-subpage-hero .container, .km-page-hero .container {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    clip-path: none !important;
  }
}