/* =========================================================
   Page-level transition previews (Avida / Amaia / Services)
   Loaded AFTER styles.css. All effects additive + safe.
   No-JS safe (nothing runs), reduced-motion safe.
   ========================================================= */

/* ============ AVIDA — calculator count-up + gold slider ============ */
/* range fill: gold trail grows on the track */
.avida-preview input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; outline-offset: 4px;
  background: linear-gradient(to right, var(--gold) var(--fill, 0%), rgba(11,11,10,.12) var(--fill, 0%));
}
.avida-preview input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--ink); cursor: grab;
  box-shadow: 0 0 0 3px rgba(211,168,59,.25);
}
.avida-preview input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--gold-bright);
  border: 2px solid var(--ink); cursor: grab;
}
/* count-up number: gold pulse when it changes */
.avida-preview .calc-result strong { transition: color .3s; }
.avida-preview .calc-result strong.bump { color: var(--gold-bright); }
/* number-board count-up */
.avida-preview .count-num { transition: color .3s; }

/* ============ SERVICES — before/after slider ============ */
.ba {
  position: relative; overflow: hidden; user-select: none;
  aspect-ratio: 3 / 4; max-width: 560px; margin: 40px auto 8px;
  cursor: ew-resize;
}
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__after { clip-path: inset(0 0 0 50%); }   /* after sits right, clipped by handle */
.ba__before-label, .ba__after-label {
  position: absolute; top: 14px; padding: 6px 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(11,11,10,.78); color: var(--white);
}
.ba__before-label { left: 14px; }
.ba__after-label { right: 14px; color: var(--gold-bright); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--gold); transform: translateX(-1px);
}
.ba__handle::after {
  content: '◂ ▸'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-size: .7rem;
}
.ba-note { text-align: center; font-size: .75rem; color: var(--grey); margin: 0 0 8px; }

/* ============ SERVICES — keys rail + process stagger ============ */
.p-stagger { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.p-stagger.in { opacity: 1; transform: none; }
.p-stagger:nth-child(2) { transition-delay: .08s; }
.p-stagger:nth-child(3) { transition-delay: .16s; }
.p-stagger:nth-child(4) { transition-delay: .24s; }
.p-stagger:nth-child(5) { transition-delay: .32s; }

/* keys-rail: light the existing steps in sequence (no added full-width line) */
.keys-preview .keys-rail li { position: relative; }
.keys-preview .keys-rail li::before {
  /* use the base layout's own dot, just pulse it when active */
  transition: background .4s, box-shadow .4s;
}
.keys-preview .keys-rail li.active::before {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(211,168,59,.28);
}
.keys-preview .keys-rail li > span {
  display: inline-block; transition: color .4s;
}
.keys-preview .keys-rail li.active > span { color: var(--gold-bright); }

/* ============ AMAIA — soft reveal + available pulse ============ */
.amaia-preview .reveal { transition-duration: .9s; }
.amaia-preview .fade-soft { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.amaia-preview .fade-soft.in { opacity: 1; transform: none; filter: none; }

/* gold pulse ring on the available (Single Home) unit card */
.amaia-preview .unit-card.available { position: relative; }
.amaia-preview .unit-card.available .pulse-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(211,168,59,.5);
  animation: availPulse 3s var(--ease) infinite;
}
@keyframes availPulse {
  0% { box-shadow: 0 0 0 0 rgba(211,168,59,.45); }
  70% { box-shadow: 0 0 0 16px rgba(211,168,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(211,168,59,0); }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .p-stagger { opacity: 1; transform: none; }
  .amaia-preview .fade-soft { opacity: 1; filter: none; transform: none; }
  .amaia-preview .unit-card.available .pulse-ring { animation: none; box-shadow: none; }
  .calc-result strong, .count-num { transition: none; }
  .ba { cursor: default; }
}

/* ============ Interior-page intro: show ONLY the M monogram ============
   The homepage splash ("Mimz Sumagaysay · Iloilo") belongs on the homepage.
   On the interior pages, keep the intro to just the M mark — hide the
   name/role/tag that would otherwise fade in beneath it. */
.intro.is-showing .intro__name,
.intro.is-showing .intro__role,
.intro.is-showing .intro__tag {
  display: none;
}
/* Let the M mark sit in normal flow so the flex container centers it
   vertically (instead of stretching to 100vh and pinning it to the top). */
.intro.is-showing .intro__inner {
  gap: 0;
  padding-top: 0;
  min-height: 0;
}
.intro.is-showing .intro__monogram {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  margin: 0 auto;
}