/* =========================================================
   Cabine — Design System
   Shared tokens + motion vocabulary for the kiosk, booking
   and partner apps. "A cabin glowing warm at dusk."
   © pixelsoftwaredesign 2026
   ========================================================= */

.app-footer {
  text-align: center;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .4px;
  opacity: .75;
  padding: 18px 8px calc(10px + env(safe-area-inset-bottom));
}

:root {
  /* Palette */
  --bg: #10161a;
  --surface: #1a2228;
  --surface-2: #212b31;
  --border: #2b363d;
  --text: #eef3f1;
  --muted: #8fa2a9;

  --ember: #f2a65a;
  --ember-dim: #c98548;
  --pine: #6bbf9c;
  --warn: #f4c078;
  --danger: #e8735f;

  --card: var(--surface);
  --card2: var(--surface-2);
  --accent: var(--ember);
  --ok: var(--pine);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);

  --ambient:
    radial-gradient(1100px 560px at 12% -8%, rgba(242,166,90,.10), transparent 60%),
    radial-gradient(800px 480px at 100% 112%, rgba(107,191,156,.07), transparent 55%);

  --ambient-warm:
    radial-gradient(1100px 560px at 12% -8%, rgba(242,166,90,.18), transparent 60%),
    radial-gradient(800px 480px at 100% 112%, rgba(107,191,156,.04), transparent 55%);

  --ambient-cool:
    radial-gradient(1100px 560px at 12% -8%, rgba(242,166,90,.04), transparent 60%),
    radial-gradient(800px 480px at 100% 112%, rgba(107,191,156,.14), transparent 55%);
}

.card-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(242,166,90,.09), rgba(242,166,90,0) 55%), var(--surface);
  border: 1px solid rgba(242,166,90,.22);
}

* { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* ---------- Press feedback ---------- */
.btn, .device, .slot, .tab, .key, .cabin.clickable, .product button, .nav button {
  transition: transform .12s var(--ease-out), background-color .2s, box-shadow .2s, opacity .2s, color .2s;
}
.btn:active, .device:active, .slot.available:active, .key:active, .cabin.clickable:active {
  transform: scale(.95);
}

/* ---------- Stagger entrance ---------- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-in > * { animation: fadeSlideUp .5s var(--ease-out) both; }
.stagger-in > *:nth-child(1) { animation-delay: .03s; }
.stagger-in > *:nth-child(2) { animation-delay: .07s; }
.stagger-in > *:nth-child(3) { animation-delay: .11s; }
.stagger-in > *:nth-child(4) { animation-delay: .15s; }
.stagger-in > *:nth-child(5) { animation-delay: .19s; }
.stagger-in > *:nth-child(6) { animation-delay: .23s; }
.stagger-in > *:nth-child(n+7) { animation-delay: .27s; }

/* ---------- View transitions ---------- */
.view-enter { animation: fadeSlideUp .35s var(--ease-out) both; }

/* ---------- Pop / confirm ---------- */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.72); }
  65%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pop-in { animation: popIn .5s var(--ease-spring) both; }

@keyframes glowWash {
  from { box-shadow: 0 0 0 0 rgba(242,166,90,.45); }
  to   { box-shadow: 0 0 0 48px rgba(242,166,90,0); }
}
.glow-wash { animation: glowWash 1.2s var(--ease-out) both; }

/* ---------- Breathing / listening ---------- */
@keyframes breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(242,166,90,.4); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(242,166,90,0); }
}
.breathing { animation: breathe 1.7s ease-in-out infinite; }

/* ---------- Urgency ---------- */
@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.urgent { color: var(--danger) !important; animation: urgentPulse .8s ease-in-out infinite; }

/* ---------- Shake ---------- */
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.shake { animation: shake .45s; }

/* ---------- Skeleton ---------- */
@keyframes shimmer {
  0%   { background-position: -220px 0; }
  100% { background-position: 220px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 420px 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: 14px;
}

/* =========================================================
   Intelligent Animations — new utilities
   ========================================================= */

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* --- Data pulse — flash when MQTT data arrives --- */
@keyframes dataPulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,191,156,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(107,191,156,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,191,156,0); }
}
.data-pulse { animation: dataPulse .6s var(--ease-out); }

/* --- Live dot --- */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pine);
  display: inline-block;
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(107,191,156,.35);
  animation: livePing 1.8s ease-out infinite;
}
@keyframes livePing {
  0%   { transform: scale(.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.live-dot.offline { background: var(--danger); }
.live-dot.offline::after { background: rgba(232,115,95,.3); }

/* --- Button ripple --- */
.btn, .key, .device, .slot.available {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: scale(0);
  animation: rippleExpand .5s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(3); opacity: 0; }
}

/* --- Smooth number transition --- */
.smooth-num {
  display: inline-block;
  transition: transform .3s var(--ease-spring), opacity .2s;
}
.smooth-num.changing {
  transform: translateY(-3px);
  opacity: .6;
}

/* --- Notification slide --- */
@keyframes notifSlideIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes notifSlideOut {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to   { transform: translateX(-50%) translateY(20px); opacity: 0; }
}
.toast.show { animation: notifSlideIn .35s var(--ease-spring) both; }
.toast.hiding { animation: notifSlideOut .25s var(--ease-smooth) both; }

/* --- Countdown ring (SVG-based, driven by JS) --- */
.countdown-ring {
  transform: rotate(-90deg);
}
.countdown-ring circle {
  transition: stroke-dashoffset .9s var(--ease-smooth);
}

/* --- Ambient shift by temperature --- */
body.ambient-warm { background: var(--ambient-warm), var(--bg); }
body.ambient-cool { background: var(--ambient-cool), var(--bg); }
body { transition: background 1.5s var(--ease-smooth); }

/* --- Float idle --- */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.float { animation: gentleFloat 3s ease-in-out infinite; }

/* --- Typing indicator --- */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.typing-dot:nth-child(1) { animation: typingDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation: typingDot 1.2s ease-in-out .15s infinite; }
.typing-dot:nth-child(3) { animation: typingDot 1.2s ease-in-out .3s infinite; }

/* --- Slide directions --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-in-left  { animation: slideInLeft  .4s var(--ease-out) both; }
.slide-in-right { animation: slideInRight .4s var(--ease-out) both; }
.slide-in-up    { animation: slideInUp   .4s var(--ease-out) both; }

/* --- Scale reveal --- */
@keyframes scaleReveal {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.scale-reveal { animation: scaleReveal .35s var(--ease-out) both; }

/* --- Success flash --- */
@keyframes successFlash {
  0%   { background-color: rgba(107,191,156,.2); }
  100% { background-color: transparent; }
}
.success-flash { animation: successFlash .8s var(--ease-out); }

/* --- Connection bar --- */
@keyframes connectionPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.conn-bar {
  height: 2px;
  background: var(--pine);
  animation: connectionPulse 2s ease-in-out infinite;
}
.conn-bar.offline { background: var(--danger); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}