/* =====================================================================
   Om Enterprise — "Ikon" presentation layer
   ---------------------------------------------------------------------
   Editorial scroll-entrance animations in the style of luxury property
   sites (masked text + curtain image reveals):
   • Headings rise word-by-word (line-by-line for gradient headlines)
     out of invisible masks as they scroll into view — js/present.js
     splits them into .wm/.wmi units and adds .pr-in on intersection.
   • Key images unveil with a curtain wipe + slow zoom-out.
   • The existing .reveal blocks additionally de-blur as they enter.

   Additive layer: remove this <link> + the js/present.js <script> in
   index.html to revert.
   ===================================================================== */

/* 1. Masked text reveal ---------------------------------------------- */
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* keep descenders (g j p q y) un-clipped inside the mask */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.wmi {
  display: inline-block;
  transform: translateY(118%);
  transition: transform .9s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--wi, 0) * 55ms);
}

.pr-in .wmi { transform: translateY(0); }

/* 2. Curtain-wipe + zoom-out image reveal ----------------------------- */
img.pr-img { opacity: 0; }

/* an animation (not a transition) so its final frame hands control back
   to the stylesheet — the gallery hover zoom etc. keep working after */
img.pr-img.pr-in {
  opacity: 1;
  animation: pr-img-in 1.25s cubic-bezier(.22, 1, .36, 1);
}

@keyframes pr-img-in {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.28); }
  55%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0);   transform: scale(1); }
}

/* 3. Soft de-blur on the existing scroll reveals ----------------------
   Restates premium.css's .reveal transition with `filter` added; ends
   on `none` (not blur(0)) so no stacking/flattening side-effects stay
   behind to disturb the 3D tilt layers. */
.reveal {
  filter: blur(14px);
  transition:
    opacity .9s var(--ease-premium),
    transform .9s var(--ease-premium),
    filter .9s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.in { filter: none; }

/* Pointer-tilt elements (.card / .feature / .hero-media get .tilt from
   main.js) must answer the cursor at .25s — the .9s transform above
   wins the cascade over premium.css .tilt and made hover lag. Restore
   the snappy transform/box-shadow; keep the .9s entrance ONLY on
   opacity + filter, with per-property delays so the sibling stagger
   survives without delaying the hover response. */
.reveal.tilt {
  transition:
    transform .25s var(--ease-premium),
    box-shadow .25s var(--ease-premium),
    opacity .9s var(--ease-premium),
    filter .9s var(--ease-premium);
  transition-delay: 0s, 0s, var(--reveal-delay, 0s), var(--reveal-delay, 0s);
}