/* Every effect on the public pages. Only transform and opacity move. Loaded by the home, rooms and banquet pages only. */
.hero.live { background: var(--ink); overflow-x: clip; overflow-y: hidden; touch-action: pan-y; min-height: min(86svh, 720px); }
.hero.live::after { display: none; }
.hero.live > .drift, .hero.live > .glow, .hero.live > .stage { position: absolute; z-index: 0; pointer-events: none; }
.hero.live > .drift { inset: -30%; background: linear-gradient(135deg, var(--ink) 15%, var(--btn) 50%, var(--ink) 85%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(8%, 6%, 0) rotate(6deg); } }
.hero.live > .glow { left: 70%; top: 30%; width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin; background: radial-gradient(circle, #2FD3C055, transparent 65%); }
.hero.live > .stage { right: 2%; top: 8%; width: 58vmin; height: 58vmin; transform-style: preserve-3d; transform: perspective(700px); }
/* The three dishes sit on a ring that turns once every 30 s (motion.js); each is turned back so it stays upright. */
.ring { position: absolute; inset: 0; }
.plate { position: absolute; width: 42%; height: auto; border-radius: 50%; object-fit: cover; box-shadow: 0 18px 40px #0008; }
.plate.cut { border-radius: 0; box-shadow: none; object-fit: contain; }
.p1 { left: 50%; top: 18%; }
.p2 { left: 22%; top: 66%; }
.p3 { left: 78%; top: 66%; }
.hero.live > .bg { position: absolute; z-index: 0; pointer-events: none; inset: -9% 0; width: 100%; height: 118%; object-fit: cover; }
.hero.live:not(.photo) > .bg { opacity: .35; }
.hero.live .mark { align-self: flex-start; width: clamp(72px, 16vw, 120px); height: auto; margin-bottom: 14px; padding: 10px; border: 1px solid var(--gold); border-radius: 50%; background: #041819aa; filter: drop-shadow(0 0 24px #2FD3C055); }
.hero.live h1 { font-size: clamp(48px, 13vw, 120px); line-height: .95; }
.hero.live.off .drift { animation-play-state: paused; }
.hero.live.photo { min-height: min(52svh, 420px); }
.hero.live.photo > .drift { opacity: .3; }
.hero.live.photo::after { display: block; z-index: 0; background: linear-gradient(#04181933, #041819d9); }
/* the label sits on the teal drift, so it is cream, not powder */
.hero.live small { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .hero.live > .drift { animation: none; }
  .hero.live > .glow { display: none; }
}

/* Home story. Without JavaScript or with reduced motion the steps simply stack. With JavaScript, motion.js pins the story and fades each step in over the one before, which stays solid underneath: there is always a picture. */
.step { position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: flex-end; padding: 20px; background: var(--panel); }
.step > .bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; z-index: 0; }
.pane { position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; max-width: 420px; }
.pane h2 { font-size: clamp(36px, 9vw, 72px); line-height: 1; }
.pane p { margin: 8px 0 14px; color: var(--muted); }
.sj .story { height: 100vh; height: 100svh; }
.sj .story .pin { position: relative; height: 100%; overflow: hidden; }
.sj .story .pin::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; z-index: 2; }
.sj .story .step { position: absolute; inset: 0; min-height: 0; opacity: 0; pointer-events: none; }   /* not visibility:hidden, so Tab can still reach every link */
.sj .story .step:first-child { opacity: 1; }