/* home.css */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.home-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 56px);
}

.brand-logo { height: 34px; width: auto; }
[data-theme="light"] .brand-logo { content: url("https://img.photozonegraphy.com/assets/dark_logo.png"); }

.theme-switcher { display: flex; gap: 10px; }
.theme-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.theme-dot:hover { transform: scale(1.12); }
.theme-dot--dark { background: #14171C; }
.theme-dot--light { background: #F6F5F2; }
.theme-dot--red { background: #E23E57; }
.theme-dot[aria-pressed="true"] { border-color: var(--accent); }

.home-main {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px 64px;
}

/* Signature: three dots that pulse in sequence, like a live-signal indicator
   before a call connects. Echoes throughout in-room UI (connection status). */
.signal-mark {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.signal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.signal-dot:nth-child(2) { animation-delay: 0.2s; }
.signal-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.home-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.home-title-accent { color: var(--accent); font-style: italic; }

.home-tagline {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 0 40px;
}

.home-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.home-footnote {
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.7;
}

@media (max-width: 480px) {
  .home-actions { flex-direction: column; width: 100%; max-width: 320px; }
  .home-actions .btn { width: 100%; justify-content: center; }
}