/* ==========================================================================
   Opal & Ivy — Motion: intro curtains, scroll reveals, keyframes,
   and the reduced-motion contract.
   All entrance states are scoped to html.js so the page is fully visible
   without JavaScript.
   ========================================================================== */

/* ---- Opening curtains --------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
html.no-js .intro { display: none; }
.intro__panel {
  position: absolute;
  inset-block: 0;
  width: 50.5%;
  background: var(--surface);
  transition: transform 1.1s var(--ease-soft);
}
.intro__panel--left { left: 0; }
.intro__panel--right { right: 0; }
.intro__mark {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
  color: var(--ink);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.intro__line { display: block; clip-path: inset(-0.15em 0 -0.35em 0); }
.intro__line > * {
  display: block;
  transform: translateY(130%);
  transition: transform 1s var(--ease-out);
}
.intro__line:nth-child(2) > * { transition-delay: 0.08s; }
.intro__word { display: block; padding: 0.15em 0.2em 0.1em 0; }
.intro.is-revealing .intro__line > * { transform: none; }
.intro.is-opening .intro__mark { opacity: 0; transform: translateY(-1.25rem) scale(0.985); }
.intro.is-opening .intro__panel--left { transform: translateX(-100%); }
.intro.is-opening .intro__panel--right { transform: translateX(100%); }

/* ---- Scroll reveals ----------------------------------------------------- */
html.js [data-reveal]:not([data-reveal="mask"]) {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity var(--dur-base) var(--ease-out) var(--d, 0s),
    transform var(--dur-slow) var(--ease-spring) var(--d, 0s);
}
html.js [data-reveal]:not([data-reveal="mask"]).is-in {
  opacity: 1;
  transform: none;
}

html.js [data-reveal="mask"] .mask__inner {
  transform: translateY(130%) rotate(2.5deg);
  transition: transform 1.15s var(--ease-out) var(--d, 0s);
}
html.js [data-reveal="mask"].is-in .mask__inner { transform: none; }

/* Image frames: the image wipes up inside its stone box, then settles.
   The clip lives on the <img>, not the observed wrapper, so the
   IntersectionObserver still sees the frame's full box. */
html.js .frame img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.18);
  transition:
    clip-path 1.5s var(--ease-soft) var(--d, 0s),
    transform 2s var(--ease-soft) var(--d, 0s);
}
html.js .frame.is-in img { clip-path: inset(0); transform: none; }

/* The seal reveals itself: the ring is drawn clockwise by a mask, the branch
   grows up the left by a second mask, the lettering rises behind clips, the
   Est. line settles, berries pop, then the glint begins to orbit. */
html.js .seal__reveal-ring,
html.js .seal__reveal-branch { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .seal__reveal-ring   { transition: stroke-dashoffset 1.9s var(--ease-soft) 0.1s; }
html.js .seal__reveal-branch { transition: stroke-dashoffset 1.5s var(--ease-soft) 0.55s; }
html.js .seal__word {
  transform: translateY(140%);
  transition: transform 1.15s var(--ease-out) var(--d, 0s);
}
html.js .seal__estline {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.9s var(--ease-out) 1.35s, transform 1.2s var(--ease-spring) 1.35s;
}
html.js .seal__berry {
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 0.5s var(--ease-out) calc(1.9s + var(--i, 0) * 60ms),
    transform 0.9s var(--ease-spring) calc(1.9s + var(--i, 0) * 60ms);
}
html.js .seal__art.is-in .seal__reveal-ring,
html.js .seal__art.is-in .seal__reveal-branch { stroke-dashoffset: 0; }
html.js .seal__art.is-in .seal__word { transform: none; }
html.js .seal__art.is-in .seal__estline { opacity: 1; transform: none; }
html.js .seal__art.is-in .seal__berry { opacity: 1; transform: none; }

/* Laurel draws itself */
html.js .laurel path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-soft) calc(var(--i, 0) * 90ms);
}
html.js .laurel circle {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 32px 6px;
  transition: opacity 0.6s var(--ease-out) 1.2s, transform 0.9s var(--ease-spring) 1.2s;
}
html.js .laurel.is-in path { stroke-dashoffset: 0; }
html.js .laurel.is-in circle { opacity: 1; transform: none; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
/* The seal's idle life: it floats, the ring pair turns, a glint orbits,
   the branch sways, leaves flutter, berries glow. */
@keyframes seal-float {
  from { transform: translate3d(0, 0.35rem, 0); }
  to   { transform: translate3d(0, -0.45rem, 0); }
}
@keyframes seal-breathe {
  from { transform: scale(0.99); }
  to   { transform: scale(1.014); }
}
@keyframes glint-orbit {
  to { stroke-dashoffset: -1; }
}
@keyframes mark-sway {
  from { transform: rotate(-1.1deg); }
  to   { transform: rotate(1.1deg); }
}
@keyframes berry-glow {
  from { opacity: 1;    transform: scale(1); }
  to   { opacity: 0.55; transform: scale(1.35); }
}
@keyframes sprig-sway {
  0%   { transform: rotate(0); }
  35%  { transform: rotate(-4deg); }
  70%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0); }
}
@keyframes cue-sweep {
  0%   { transform: scaleX(0); transform-origin: 0 50%; }
  45%  { transform: scaleX(1); transform-origin: 0 50%; }
  55%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---- Reduced motion: everything lands instantly, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }

  html.js [data-reveal]:not([data-reveal="mask"]),
  html.js [data-reveal="mask"] .mask__inner,
  html.js .frame img,
  html.js .laurel path,
  html.js .laurel circle,
  html.js .seal__reveal-ring,
  html.js .seal__reveal-branch,
  html.js .seal__word,
  html.js .seal__estline,
  html.js .seal__berry {
    opacity: 1;
    transform: none;
    clip-path: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .marquee__track,
  .seal__float,
  .seal__art,
  .seal__mark,
  .seal__glint,
  .seal__berry,
  .lockup__sprig,
  .hero__cue-line::after { animation: none; }
  .seal__glint { opacity: 0; }

  .btn::before,
  .reserve__card::before,
  .split__panel,
  .split__story,
  .split__story-inner,
  .split__media img,
  .menu,
  .site-header { transition-duration: 0.01ms; }
}