/* HILO Beauty Studio - entrance and scroll-reveal motion.
   Rules:
   - transform + opacity only, so nothing triggers layout or paint thrash
   - the hidden state is scoped to .js, so with JavaScript off every element
     renders normally instead of staying invisible
   - the whole file is inside prefers-reduced-motion: no-preference, so a
     visitor who asks for less motion simply gets the finished page */

@media (prefers-reduced-motion: no-preference) {

  :root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rise: 18px;
    --reveal-dur: 700ms;
  }

  /* ------------------------------------------------------- scroll reveal */

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

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

  /* once it has arrived, stop hinting the compositor */
  .js [data-reveal].is-done { will-change: auto; }

  /* children of a group animate one after another */
  .js [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(var(--rise));
    transition:
      opacity var(--reveal-dur) var(--ease-out),
      transform var(--reveal-dur) var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal-group].is-in > * {
    opacity: 1;
    transform: none;
  }

  /* ---------------------------------------------------- hero on page load
     Above the fold, so it plays immediately rather than waiting for an
     observer. `both` keeps the pre-animation state applied during the delay. */

  @keyframes hilo-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hilo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes hilo-nav-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
  }

  /* the photo settles out of a very slight zoom - the only "effect" here,
     kept under 2% so it reads as settling rather than as a Ken Burns pan */
  @keyframes hilo-media-in {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
  }

  .js .nav {
    animation: hilo-nav-in 620ms var(--ease-out) 80ms both;
  }

  .js .hero__media {
    animation: hilo-media-in 1100ms var(--ease-out) both;
  }
  .js .hero__scrim {
    animation: hilo-fade 900ms var(--ease-out) 200ms both;
  }

  /* hero card contents, staggered */
  .js .hero__card > *  { animation: hilo-rise 760ms var(--ease-out) both; }
  .js .hero__card > *:nth-child(1) { animation-delay: 260ms; }
  .js .hero__card > *:nth-child(2) { animation-delay: 340ms; }
  .js .hero__card > *:nth-child(3) { animation-delay: 420ms; }
  .js .hero__card > *:nth-child(4) { animation-delay: 500ms; }

  /* the card surface itself, behind its contents */
  .js .hero__card { animation: hilo-rise 820ms var(--ease-out) 180ms both; }
  .js .rating     { animation: hilo-rise 820ms var(--ease-out) 460ms both; }

  /* the floating WhatsApp button arrives last so it does not compete */
  .js .wa { animation: hilo-rise 700ms var(--ease-out) 900ms both; }

  /* ------------------------------------- inner pages: header on page load */

  .js .page-header__inner > * { animation: hilo-rise 720ms var(--ease-out) both; }
  .js .page-header__inner > *:nth-child(1) { animation-delay: 140ms; }
  .js .page-header__inner > *:nth-child(2) { animation-delay: 220ms; }

  .js .page-header__text > *    { animation: hilo-rise 720ms var(--ease-out) both; }
  .js .page-header__text > *:nth-child(1) { animation-delay: 240ms; }
  .js .page-header__text > *:nth-child(2) { animation-delay: 320ms; }
  .js .page-header__text > *:nth-child(3) { animation-delay: 400ms; }
  .js .page-header__actions     { animation: hilo-rise 720ms var(--ease-out) 480ms both; }
}