/*
 * ════════════════════════════════════════════════════════════
 *  Layout door — ART au féminin
 *  Chargé par : layouts/door.html.erb
 *  Utilisé par : porte#index (page d'entrée 3D)
 * ════════════════════════════════════════════════════════════
 */

body {
  background: var(--color-surface-container);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

#hint {
  position: fixed;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-4) var(--space-6);
  text-align: center;
  /* Glassmorphism (design.md): the caption floats over the door */
  background: rgba(var(--color-surface-rgb), 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

/* Page H1: names the site for visitors and search engines without covering the door */
.door-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-on-surface-variant);
}

.door-cta {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  color: var(--color-on-surface-muted);
  text-transform: uppercase;
  animation: hint-pulse 3s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .door-cta { animation: none; opacity: 1; }
}