/* ==========================================================
   Ekstra — marketing motion
   Loaded by index.html and backyard-houses.html only. The app
   surfaces (studio, dashboard, admin) are tools, and a tool
   that animates while you work is a tool that wastes your time.
   ========================================================== */

:root {
  /* A long, decelerating ease. Things arrive and settle rather than stopping dead. */
  --rise-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rise-dist: 28px;
  --rise-time: 0.85s;
}

/* -------------------------------------------------- nothing is hidden by this stylesheet
   The first version hid every reveal target here and had the script take the hiding away. That is
   the arrangement every scroll-animation tutorial uses and it has one catastrophic property: the
   content is invisible by default, so every way the script can fail — not loading, throwing, a
   callback that never arrives, a transition that never runs — fails to a blank page. It did, twice.

   So the stylesheet hides nothing. The script hides what is below the fold, which is off screen and
   cannot flash, and leaves everything else alone. A visitor who loads this page with a broken or
   absent script sees the whole page, always. The worst a bug can now do is skip an animation. */

.rise-wait {
  opacity: 0;
  transform: translate3d(0, var(--rise-dist), 0);
}

/* An animation rather than a transition: it runs from its own first keyframe, so there is no
   dependence on the element having been painted in a hidden state first. */
.rise-in {
  animation: ekstra-rise var(--rise-time) var(--rise-ease) var(--rise-delay, 0ms) both;
}

@keyframes ekstra-rise {
  from {
    opacity: 0;
    transform: translate3d(0, var(--rise-dist), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Cards lift a little further and settle a touch slower, so a grid reads as objects arriving
   rather than text fading in. */
:is(.use-card, .design-card, .house-card).rise-in,
:is(.use-card, .design-card, .house-card).rise-wait {
  --rise-dist: 34px;
  --rise-time: 0.95s;
}
:is(.use-card, .design-card, .house-card) {
  transition: transform 0.28s var(--rise-ease);
}
:is(.use-card, .design-card, .house-card):hover {
  transform: translate3d(0, -3px, 0);
}

/* ------------------------------------------------------------- hero entrance
   The headline is already split into lines in the markup, so each one can rise out of its own
   edge. Clipped slightly wide of the text box, because the hero type carries a shadow and a tight
   clip shears it. */
.hero h1.rise-in .line,
.catalog-hero .sec-eyebrow.rise-in {
  animation: ekstra-line 0.9s var(--rise-ease) var(--rise-delay, 0ms) both;
}

@keyframes ekstra-line {
  from {
    opacity: 0;
    transform: translate3d(0, 0.6em, 0);
    clip-path: inset(0 -0.6em 100% -0.6em);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.35em -0.6em -0.35em -0.6em);
  }
}

/* ------------------------------------------------------------ reduced motion
   Not a lesser version of the animation — no animation. Everything is where it belongs from the
   first frame, including anything the script had already hidden before the setting was read. */
@media (prefers-reduced-motion: reduce) {
  .rise-wait,
  .rise-in,
  .hero h1.rise-in .line,
  .catalog-hero .sec-eyebrow.rise-in {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }
  :is(.use-card, .design-card, .house-card):hover {
    transform: none;
  }
}