/* Elysian Villa Retreat, scroll motion
   ────────────────────────────────────────────────────────────
   KEPT IN ITS OWN FILE ON PURPOSE. Two lines in index.html turn
   all of this on. Delete those two lines and the site is exactly
   what it was, with nothing left behind. That matters because the
   audience is people recovering from surgery, and if the motion
   turns out to be wrong for them it has to come out in one edit.

   Rules followed throughout:
   - transform and opacity ONLY, so nothing triggers layout
   - every element is VISIBLE by default and only hidden once JS
     has confirmed it can animate. A dead script leaves a readable
     page, never a blank one
   - prefers-reduced-motion switches everything off completely
   ──────────────────────────────────────────────────────────── */

/* Nothing hides until JS adds this. No JS, no hidden content. */
.motion-on [data-reveal]{
  opacity:0;
  will-change:transform,opacity;
}
.motion-on [data-reveal="up"]{transform:translate3d(0,42px,0)}
.motion-on [data-reveal="up-far"]{transform:translate3d(0,90px,0)}
.motion-on [data-reveal="left"]{transform:translate3d(-56px,0,0)}
.motion-on [data-reveal="right"]{transform:translate3d(56px,0,0)}
.motion-on [data-reveal="scale"]{transform:scale(.9)}
/* Rotation was removed 2026-08-13. Support review watched a card arrive
   tilted AND scaling at once and called it out for an audience that may
   be dizzy. A straight rise reads just as expensive. */
.motion-on [data-reveal="rise-tilt"]{transform:translate3d(0,70px,0) scale(.972)}
/* Was blur(9px). Support review found headings rendering as an
   unreadable low-contrast ghost mid-transition, including "Check your
   dates". Halved, so it still softens in without ever being illegible. */
.motion-on [data-reveal="blur"]{filter:blur(4px);transform:translate3d(0,26px,0)}

.motion-on [data-reveal].is-in{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1),
    filter .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.motion-on [data-reveal].is-in{will-change:auto}

/* ── gold rules that draw themselves ──────────────────────── */
.motion-on .rule{transform-origin:left center;transform:scaleX(0);transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.motion-on .rule.mid{transform-origin:center}
.motion-on .rule.is-in{transform:scaleX(1)}

/* ── the wordmark, revealed letter by letter ──────────────── */
.motion-on .word span{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,.55em,0) rotate(4deg);
}
.motion-on .word.is-in span{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * 42ms);
}

/* ── the visible off switch ───────────────────────────────
   Support review made the point that prefers-reduced-motion is an
   operating system setting almost nobody has ever touched, so the
   full effect is what nearly every visitor gets. On a site for
   people who have just had surgery that is not good enough.

   So there is a button. One tap, motion stops, and the choice is
   remembered on that device. */
.motion-toggle{
  position:fixed;right:14px;bottom:14px;z-index:85;
  font:inherit;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper);color:var(--ink-soft);
  border:1px solid var(--line);padding:11px 15px;cursor:pointer;
  box-shadow:0 2px 14px rgba(28,26,23,.12);
  min-height:44px;
}
.motion-toggle:hover{border-color:var(--gold);color:var(--ink)}
.motion-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media print{.motion-toggle{display:none}}

/* ── scroll progress, a hairline of gold ──────────────────── */
.scroll-bar{
  position:fixed;top:0;left:0;height:2px;z-index:80;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold));
  pointer-events:none;
}

/* ── hero, drifts and dissolves as you leave it ───────────── */
.motion-on .hero-logo img{
  transform:translate3d(0,calc(var(--hero) * -70px),0) scale(calc(1 - var(--hero) * .07));
  opacity:calc(1 - var(--hero) * .85);
}
.motion-on .hero .lede,
.motion-on .hero-actions{
  transform:translate3d(0,calc(var(--hero) * -34px),0);
  opacity:calc(1 - var(--hero) * 1.15);
}

/* ── parallax on the section that holds the four words ────── */
.motion-on .steps{overflow:hidden}
.motion-on .step .n{
  transform:translate3d(0,calc(var(--par,0) * -14px),0);
}

/* ── rooms, a staggered rise with a whisper of tilt ───────── */
.motion-on .room .shot span{
  transform:scale(calc(1 + var(--par,0) * .06));
  transition:transform .2s linear;
}

/* ── the pinned vision quote ──────────────────────────────── */
.motion-on .pin-quote{
  position:sticky;top:96px;
}
.motion-on .pin-quote blockquote{
  transform:scale(calc(1 - var(--pin,0) * .04));
  opacity:calc(1 - var(--pin,0) * .55);
}

/* ── booking steps, each numbered badge pops in ───────────── */
.motion-on .bstep>h3 .n{transform:scale(.4);opacity:0}
.motion-on .bstep.is-in>h3 .n{
  transform:none;opacity:1;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .12s,opacity .4s ease .12s;
}

/* ── the footer lotus rule ────────────────────────────────── */
.motion-on footer .legal{opacity:0;transform:translate3d(0,20px,0)}
.motion-on footer .legal.is-in{
  opacity:1;transform:none;
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1);
}

/* ══════════════════════════════════════════════════════════
   OFF. Completely. For anyone who has asked their device for
   less movement, and for print.

   This is not decoration. The people using this site have just
   had surgery. Some of them are nauseated, on painkillers, or
   dizzy. Motion is not a small thing for them.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .motion-on [data-reveal],
  .motion-on [data-reveal].is-in,
  .motion-on .word span,
  .motion-on .bstep>h3 .n,
  .motion-on footer .legal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .motion-on .rule{transform:scaleX(1) !important;transition:none !important}
  .motion-on .hero-logo img,
  .motion-on .hero .lede,
  .motion-on .hero-actions,
  .motion-on .pin-quote blockquote,
  .motion-on .room .shot span,
  .motion-on .step .n{transform:none !important;opacity:1 !important}
  .motion-on .pin-quote{position:static}
  .scroll-bar{display:none}
  .motion-toggle{display:none}
}

@media print{
  [data-reveal]{opacity:1 !important;transform:none !important}
  .scroll-bar{display:none}
}