/* ==========================================================================
   AJK Dream House Ltd. — Motion layer

   Rule of the system: no two adjacent sections share an entrance. Each
   variant below is used by a *specific* section so the page never feels
   like one repeated fade. Progressive enhancement — without the `js` class
   on <html>, nothing here applies and the page is fully readable.
   ========================================================================== */

html.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

/* — stats: settle in from slightly large, like a counter landing — */
html.js [data-reveal='settle'] { transform: scale(1.04) translateY(14px); }

/* — services: quiet rise — */
html.js [data-reveal='rise'] { transform: translateY(38px); }

/* — projects: a longer, weightier lift than the services rise —
   deliberately NOT clip-path: on a rounded, overflow-hidden, isolated
   anchor it can render as nothing and never recover. */
html.js [data-reveal='wipe'] {
  transform: translateY(46px) scale(0.985);
  transition-duration: 1000ms;
}

/* — why: split halves converge — */
html.js [data-reveal='from-left']  { transform: translateX(-54px); }
html.js [data-reveal='from-right'] { transform: translateX(54px); }

/* — testimonials: focus pull — */
html.js [data-reveal='focus'] { filter: blur(14px); transform: scale(0.97); }

/* — service areas: cards lift and unskew — */
html.js [data-reveal='tilt'] { transform: translateY(30px) rotate(-1.2deg); }

/* — faq rows: cascade in from the side — */
html.js [data-reveal='slide'] { transform: translateX(-26px); }

/* — cta: expand — */
html.js [data-reveal='expand'] { transform: scale(0.955); }

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger — children of a [data-stagger] inherit an incrementing delay */
html.js [data-stagger] > * { --step: 90ms; }
html.js [data-stagger] > *:nth-child(1) { --d: 0ms; }
html.js [data-stagger] > *:nth-child(2) { --d: calc(var(--step) * 1); }
html.js [data-stagger] > *:nth-child(3) { --d: calc(var(--step) * 2); }
html.js [data-stagger] > *:nth-child(4) { --d: calc(var(--step) * 3); }
html.js [data-stagger] > *:nth-child(5) { --d: calc(var(--step) * 4); }
html.js [data-stagger] > *:nth-child(6) { --d: calc(var(--step) * 5); }
html.js [data-stagger] > *:nth-child(7) { --d: calc(var(--step) * 6); }
html.js [data-stagger] > *:nth-child(8) { --d: calc(var(--step) * 7); }

/* ==========================================================================
   TEXT MOTION — per-word masked rise
   Words are wrapped by JS. The mask is a real overflow clip, so the words
   rise out of an invisible baseline rather than simply fading.
   ========================================================================== */
.words { display: inline; }

html.js .words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* room for descenders so the clip never cuts a "y" or "g" */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

html.js .words .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform 820ms var(--ease-out);
  transition-delay: var(--wd, 0ms);
}

html.js .words.is-in .w > i { transform: translateY(0); }

/* Gold words inside an animated heading must NOT use background-clip:text.
   Each word wrapper is transformed, which creates a stacking context that the
   ancestor's clipped gradient cannot paint into — the glyphs would render
   transparent over nothing and vanish. Solid gold here; the metallic gradient
   still carries on stats, the wordmark, buttons and the services sheen. */
html.js .words .gold-text,
html.js .words .gold-text .w > i {
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
}

/* Hero entrance — plays on load, not on scroll */
html.js .hero__inner > *:not(h1) {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 900ms var(--ease-out) forwards;
}
html.js .hero__inner > *:nth-child(1) { animation-delay: 100ms; }
html.js .hero__inner > *:nth-child(3) { animation-delay: 520ms; }
html.js .hero__inner > *:nth-child(4) { animation-delay: 640ms; }
html.js .hero__inner > *:nth-child(5) { animation-delay: 760ms; }

@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Gold sheen sweep — used once, on the services heading only */
html.js .sheen {
  background-image: linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold-light) 42%, var(--gold) 58%, var(--gold-deep) 100%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html.js .sheen.is-in {
  transition: background-position 1600ms var(--ease-out) 300ms;
  background-position: -30% 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal].is-in {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  html.js .words .w > i { transform: none; transition: none; }
  html.js .hero__inner > * { opacity: 1; transform: none; animation: none; }
  html.js .sheen { transition: none; background-position: -30% 0; }
}