/* Inner Lodge: polish layer (lounge artwork, firelight, lantern pointer light, scroll reveals).
   Everything here is decoration: it is switched off for reduced motion and nothing depends on it. */

/* ---- firelight and window light over the artwork -------------------------------------------------------------- */
.lodge-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.lodge-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(34px); }
.lodge-glow .fire { left: -4%; top: 34%; width: 24%; height: 38%; background: radial-gradient(closest-side, rgba(255, 150, 60, .36), rgba(255, 110, 30, .12) 55%, transparent 100%); animation: flicker 5.2s steps(1, end) infinite; }
.lodge-glow .lamp { left: 4%; top: 18%; width: 20%; height: 36%; background: radial-gradient(closest-side, rgba(255, 196, 120, .34), rgba(255, 170, 80, .1) 60%, transparent 100%); animation: flicker 7.3s steps(1, end) -2s infinite; }
.lodge-glow .window { right: -4%; top: 4%; width: 28%; height: 62%; background: radial-gradient(closest-side, rgba(150, 175, 235, .34), rgba(120, 150, 215, .1) 60%, transparent 100%); animation: windowBreath 14s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { opacity: .85; transform: scale(1); }
  11% { opacity: 1; transform: scale(1.04); }
  23% { opacity: .72; transform: scale(.98); }
  37% { opacity: .95; transform: scale(1.02); }
  52% { opacity: .78; transform: scale(1); }
  66% { opacity: 1; transform: scale(1.05); }
  81% { opacity: .8; transform: scale(.99); }
}
@keyframes windowBreath { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ---- lantern: a warm light that follows the pointer across the room ------------------------------------------- */
.hero { --mx: 50%; --my: 55%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(260px 260px at var(--mx) var(--my), rgba(255, 205, 140, .16), rgba(255, 180, 100, .05) 55%, transparent 100%);
  mix-blend-mode: screen;
}
.hero.lantern-on::after { opacity: 1; }

/* ---- the opening: the headline settles out of a blur, the rest follows -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-content h1 { animation: titleIn 1.5s var(--ease-out, cubic-bezier(.23, 1, .32, 1)) .15s both; }
  .hero-content p { animation: fadeUp 1.1s var(--ease-out, cubic-bezier(.23, 1, .32, 1)) .75s both; }
  .hero-invitation { animation: fadeUp 1.1s var(--ease-out, cubic-bezier(.23, 1, .32, 1)) 1.05s both; }
  .hero-foot { animation: fadeUp 1.2s ease 1.5s both; }
  .hero-scene > img { animation: roomIn 2.4s var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both; }
}
@keyframes titleIn { from { opacity: 0; filter: blur(14px); letter-spacing: .02em; transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes roomIn { from { opacity: 0; filter: brightness(.55) blur(6px); } to { opacity: 1; filter: none; } }

/* ---- scroll reveals ----------------------------------------------------------------------------------------- */
.js-polish .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.23, 1, .32, 1) var(--rv-d, 0ms), transform 1s cubic-bezier(.23, 1, .32, 1) var(--rv-d, 0ms); }
.js-polish .rv.rv-in { opacity: 1; transform: none; }
.js-polish .rv-line { transform-origin: left center; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.23, 1, .32, 1) var(--rv-d, 0ms); }
.js-polish .rv-line.rv-in { transform: scaleX(1); }

/* ---- buttons: a slow light passes over the cream button --------------------------------------------------- */
.button-light { position: relative; overflow: hidden; }
.button-light::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-light:hover::after { animation: sheen .9s cubic-bezier(.23, 1, .32, 1); }
}
@keyframes sheen { from { left: -60%; } to { left: 130%; } }

/* ---- small movements ---------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .quote-seal svg { animation: sealTurn 60s linear infinite; }
  .quality { transition: transform .35s cubic-bezier(.23, 1, .32, 1), color 180ms ease; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .quality:hover { transform: translateX(6px); }
}
@keyframes sealTurn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lodge-glow, .hero::after { display: none; }
  .js-polish .rv, .js-polish .rv-line { opacity: 1; transform: none; transition: none; }
}

/* ---- invitation: the dark wall of the room sits behind the words, the furniture frames them ----------------- */
.invitation-art img { object-position: 50% 24%; }
.invitation-content { position: relative; }
.invitation-content::before {
  content: ""; position: absolute; z-index: -1; inset: -70px -140px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 11, 16, .74), rgba(6, 11, 16, .4) 60%, transparent 100%);
}

/* ---- rounded buttons -------------------------------------------------------------------------------------- */
.button, .motion-toggle { border-radius: 999px; }
.button { padding-left: 32px; padding-right: 26px; }
.button svg { flex: none; }

/* ---- "The door is open." on one line (it wraps only on very narrow screens) ------------------------------- */
.invitation-content h2 { white-space: nowrap; }
@media (max-width: 760px) { .invitation-content h2 { font-size: 11.4vw; } }

/* "What the circle holds." stays on one line, sized down on narrow screens so it still fits */
.circle-heading h2{white-space:nowrap}
@media(max-width:1100px){.circle-heading h2{font-size:clamp(30px,6.2vw,56px)}}
@media(max-width:700px){.circle-heading h2{font-size:clamp(26px,8.4vw,48px)}}

/* ---- 2026-11-11 owner: a smoother hand-off from the hero to the paper section ---------------------------------- */
/* The room now dissolves into the night colour over its last third instead of stopping on a hard line, and the
   lantern fades out towards the same edge, so the light never cuts off on a straight line. */
.hero-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 20, 0) 0%, rgba(8, 14, 20, .35) 35%, rgba(8, 14, 20, .78) 70%, #080e14 100%);
}
.hero::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  background: radial-gradient(320px 320px at var(--mx) var(--my), rgba(255, 205, 140, .15), rgba(255, 180, 100, .05) 50%, transparent 72%);
  transition: opacity .6s cubic-bezier(.23, 1, .32, 1);
}