/* ============================================================
   Agenda Clocks — ar.css
   AR Experience page styles (mobile-first, full-screen)
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brown-dark: #1a0f08;
  --brown:      #382E27;
  --gold:       #C8A96E;
  --gold-glow:  rgba(200,169,110,0.3);
  --white:      #ffffff;
  --font:       'Montserrat', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden; background: transparent;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hidden { display: none !important; }

/* ══════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════ */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #0d0602 0%, #1a0f08 40%, #2a1a0e 100%);
  display: flex; align-items: center; justify-content: center;
}
.loading-content {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 40px 32px; text-align: center;
}
.loading-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font); font-size: 22px; font-weight: 800; color: var(--white);
}
.loading-brand-icon { font-size: 28px; }
.loading-brand-accent { color: var(--gold); }

/* Animated scanner circle */
.loading-scanner {
  position: relative; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.scanner-ring {
  position: absolute; border-radius: 50%; border: 2px solid transparent;
  animation: scanner-spin 1.5s linear infinite;
}
.scanner-ring-1 {
  inset: 0;
  border-top-color: var(--gold);
  border-right-color: rgba(200,169,110,0.3);
}
.scanner-ring-2 {
  inset: 12px;
  border-bottom-color: var(--gold);
  border-left-color: rgba(200,169,110,0.2);
  animation-direction: reverse;
  animation-duration: 2s;
}
@keyframes scanner-spin { to { transform: rotate(360deg); } }
.scanner-dot {
  width: 10px; height: 10px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 16px var(--gold);
  animation: dot-pulse 1.5s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.6} }

.loading-text { color: var(--white); font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }
.loading-sub  { color: rgba(255,255,255,0.45); font-size: 13px; line-height: 1.6; max-width: 260px; }

/* Animated dots */
.dots span {
  display: inline-block;
  animation: dot-blink 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 0%,100%{opacity:0.2} 50%{opacity:1} }

/* ══════════════════════════════════════════
   PERMISSION SCREEN
══════════════════════════════════════════ */
#permission-screen {
  position: fixed; inset: 0; z-index: 9998;
  background: linear-gradient(160deg, #0d0602 0%, #1a0f08 100%);
  display: flex; align-items: center; justify-content: center;
}
.permission-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 24px; padding: 40px 32px; max-width: 380px;
}
.permission-icon-wrap {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(200,169,110,0.1); border: 2px solid rgba(200,169,110,0.3);
  display: flex; align-items: center; justify-content: center;
  animation: permission-pulse 2s ease-in-out infinite;
}
@keyframes permission-pulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
  50%    { box-shadow: 0 0 0 20px rgba(200,169,110,0); }
}
.permission-icon-wrap svg { width: 44px; height: 44px; color: var(--gold); }
.permission-content h2 { color: var(--white); font-size: 24px; font-weight: 700; }
.permission-content p { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.7; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 40px; background: var(--gold); color: var(--brown);
  border: none; border-radius: 50px; font-family: var(--font);
  font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px;
  transition: all 0.2s; -webkit-appearance: none;
  box-shadow: 0 8px 24px rgba(200,169,110,0.35);
}
.btn-primary:active { transform: scale(0.97); background: #b8974e; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 32px; background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: 50px;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-secondary:active { border-color: var(--gold); color: var(--gold); }

/* ══════════════════════════════════════════
   SCAN OVERLAY — shown while waiting for detection
══════════════════════════════════════════ */
#scan-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  pointer-events: none;
}

/* Top header bar */
.scan-header {
  padding: 20px 20px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  display: flex; align-items: center; justify-content: space-between;
}
.scan-header-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--white);
}
.scan-header-icon { font-size: 20px; }
.scan-header-accent { color: var(--gold); }
.scan-header-status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: rgba(0,0,0,0.5); border-radius: 50px;
  font-size: 12px; font-weight: 600; color: var(--white);
  border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);
}
.status-dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; animation: dot-blink 1.5s ease-in-out infinite; }

/* Center scanner viewfinder */
.scan-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px;
}
.scan-viewfinder {
  position: relative; width: min(72vw, 300px); height: min(72vw, 300px);
}
.vf-corner {
  position: absolute; width: 32px; height: 32px;
  border-color: var(--gold); border-style: solid;
  transition: all 0.3s;
}
.vf-corner.tl { top: 0; left: 0;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.vf-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.vf-corner.bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.vf-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

/* Animated scan line */
.vf-scanline {
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(200,169,110,0.4);
  animation: scanline-move 2.5s ease-in-out infinite;
}
@keyframes scanline-move {
  0%   { top: 8px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}

/* Pulse glow inside viewfinder */
.vf-pulse {
  position: absolute; inset: 20px; border-radius: 8px;
  background: rgba(200,169,110,0.04);
  animation: vf-pulse 2s ease-in-out infinite;
}
@keyframes vf-pulse { 0%,100%{opacity:0.3} 50%{opacity:0.8} }

/* Outer ripple rings */
.vf-ring {
  position: absolute; inset: -20px; border-radius: 12px;
  border: 1.5px solid rgba(200,169,110,0.25);
  animation: vf-ring-pulse 2.5s ease-out infinite;
}
.vf-ring-2 { inset: -40px; animation-delay: 0.8s; border-color: rgba(200,169,110,0.12); }

@keyframes vf-ring-pulse {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 0; }
}

.scan-instruction {
  text-align: center; color: var(--white);
  font-size: 18px; font-weight: 600; letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.scan-instruction strong { color: var(--gold); }

/* Bottom footer bar */
.scan-footer {
  padding: 0 20px 32px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.scan-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,0.55); font-size: 13px;
}
.scan-hint svg { flex-shrink: 0; }

/* ══════════════════════════════════════════
   AR ACTIVE BADGE (shown when clock detected)
══════════════════════════════════════════ */
#found-overlay {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 400; pointer-events: none;
}
.found-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(12px);
  border: 1px solid rgba(200,169,110,0.3); border-radius: 50px;
  padding: 10px 22px; color: var(--white); font-size: 14px; font-weight: 600;
  animation: badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badge-pop { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }
.found-badge-dot {
  width: 9px; height: 9px; background: #4ade80; border-radius: 50%;
  box-shadow: 0 0 10px #4ade80;
  animation: dot-blink 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   LOST OVERLAY (clock left frame)
══════════════════════════════════════════ */
#lost-overlay {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);
  z-index: 400; pointer-events: none;
}
.lost-pill {
  background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 50px;
  padding: 12px 28px; color: var(--white); font-size: 14px; font-weight: 500;
  white-space: nowrap; animation: slide-up 0.3s ease;
}
@keyframes slide-up { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ══════════════════════════════════════════
   TAP-TO-PLAY OVERLAY
══════════════════════════════════════════ */
#tap-to-play {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
}
.tap-card {
  background: rgba(26,15,8,0.95); border: 1.5px solid var(--gold);
  border-radius: 20px; padding: 36px 44px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px var(--gold-glow);
  animation: tap-card-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes tap-card-in { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.tap-play-icon {
  width: 72px; height: 72px; background: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; cursor: pointer;
  box-shadow: 0 0 32px var(--gold-glow);
  animation: play-pulse 1.5s ease-in-out infinite;
}
@keyframes play-pulse { 0%,100%{box-shadow:0 0 20px var(--gold-glow)} 50%{box-shadow:0 0 40px rgba(200,169,110,0.5)} }
.tap-play-icon svg { width: 28px; height: 28px; color: var(--brown); margin-left: 4px; }
.tap-card h3 { color: var(--white); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.tap-card p { color: rgba(255,255,255,0.55); font-size: 14px; }

/* ══════════════════════════════════════════
   UNSUPPORTED SCREEN
══════════════════════════════════════════ */
#unsupported-screen {
  position: fixed; inset: 0; z-index: 9997;
  background: linear-gradient(160deg, #0d0602 0%, #1a0f08 100%);
  display: flex; align-items: center; justify-content: center;
}
.unsupported-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px; padding: 40px 32px; max-width: 360px;
}
.unsupported-emoji { font-size: 64px; }
.unsupported-content h2 { color: var(--white); font-size: 24px; font-weight: 700; }
.unsupported-content p { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.7; }
.unsupported-content strong { color: var(--gold); }

/* Removed a-scene rules */