/* =====================================================================
   MOTION 2 — loads after style.css + polish.css.
   Every rule that moves something sits behind .motion (set in <head> only when
   JS runs and the visitor has not asked for reduced motion). Transform + opacity only,
   except the two tint shifts the brief asks for (kids card colour, lights-down text).
   ===================================================================== */
:root {
  --m2-out: cubic-bezier(.23, 1, .32, 1);
  --m2-inout: cubic-bezier(.77, 0, .175, 1);
  --m2-drawer: cubic-bezier(.32, .72, 0, 1);
  --m2-night: #0a1820;
}

/* ---------- shared: rolling digits ---------- */
.m2-roll { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.m2-roll-col { display: block; }
.m2-roll-col > span { display: block; height: 1.1em; }
.m2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   25 · PAGE-TO-PAGE PHOTO MORPH (cross-document view transitions)
   Names are set only on the one photo that travels (see VT_JS in build.py).
   ===================================================================== */
[data-vt-live] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
::view-transition-group(vt-resort), ::view-transition-group(vt-dining), ::view-transition-group(vt-program),
::view-transition-group(vt-kids), ::view-transition-group(vt-excursions), ::view-transition-group(vt-gallery) {
  animation-duration: .55s; animation-timing-function: cubic-bezier(.77, 0, .175, 1);
}
::view-transition-old(vt-resort), ::view-transition-new(vt-resort), ::view-transition-old(vt-dining), ::view-transition-new(vt-dining),
::view-transition-old(vt-program), ::view-transition-new(vt-program), ::view-transition-old(vt-kids), ::view-transition-new(vt-kids),
::view-transition-old(vt-excursions), ::view-transition-new(vt-excursions), ::view-transition-old(vt-gallery), ::view-transition-new(vt-gallery) {
  height: 100%; width: 100%; object-fit: cover; overflow: hidden;
  animation-duration: .55s; animation-timing-function: cubic-bezier(.77, 0, .175, 1);
}

/* =====================================================================
   26 · THE LUACH TURNS: one gold ring glides; the panel turns with it
   ===================================================================== */
.m2-ring-on { position: relative; }
.m2-ring-on .day[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--line); }
.m2-ring-on .day.tr[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--line-strong); }
.m2-ring-on .day.yt[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(124, 34, 54, .25); }   /* the calendar tints, unchanged */
.m2-ring-on .day.sh[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(15, 42, 51, .2); }
.m2-ring-on .day[aria-pressed="true"]::after { content: none; }
.m2-ring {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 2px var(--shell), 0 0 0 3px var(--gold);
  opacity: 0; transition: opacity .5s ease .5s;
}
.m2-ring::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 10px; height: 10px; background: var(--paper); transform: translateX(-50%) rotate(45deg); box-shadow: -1px -1px 0 var(--line); }
.m2-ring.live { transition: opacity .5s ease .5s, transform .35s var(--m2-inout); }
.luach.in ~ .m2-ring, .m2-ring.shown { opacity: 1; }
/* the panel: out toward where you came from, in from where you're going; no blur */
.motion .m2-panel [data-f] { filter: none !important; transition: opacity .15s ease, transform .15s ease; }
.motion .m2-panel.swap [data-f] { opacity: 0; filter: none; transform: translateX(calc(var(--dir, 1) * -8px)); }
.motion .m2-panel.swap [data-f="omerbox"], .motion .m2-panel.swap [data-f="omer"] { opacity: 1; transform: none; }
.motion .m2-panel.swap [data-f="omertxt"] { transform: none; }

/* =====================================================================
   27 · GALLERY LIGHTBOX like Photos
   ===================================================================== */
.motion .m2-lb { animation: none; background: transparent; overscroll-behavior: contain; }
.m2-lb-bd { position: absolute; inset: 0; z-index: -1; background: rgba(8, 22, 27, .96); pointer-events: none; }
.motion .m2-lb .lb-stage { position: relative; touch-action: none; }
.motion .m2-lb .lb-stage > img { grid-area: 1 / 1; animation: none; transform-origin: 0 0; -webkit-user-drag: none; user-select: none; }
.m2-lb-peek { visibility: hidden; pointer-events: none; max-height: 100%; max-width: 100%; object-fit: contain; }
.m2-lb-peek.on { visibility: visible; }
.m2-lb .lb-top, .m2-lb .lb-bot { position: relative; z-index: 1; }

/* =====================================================================
   28 · FILTERS: kept items glide, leaving items fade (same-document view transition)
   ===================================================================== */
html.m2-vtf::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.77, 0, .175, 1); }
html.m2-vtf::view-transition-old(root) { animation: none; opacity: 0; }
html.m2-vtf::view-transition-new(root) { animation: none; }
html.m2-vtf::view-transition-old(*):only-child { animation: m2-fade-out .26s ease-out both; }
html.m2-vtf::view-transition-new(*):only-child { animation: m2-fade-in .34s ease-out .12s both; }
@keyframes m2-fade-out { to { opacity: 0; transform: scale(.97); } }
@keyframes m2-fade-in { from { opacity: 0; transform: scale(.97); } }

/* =====================================================================
   29 · KIDS FINDER: only the changed card changes
   ===================================================================== */
.kid-cards { position: relative; }
.motion .kid-card { transition: color .35s ease; }
.m2-ghost { position: absolute !important; margin: 0 !important; pointer-events: none; z-index: 0; }

/* =====================================================================
   30 · INQUIRY FORM
   ===================================================================== */
/* dates: the stay fills from arrival to departure, one day after another */
.motion .dbtn { position: relative; isolation: isolate; }
.motion .dbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #e3eeee; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.motion .dbtn.in:not(:disabled) { background: #fff; }
.motion .dbtn:disabled::before { content: none; }   /* Yom Tov / Shabbos keep their own tint inside a stay */
.motion .dbtn.in::before { opacity: 1; transition: opacity .24s ease-out calc(var(--ri, 0) * 15ms); }
/* steps: Back comes in from the left, Continue from the right (the stock step-in) */
.motion [data-step][data-m2in="back"]:not([hidden]) { animation-name: m2-step-back; }
@keyframes m2-step-back { from { opacity: 0; transform: translateX(-16px); } }
/* thank-you: the RP monogram catches one gold glint (the logo intro's mask and keyframes) */
.m2-done-mark {
  display: block; width: 40px; aspect-ratio: 480 / 707;
  -webkit-mask: url(../img/rp-mark-mask.png) center / contain no-repeat; mask: url(../img/rp-mark-mask.png) center / contain no-repeat;
  background: linear-gradient(100deg, #a88a50 38%, #fff4d6 50%, #a88a50 62%) 100% 0 / 300% 100%;
}
.motion .m2-done-mark.play { animation: intro-glint 1.3s cubic-bezier(.45, 0, .25, 1) .45s forwards; }

/* =====================================================================
   31 · GENTLE PRESS: 80ms in, 160ms out
   ===================================================================== */
.motion :is(.btn, .chip, .dbtn, .lb-btn, .menu-btn, .stepper button, .room-pick, .seg button, .kid-x, .add-kid, .linkbtn, .mbar a, .gallery button, .sv-icon) {
  transition-property: transform, background-color, color, border-color, box-shadow, opacity;
  transition-duration: .16s; transition-timing-function: ease-out;
}
.motion :is(.btn, .chip, .dbtn, .lb-btn, .menu-btn, .stepper button, .room-pick, .seg button, .kid-x, .add-kid, .linkbtn, .mbar a, .gallery button, .sv-icon):active:not(:disabled) {
  transform: scale(.97); transition-duration: 80ms;
}
.motion .day { transition: transform .16s ease-out, box-shadow .2s ease; }
.motion .day:active { transform: translateY(-3px) scale(.97); transition-duration: 80ms; }
.motion .story-btn .ring { transition: transform .16s ease-out; }
.motion .story-btn:active .ring { transform: scale(.97); transition-duration: 80ms; }
/* desktop: a thin gold line draws under primary buttons */
@media (hover: hover) and (pointer: fine) {
  .motion .btn:not(.ghost) { position: relative; }
  .motion .btn:not(.ghost)::after {
    content: ""; position: absolute; left: 1.9rem; right: 1.9rem; bottom: .78rem; height: 1px;
    background: var(--gold-soft); transform: scaleX(0); transform-origin: right center;
    transition: transform .45s var(--m2-out); pointer-events: none;
  }
  .motion .btn:not(.ghost):hover::after { transform: scaleX(1); transform-origin: left center; }
  .motion :is(.btn.light, .hero .btn:not(.ghost), .cta-band .btn:not(.ghost))::after { background: var(--gold); }
  .motion .site-head .btn:not(.ghost)::after { left: 1.2rem; right: 1.2rem; bottom: .62rem; }
}

/* =====================================================================
   32 · SWIPE RAILS: the card in hand is full size, its neighbours sit back a touch
   ===================================================================== */
@supports (animation-timeline: view()) {
  @media (max-width: 700px) {
    .motion .rail > * { animation: m2-rail linear both; animation-timeline: view(inline); }
  }
}
@keyframes m2-rail {
  0% { transform: scale(.955); opacity: .84; }
  42%, 70% { transform: none; opacity: 1; }
  100% { transform: scale(.955); opacity: .84; }
}

/* =====================================================================
   33 · LIGHTS DOWN (headliners): the page dims to night for Omer Adam
   ===================================================================== */
.m2-night { position: fixed; inset: 0; z-index: -1; background: var(--m2-night); opacity: 0; pointer-events: none; }
.m2-lights main > .sec { background-color: transparent; transition: color .25s ease; }   /* the night shows through; the body is the same shell */
.m2-lights main > .sec :is(h2, h3, .lede, p, .muted, .eyebrow, .eyebrow .heb, em, .cx-label, .cx-more, .role, .rail-meta, a:not(.btn)) { transition: color .25s ease; }
.m2-dark main > .sec { color: #efeadf; }
.m2-dark main > .sec :is(h2, h3) { color: #f6f1e6; }
.m2-dark main > .sec :is(.lede, p, .muted) { color: #c3cfd1; }
.m2-dark main > .sec :is(.eyebrow, .eyebrow .heb, em, .cx-label, .cx-more, .role) { color: var(--gold-soft); }
.m2-dark main > .sec .rail-meta { color: #9db6ba; }
.m2-dark main > .sec .rail-bar { background: rgba(255, 255, 255, .18); }
.m2-dark main > .sec .btn:not(.ghost) { background: var(--ivory); color: var(--deep); }
.m2-dark main > .sec .eyebrow::before { background: var(--gold-soft); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}