/* retrofit.css — additive interactive systems for secondary pages.
   Scoped to resource-adoption components only (page transition, t-toast,
   t-modal, BrandedLoader, liquid-glass). No base/body/typography changes,
   so existing page layouts are untouched. Extracted from design-system.css. */

/* ---- t-toast (transitions.dev 22) — booking/contact transient confirmations ---- */
.t-toast-region {
  position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column;
  gap: .5rem; align-items: center; pointer-events: none; width: min(92vw, 26rem);
}
.t-toast {
  pointer-events: auto; display: flex; align-items: center; gap: .6rem;
  background: var(--ds-ink); color: var(--ds-bone);
  border: 1px solid rgba(245,242,236,.16); border-radius: 999px;
  padding: .65rem 1.1rem .65rem .8rem; font-size: .85rem; line-height: 1.35;
  box-shadow: 0 12px 40px rgba(11,11,12,.35); max-width: 100%;
  opacity: 0; transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur)); will-change: transform, opacity, filter;
  transition: opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
  transition: opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease);
}
.t-toast .t-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ds-gold-2); flex: none; }
.t-toast.is-err .t-dot { background: #c0564d; }

/* ---- t-modal (transitions.dev 06) — booking modal open/close ---- */
.t-modal {
  transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease);
}

/* ---- BFS page transition — personal variant: rise (page-transition.css) ---- */
.bfs-pt { position: relative; }
.bfs-pt-layer {
  animation-duration: var(--bfs-pt-dur, 200ms);
  animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both;
}
.bfs-pt--rise .bfs-pt-entering { animation-name: bfs-pt-rise-in; }
@keyframes bfs-pt-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* MPA page curtain: covers on exit, lifts on entrance (JS-driven) */
.pt-curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--ds-ink);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.pt-curtain::after {
  content: ""; width: min(12rem, 40vw); height: 2px; background: var(--ds-gold-2);
  transform: scaleX(0); transform-origin: left;
}
.pt-curtain.is-covering { pointer-events: all; animation: pt-cover 200ms cubic-bezier(.22,1,.36,1) forwards; }
.pt-curtain.is-covering::after { animation: pt-line 200ms cubic-bezier(.22,1,.36,1) forwards; }
.pt-curtain.is-lifting { animation: pt-lift 200ms cubic-bezier(.22,1,.36,1) forwards; }
@keyframes pt-cover { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pt-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pt-lift { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }

/* ---- BrandedLoader — personal: arcade pixel dots chase (branded-loader.css) ---- */
.bfs-loader { display: inline-flex; align-items: center; justify-content: center; }
.bfs-loader svg { display: block; overflow: visible; }
.bfs-loader--personal .bl-dot { animation: bl-chase 1.2s ease-in-out infinite; }
.bfs-loader--personal .bl-dot:nth-child(2) { animation-delay: .15s; }
.bfs-loader--personal .bl-dot:nth-child(3) { animation-delay: .3s; }
.bfs-loader--personal .bl-dot:nth-child(4) { animation-delay: .45s; }
@keyframes bl-chase {
  0%,100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ---- liquid brand-mark (liquid-logo adoption): SVG turbulence on the emblem ---- */
/* ---- liquid-glass surface (iOS 26 language) — floating CTA + booking modal ---- */
.liquid-glass {
  background: linear-gradient(135deg, rgba(245,242,236,.14), rgba(245,242,236,.05));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(245,242,236,.22);
  box-shadow: 0 8px 32px rgba(11,11,12,.18), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(11,11,12,.08);
  position: relative; overflow: hidden;
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 32%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background: rgba(20,20,22,.82); }
  .liquid-glass::before { display: none; }
}

/* ---- reduced motion: zero all adopted transitions (motion-spec static frame) ---- */
@media (prefers-reduced-motion: reduce) {
  .t-toast, .t-modal { transition: none !important; }
  .bfs-pt-layer { animation: none !important; }
  .pt-curtain { display: none !important; }
  .bfs-loader * { animation: none !important; }
  .bfs-loader--personal .bl-dot { opacity: 1; transform: none; }
}

/* ==========================================================================
   27. BATCH-3 ADOPTIONS — RHF validation pattern · Magic UI shimmer ·
   tailwindcss-animated utilities · Space Grotesk voice · icon grammar
   ========================================================================== */

/* ---- Space Grotesk voice: kickers, buttons, arcade labels ---- */

/* reduced motion for the retrofit systems */
@media (prefers-reduced-motion: reduce) {
  .t-toast, .t-modal { transition: none !important; }
  .pt-curtain { display: none !important; }
  .bfs-loader * { animation: none !important; }
  .bfs-loader--personal .bl-dot { opacity: 1; transform: none; }
}