/* The landing's footer-finish.css, scoped to the final animated panel. */
#booking-start { scroll-margin-block-start: var(--reservation-header-offset); }

/* Normal flow is the default, including reduced motion and short screens. */
.cinematic-footer-wrapper {
  --sand: #eee8df;
  --page-gutter: clamp(24px, 5.5vw, 88px);
  --footer-height: max(560px, 100svh);
  position: relative;
  height: var(--footer-height);
  background: var(--sand);
  color: #403426;
}
.cinematic-footer-surface {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Preserve the approved logo/button placement after removing the copyright row. */
  padding: 100px var(--page-gutter) 59px;
  background: var(--sand);
  /* Decorative overflow must not become an internally scrollable focus area. */
  overflow: clip;
  isolation: isolate;
}
.cinematic-footer-wrapper.is-revealing { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.is-revealing .cinematic-footer-surface { position: fixed; inset: auto 0 0; height: var(--footer-height); }

.footer-aurora {
  position: absolute;
  z-index: -2;
  left: 50%; top: 48%;
  width: min(1100px, 110vw); height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #deb45466 0%, #f8e3ad70 35%, #fff9e738 55%, transparent 73%);
  filter: blur(50px);
  transform: translate(-50%, -50%);
  animation: footer-breathe 8s cubic-bezier(.77, 0, .175, 1) infinite alternate paused;
  pointer-events: none;
}
.footer-giant-position { position: absolute; z-index: -1; bottom: -2.5vw; left: 50%; transform: translateX(-50%); pointer-events: none; user-select: none; }
.footer-giant-bg-text {
  font-size: 23.5vw; font-weight: 600; line-height: .8; letter-spacing: -.06em; white-space: nowrap;
  /* Compensate trailing negative tracking so the gradient includes the Y's tip. */
  padding-inline-end: .06em;
  color: transparent;
  background: linear-gradient(180deg, #886b3b1f, transparent 75%);
  background-clip: text;
  -webkit-background-clip: text;
}
.cinematic-footer-content { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1050px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 60px; }
.cinematic-footer-content .footer-signature { width: 100%; padding: 0; margin: 0; border-radius: 0; background: transparent; }
.footer-logo { display: block; width: 100%; max-width: 760px; margin-inline: auto; }
.footer-logo-media { position: relative; display: block; aspect-ratio: 3; overflow: hidden; }
.footer-logo-media img, .footer-logo-media .logo-signature-light { display: block; width: 100%; height: 100%; object-fit: contain; }
.cinematic-footer-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.footer-pill-wrap { display: inline-flex; }
.footer-glass-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px; border-radius: 999px;
  color: #59462b; font-size: 11px; font-weight: 500; text-decoration: none; white-space: nowrap;
  background: linear-gradient(145deg, #fffaf06e, #d2be951a);
  border: 1px solid #93774740;
  box-shadow: 0 10px 30px -14px #68552d4d, inset 0 1px 1px #fff9edcc, inset 0 -1px 2px #a1844e1a;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(.22,.61,.36,1), background-color 220ms cubic-bezier(.23,1,.32,1), border-color 220ms cubic-bezier(.23,1,.32,1), color 220ms cubic-bezier(.23,1,.32,1);
  cursor: pointer;
}
.footer-glass-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer-glass-pill:active { box-shadow: inset 0 2px 6px #6e573528; }
.footer-glass-pill:focus-visible { outline: 2px solid #715122; outline-offset: 4px; transform: none; transition: none; }
[data-cinematic-footer][data-active="true"] .footer-aurora { animation-play-state: running; }

@keyframes footer-breathe { from { transform: translate(-50%, -50%) scale(1); opacity: .6; } to { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
@media (min-width: 600px) {
  .cinematic-footer-wrapper { --footer-height: max(700px, 100svh); }
  .cinematic-footer-content { padding-bottom: 80px; }
  .footer-glass-pill { padding: 10px 18px; font-size: 12px; gap: 7px; }
}
@media (min-width: 1000px) {
  .cinematic-footer-surface { padding-bottom: 65px; }
}
@media (max-width: 599px) {
  /* A shorter mobile curtain brings the signature/actions closer to BEAUTY. */
  .cinematic-footer-wrapper { --footer-height: clamp(400px, 60svh, 560px); }
  .cinematic-footer-surface { padding-top: 64px; }
  .cinematic-footer-content { gap: 6px; padding-bottom: 0; }
}
@media (max-width: 359px) {
  .footer-glass-pill { padding-inline: 10px; font-size: 10px; gap: 6px; }
  .footer-glass-pill svg { width: 15px; height: 15px; }
  .cinematic-footer-actions { gap: 8px; }
}
@media (hover: hover) and (pointer: fine) {
  .footer-glass-pill:hover { color: #302419; background-color: #fff8e866; border-color: #9071437a; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .footer-glass-pill:hover:not(:focus-visible) { transform: scale(1.018); }
}
@media (prefers-reduced-motion: no-preference) {
  .footer-glass-pill:active:not(:focus-visible) { transform: scale(.985); transition-duration: 110ms; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo-media .logo-signature-light { display: none; }
  .footer-aurora { animation: none; }
  .footer-aurora { opacity: .65; }
  .footer-glass-pill { transition: none; }
}