/* =============================================
   PANEL ANIMATIONS - Premium Animated Illustrations
   ============================================== */

/* Base animation container */
.panel-animation {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  perspective: 1000px;
}

/* =============================================
   SHARED UI CARD STYLES
   ============================================== */
.ui-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* =============================================
   1. SMART CHECK-IN - Clean Form UI (No Card)
   ============================================== */
.checkin-animation {
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.checkin-field {
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  animation: fieldSlideIn 0.5s ease forwards;
}

/* Phase 1: All fields appear (0-1.2s) */
.checkin-field:nth-child(1) { animation-delay: 0.1s; }
.checkin-field:nth-child(2) { animation-delay: 0.3s; }
.checkin-field:nth-child(3) { animation-delay: 0.5s; }
.checkin-field:nth-child(4) { animation-delay: 0.7s; }

.checkin-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  display: block;
}

.checkin-input {
  width: 100%;
  height: 46px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.checkin-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(21, 183, 159, 0.12) 0%, rgba(21, 183, 159, 0.04) 100%);
  animation: inputFill 0.6s ease forwards;
}

/* Phase 2: Values fill in (1.5s - 4s) */
.checkin-field:nth-child(1) .checkin-input::before { animation-delay: 1.5s; }
.checkin-field:nth-child(2) .checkin-input::before { animation-delay: 2.3s; }
.checkin-field:nth-child(3) .checkin-input::before { animation-delay: 3.1s; }

.checkin-input-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: textFadeIn 0.4s ease forwards;
}

.checkin-field:nth-child(1) .checkin-input-text { animation-delay: 1.7s; }
.checkin-field:nth-child(2) .checkin-input-text { animation-delay: 2.5s; }
.checkin-field:nth-child(3) .checkin-input-text { animation-delay: 3.3s; }

.checkin-input-icon {
  margin-left: auto;
  width: 20px;
  height: 20px;
  background: var(--kepple-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  animation: checkPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  position: relative;
  z-index: 1;
}

.checkin-field:nth-child(1) .checkin-input-icon { animation-delay: 2.0s; }
.checkin-field:nth-child(2) .checkin-input-icon { animation-delay: 2.8s; }
.checkin-field:nth-child(3) .checkin-input-icon { animation-delay: 3.6s; }

.checkin-input-icon svg {
  width: 12px;
  height: 12px;
  fill: white;
}

/* Document Upload Field */
.checkin-upload {
  width: 100%;
  height: 54px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  box-sizing: border-box;
}

.checkin-upload-icon {
  width: 28px;
  height: 28px;
  background: rgba(21, 183, 159, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkin-upload-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--kepple-400);
}

.checkin-upload-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.checkin-upload-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  opacity: 0;
  animation: textFadeIn 0.4s ease forwards 4.0s;
}

/* Status row - contains both progress bar and verified text in same space */
.checkin-upload-status-row {
  height: 16px;
  position: relative;
  margin-top: 6px;
}

/* Phase 3: Document loading (4.2s - 6.5s) */
.checkin-upload-progress {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: textFadeIn 0.3s ease forwards 4.3s, progressHide 0.3s ease forwards 6.0s;
}

.checkin-upload-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--kepple-500), var(--kepple-400));
  border-radius: 2px;
  animation: progressFill 1.5s ease forwards 4.5s;
}

@keyframes progressHide {
  to { opacity: 0; }
}

.checkin-upload-status {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--kepple-400);
  opacity: 0;
  animation: textFadeIn 0.3s ease forwards 6.1s;
}

.checkin-upload-status svg {
  width: 12px;
  height: 12px;
  fill: var(--kepple-400);
}

.checkin-upload-check {
  width: 20px;
  height: 20px;
  background: var(--kepple-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  animation: checkPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 6.1s;
  margin-left: auto;
  flex-shrink: 0;
}

.checkin-upload-check svg {
  width: 12px;
  height: 12px;
  fill: white;
}

@keyframes progressFill {
  0% { width: 0; }
  100% { width: 100%; }
}

.checkin-submit {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--kepple-500) 0%, var(--kepple-600) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  box-shadow: 0 6px 20px rgba(21, 183, 159, 0.25);
  opacity: 0;
  transform: translateY(10px);
  animation: buttonSlideIn 0.5s ease 0.9s forwards;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.checkin-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s ease-in-out 6.5s infinite;
}

@keyframes fieldSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes inputFill {
  to { width: 100%; }
}

@keyframes textFadeIn {
  to { opacity: 1; }
}

@keyframes checkPop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes buttonSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* =============================================
   2. REMOTE ACCESS - Smart Lock Interface
   ============================================== */
.access-animation {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* Left side: Lock Interface */
.access-interface {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Right side: Gate Visualization */
.access-gate-visual {
  width: 140px;
  height: 200px;
  position: relative;
  opacity: 0;
}

.access-animation.animate .access-gate-visual {
  animation: fieldSlideIn 0.5s ease forwards 0.5s;
}

/* Gate frame */
.access-gate-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

/* Gate doors container */
.access-gate-doors {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  border-radius: 4px;
}

/* Individual gate doors */
.access-gate-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.access-gate-door.left {
  left: 0;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.access-gate-door.right {
  right: 0;
  border-left: none;
  border-radius: 0 4px 4px 0;
}

/* Door handles */
.access-gate-door::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  transform: translateY(-50%);
}

.access-gate-door.left::after {
  right: 8px;
}

.access-gate-door.right::after {
  left: 8px;
}

/* Gate lock indicator */
.access-gate-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.5s ease;
}

.access-gate-lock svg {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.access-gate-lock .icon-locked {
  opacity: 1;
}

.access-gate-lock .icon-unlocked {
  opacity: 0;
}

.access-gate-visual.unlocked .access-gate-lock .icon-locked {
  opacity: 0;
}

.access-gate-visual.unlocked .access-gate-lock .icon-unlocked {
  opacity: 1;
  fill: white;
}

/* Gate label */
.access-gate-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Unlocked state - doors open */
.access-gate-visual.unlocked .access-gate-door.left {
  transform: translateX(-95%);
}

.access-gate-visual.unlocked .access-gate-door.right {
  transform: translateX(95%);
}

.access-gate-visual.unlocked .access-gate-lock {
  background: linear-gradient(135deg, var(--kepple-500) 0%, var(--kepple-600) 100%);
  border-color: var(--kepple-400);
  box-shadow: 0 4px 15px rgba(21, 183, 159, 0.4);
}

.access-gate-visual.unlocked .access-gate-lock svg {
  fill: white;
}

/* Unlocking state - pulse on gate lock */
.access-gate-visual.unlocking .access-gate-lock {
  border-color: var(--kepple-500);
  animation: gateLockPulse 1s ease-in-out infinite;
}

@keyframes gateLockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 183, 159, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(21, 183, 159, 0); }
}

/* Signal flowing from button to gate */
.access-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  align-self: center;
  margin-top: -10px; /* Align with center of gate */
  margin-left: -20px; /* Center horizontally between button and gate */
}

.access-animation.animate .access-signal {
  animation: fieldSlideIn 0.5s ease forwards 0.6s;
}

.access-signal-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Ready state - subtle idle pulse */
.access-animation.animate .access-signal-dot {
  animation: signalIdle 2s ease-in-out infinite;
}

.access-animation.animate .access-signal-dot:nth-child(1) {
  animation-delay: 0s;
}

.access-animation.animate .access-signal-dot:nth-child(2) {
  animation-delay: 0.3s;
}

.access-animation.animate .access-signal-dot:nth-child(3) {
  animation-delay: 0.6s;
}

/* Unlocking state - active flowing animation */
.access-animation.unlocking .access-signal-dot {
  background: var(--kepple-500);
  box-shadow: 0 0 10px var(--kepple-400);
  animation: signalFlow 0.8s ease-in-out infinite;
}

.access-animation.unlocking .access-signal-dot:nth-child(1) {
  animation-delay: 0s;
}

.access-animation.unlocking .access-signal-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.access-animation.unlocking .access-signal-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* Access granted state - solid green */
.access-animation.granted .access-signal-dot {
  background: var(--kepple-400);
  box-shadow: 0 0 8px var(--kepple-400);
  animation: none;
}

@keyframes signalIdle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.6;
    transform: scale(1);
  }
}

@keyframes signalFlow {
  0% {
    opacity: 0.3;
    transform: scale(0.6) translateX(-5px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) translateX(0);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.6) translateX(5px);
  }
}

/* Property Info Header */
.access-header {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
}

.access-animation.animate .access-header {
  animation: fieldSlideIn 0.5s ease forwards 0.2s;
}

.access-property {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.access-gate-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Lock Button Container */
.access-lock-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
}

.access-animation.animate .access-lock-container {
  animation: fieldSlideIn 0.5s ease forwards 0.4s;
}

/* Pulse rings around lock button - triggered when connecting */
.access-pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--kepple-500);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.access-lock-container.unlocking .access-pulse-ring:nth-child(1) {
  animation: pulseRing 1.2s ease-out forwards;
}

.access-lock-container.unlocking .access-pulse-ring:nth-child(2) {
  animation: pulseRing 1.2s ease-out 0.15s forwards;
}

/* Main lock button */
.access-lock-btn {
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.5s ease;
}

.access-lock-btn.unlocking {
  border-color: var(--kepple-500);
  background: rgba(21, 183, 159, 0.1);
  animation: btnPulse 1s ease-in-out infinite;
}

.access-lock-btn.unlocked {
  border-color: var(--kepple-400);
  background: linear-gradient(135deg, var(--kepple-500) 0%, var(--kepple-600) 100%);
  box-shadow: 0 8px 30px rgba(21, 183, 159, 0.4);
  animation: none;
}

/* Lock icon */
.access-lock-icon {
  position: relative;
  width: 36px;
  height: 36px;
}

.access-lock-icon svg {
  position: absolute;
  width: 36px;
  height: 36px;
  fill: rgba(255, 255, 255, 0.6);
  transition: all 0.4s ease;
}

.access-lock-icon .icon-locked {
  opacity: 1;
}

.access-lock-icon .icon-unlocked {
  opacity: 0;
  fill: white;
}

.access-lock-btn.unlocked .icon-locked {
  opacity: 0;
}

.access-lock-btn.unlocked .icon-unlocked {
  opacity: 1;
}

/* Status text */
.access-status-container {
  height: 24px;
  position: relative;
  opacity: 0;
}

.access-animation.animate .access-status-container {
  animation: fieldSlideIn 0.5s ease forwards 0.6s;
}

.access-status {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.access-status.ready {
  color: rgba(255, 255, 255, 0.5);
}

.access-status.unlocking {
  color: var(--kepple-400);
}

.access-status.granted {
  color: var(--kepple-400);
  display: flex;
  align-items: center;
  gap: 6px;
}

.access-status.granted svg {
  width: 14px;
  height: 14px;
  fill: var(--kepple-400);
}

.access-status.active {
  opacity: 1;
}

/* Tap hint */
.access-tap-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0;
}

.access-animation.animate .access-tap-hint {
  animation: fieldSlideIn 0.5s ease forwards 0.8s, fadeOutHint 0.3s ease forwards 3.3s;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes fadeOutHint {
  to { opacity: 0; }
}

/* =============================================
   3. GUEST SUPPORT - Chat Messages (No Card)
   ============================================== */
.support-animation {
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.support-message {
  display: flex;
  opacity: 0;
  animation: messageFadeIn 0.4s ease forwards;
}

/* Animation order (6 seconds total):
   1. Typing 1 (0.1s-0.8s)
   2. User msg 1 (0.9s)
   3. Bot reply 1 (1.2s) - immediate
   4. Typing 2 (2.0s-2.7s)
   5. User msg 2 (2.8s)
   6. Bot reply 2 (3.1s) - immediate
   7. View complete (3.1s-6.0s = ~3s viewing)
*/
.support-message:nth-child(2) { animation-delay: 0.9s; }   /* User: WiFi question */
.support-message:nth-child(3) { animation-delay: 1.2s; }   /* Bot: WiFi answer */
.support-message:nth-child(5) { animation-delay: 2.8s; }   /* User: Parking question */
.support-message:nth-child(6) { animation-delay: 3.1s; }   /* Bot: Parking answer */

.support-message.user {
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.support-message.bot {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.support-name {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.support-message.user .support-name {
  color: rgba(255, 255, 255, 0.5);
}

.support-message.bot .support-name {
  color: var(--kepple-400);
}

.support-bubble {
  max-width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 16px;
}

.support-message.user .support-bubble {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border-bottom-right-radius: 4px;
}

.support-message.bot .support-bubble {
  background: linear-gradient(135deg, var(--kepple-600) 0%, var(--kepple-700) 100%);
  color: white;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 12px rgba(21, 183, 159, 0.15);
}

@keyframes messageFadeIn {
  to { opacity: 1; }
}

/* Typing indicator wrapper - zero height to not affect layout */
.support-typing-wrapper {
  position: relative;
  height: 0;
  width: 100%;
  overflow: visible;
}

/* Typing indicator - positioned absolutely */
.support-typing {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  opacity: 0;
}

/* First typing indicator timing */
.support-typing-wrapper.first .support-typing {
  animation: typingFadeIn 0.3s ease forwards 0.1s, typingFadeOut 0.3s ease forwards 0.8s;
}

/* Second typing indicator timing */
.support-typing-wrapper.second .support-typing {
  animation: typingFadeIn 0.3s ease forwards 2.0s, typingFadeOut 0.3s ease forwards 2.7s;
}

.support-typing-dot {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: typingBounce 1s ease-in-out infinite;
}

.support-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.support-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingFadeIn {
  to { opacity: 1; }
}

@keyframes typingFadeOut {
  to { opacity: 0; }
}

@keyframes typingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* =============================================
   4. DOCUMENTS - Template to Doc Animation
   ============================================== */
.documents-animation {
  display: flex;
  align-items: center;
  gap: 30px;
}

.doc-card {
  width: 200px;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: docCardFadeIn 0.5s ease forwards;
  display: flex;
  flex-direction: column;
}

.doc-template {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  animation-delay: 0.2s;
  width: 220px;
}

.doc-output {
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation-delay: 0.6s;
  width: 220px;
}

.doc-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  display: inline-block;
}

.doc-template .doc-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.doc-output .doc-badge {
  background: rgba(21, 183, 159, 0.2);
  color: var(--kepple-400);
}

/* Document header lines */
.doc-header {
  margin-bottom: 16px;
}

.doc-line {
  height: 5px;
  border-radius: 3px;
  margin-bottom: 6px;
}

.doc-template .doc-line {
  background: rgba(255, 255, 255, 0.1);
}

.doc-output .doc-line {
  background: rgba(255, 255, 255, 0.15);
}

.doc-line.w-40 { width: 40%; }
.doc-line.w-70 { width: 70%; }
.doc-line.w-100 { width: 100%; }

/* Document fields container */
.doc-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.doc-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 60px;
  flex-shrink: 0;
}

.doc-value {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  flex: 1;
}

.doc-value.template {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.3);
  font-family: monospace;
}

.doc-value.filled {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 0;
  opacity: 0;
}

/* Staggered fill animation for output fields */
.doc-output .doc-field-row:nth-child(1) .doc-value.filled { animation: fieldFillIn 0.4s ease forwards 1.2s; }
.doc-output .doc-field-row:nth-child(2) .doc-value.filled { animation: fieldFillIn 0.4s ease forwards 1.5s; }
.doc-output .doc-field-row:nth-child(3) .doc-value.filled { animation: fieldFillIn 0.4s ease forwards 1.8s; }
.doc-output .doc-field-row:nth-child(4) .doc-value.filled { animation: fieldFillIn 0.4s ease forwards 2.1s; }
.doc-output .doc-field-row:nth-child(5) .doc-value.filled { animation: fieldFillIn 0.4s ease forwards 2.4s; }

/* Document footer */
.doc-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.doc-signature-placeholder {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-family: monospace;
  height: 26px;
  display: flex;
  align-items: center;
}

.doc-signature-drawn {
  width: 90px;
  height: 30px;
  position: relative;
}

/* Underscore line */
.doc-signature-drawn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--kepple-400);
  border-radius: 1px;
  animation: signatureUnderscore 0.5s ease forwards 2.8s;
}

/* SVG Signature */
.doc-signature-drawn .sig-wave {
  width: 80px;
  height: 24px;
  position: absolute;
  bottom: 4px;
  left: 0;
}

.doc-signature-drawn .sig-path {
  stroke: var(--kepple-400);
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: signatureWaveDraw 0.8s ease forwards 3.0s;
}

.doc-signature-drawn .sig-cross {
  stroke: var(--kepple-400);
  fill: none;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: signatureCrossDraw 0.5s ease forwards 3.6s;
}

.doc-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--kepple-500) 0%, var(--kepple-600) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  animation: checkAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 3.6s;
  box-shadow: 0 4px 12px rgba(21, 183, 159, 0.4);
}

.doc-check svg {
  width: 14px;
  height: 14px;
  fill: white;
}

/* Arrow between documents */
.doc-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: docCardFadeIn 0.4s ease forwards 0.4s;
  min-width: 80px;
}

.doc-arrow-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, rgba(21, 183, 159, 0.3), var(--kepple-400));
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.doc-arrow-line::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: arrowShine 1.2s ease-in-out infinite;
}

.doc-arrow-head {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--kepple-400);
}

.doc-arrow-text {
  font-size: 8px;
  color: var(--kepple-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
}

@keyframes docCardFadeIn {
  to { opacity: 1; }
}

@keyframes fieldFillIn {
  to { opacity: 1; }
}

@keyframes signatureUnderscore {
  to { width: 80px; }
}

@keyframes signatureWaveDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes signatureCrossDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes checkAppear {
  to { opacity: 1; transform: scale(1); }
}

@keyframes arrowShine {
  0% { left: -20px; }
  100% { left: 70px; }
}

/* =============================================
   5. CONTROL CENTER - Dashboard UI
   ============================================== */
.dashboard-animation {
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top Row */
.dash-top-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* Cards */
.dash-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  opacity: 0;
  animation: dashFadeIn 0.4s ease forwards;
}

.dash-card-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dash-card-sublabel {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
  margin-bottom: 14px;
}

/* Total Reservations Card */
.dash-total {
  flex: 1.2;
  animation-delay: 0.2s;
}

.dash-card-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 10px 0;
}

.dash-big-number {
  font-size: 42px;
  font-weight: 700;
  color: var(--kepple-400);
  line-height: 1;
}

.dash-mini-chart {
  width: 80px;
  height: 30px;
}

.dash-chart-line {
  stroke: var(--kepple-400);
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: dashLineGrow 1s ease forwards 0.8s;
}

.dash-chart-fill {
  fill: rgba(21, 183, 159, 0.15);
  opacity: 0;
  animation: dashFadeIn 0.5s ease forwards 1.2s;
}

.dash-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.dash-trend.up .dash-trend-arrow,
.dash-trend.up .dash-trend-value {
  color: var(--kepple-400);
}

.dash-trend-text {
  color: rgba(255, 255, 255, 0.4);
}

/* Check-in Progress Card */
.dash-progress {
  flex: 1;
  animation-delay: 0.35s;
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dash-progress-pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--kepple-400);
}

.dash-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.dash-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--kepple-500), var(--kepple-400));
  border-radius: 3px;
  animation: dashProgressGrow 1s ease forwards 0.8s;
}

.dash-progress-legend {
  display: flex;
  gap: 16px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.dash-progress-legend .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

.dash-progress-legend .dot.green { background: var(--kepple-400); }
.dash-progress-legend .dot.gray { background: rgba(255, 255, 255, 0.3); }

/* Property Activity Card */
.dash-activity {
  animation-delay: 0.5s;
  width: 100%;
}

/* Property Labels */
.dash-property-labels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dash-property-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-property-name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.dash-property-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Bars Group */
.dash-bars-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.dash-stacked-bar {
  height: 22px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.dash-bar-segment {
  height: 100%;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  animation: dashSegmentGrow 0.8s ease forwards;
}

.dash-stacked-bar.first .dash-bar-segment { animation-delay: 1.2s; }
.dash-stacked-bar.second .dash-bar-segment { animation-delay: 1.4s; }

.dash-bar-segment.green { background: var(--kepple-400); }
.dash-bar-segment.yellow { background: #fbbf24; }
.dash-bar-segment.pink { background: #f472b6; }

.dash-legend {
  display: flex;
  gap: 16px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

.dash-legend .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

.dash-legend .dot.green { background: var(--kepple-400); }
.dash-legend .dot.yellow { background: #fbbf24; }
.dash-legend .dot.pink { background: #f472b6; }

/* Dashboard Animations */
@keyframes dashFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashLineGrow {
  to { stroke-dashoffset: 0; }
}

@keyframes dashProgressGrow {
  to { width: 83%; }
}

@keyframes dashSegmentGrow {
  to { width: var(--width); }
}