/* ===========================
   Zone de saisie (page d'envoi)
   =========================== */
.swc-input-wrap { max-width: 720px; margin: 1rem auto; display: grid; gap: .75rem; }
.swc-label { font-weight: 600; }
.swc-textarea { width: 100%; min-height: 160px; padding: .75rem; font-size: 1rem; line-height: 1.5; }
.swc-btn-send { align-self: start; padding: .6rem 1rem; border: 0; cursor: pointer; border-radius: .5rem; }
.swc-hint { font-size: .9rem; opacity: .75; }

/* ===========================
   Scène du projecteur
   =========================== */
.swc-stage {
  position: relative;
  z-index: 5;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #0b0d16 0%, #000 60%);
  perspective: 600px;
  color: #ffe81f;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Dans une modale */
.hv-modal .swc-stage {
  height: 100%;
  min-height: 60vh;
}

/* étoiles */
.swc-stars, .swc-stars::after {
  position: absolute; inset: 0; content: "";
  background-image:
    radial-gradient(2px 2px at 5% 10%,   #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 12% 35%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 18% 78%,  #fff 55%, transparent 56%),
    radial-gradient(2px 2px at 25% 50%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 33% 22%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 40% 65%,  #fff 55%, transparent 56%),
    radial-gradient(2px 2px at 47% 15%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 55% 85%,  #fff 55%, transparent 56%),
    radial-gradient(2px 2px at 62% 40%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 70% 70%,  #fff 55%, transparent 56%),
    radial-gradient(2px 2px at 78% 30%,  #fff 55%, transparent 56%),
    radial-gradient(1px 1px at 86% 60%,  #fff 55%, transparent 56%),
    radial-gradient(2px 2px at 93% 85%,  #fff 55%, transparent 56%);
  opacity: .85;
  animation: swc-twinkle 6s linear infinite;
  z-index: 1;
}
.swc-stars::after { transform: scale(1.2); opacity: .6; }

/* Gradient : transparent en bas → noir en haut (masque le début du texte en bas) */
.swc-fade {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0)   0%,    /* bas : texte visible dès qu'il arrive */
    rgba(0,0,0,0)   55%,   /* milieu : texte bien visible */
    rgba(0,0,0,.85) 88%,   /* haut : fondu fort */
    #000            100%   /* sommet : noir total = texte disparaît */
  );
  pointer-events: none;
  z-index: 3;
}

/* ===========================
   Zone perspective
   =========================== */
.swc-crawl {
  position: absolute;
  bottom: 0;               /* texte ancré au bas de la scène */
  left: 50%;
  transform: translateX(-50%) rotateX(20deg);
  width: 52%;
  max-width: 520px;
  text-align: justify;
  letter-spacing: .02em;
  z-index: 2;
  overflow: hidden;
}

.swc-crawl-inner {
  position: relative;
  transform-origin: 50% 100%;
}

/* ===== Le TEXTE qui défile ===== */
.swc-crawl-content {
  font-weight: 700;
  line-height: 1.6;
  font-size: clamp(.85rem, 1.1vw + .6rem, 1.15rem);
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(255,232,31,.6);
  white-space: pre-wrap;
  display: block;
  padding: 0 .5rem 3rem;
  color: #ffe81f !important;
  transform-origin: 50% 100%;
  opacity: 0;
}

.swc-stage.swc-start .swc-crawl-content {
  animation: swc-crawl var(--swc-duration, 90s) linear forwards;
}

.swc-stage.swc-start {
  animation: swc-hide 1s ease forwards;
  animation-delay: calc(var(--swc-duration, 90s) + .5s);
}
@keyframes swc-hide { to { opacity: 0; visibility: hidden; } }

/* ===========================
   Animation principale
   La valeur 0% doit être suffisamment petite pour que le
   premier mot soit IMMÉDIATEMENT visible en bas de la scène.
   On utilise 100% = hauteur de .swc-crawl-content lui-même
   ce qui est ~0 au début (le texte est à sa position naturelle = bas de la scène)
   =========================== */
@keyframes swc-crawl {
  0% {
    /* translateY(100%) = pousse le contenu sous la scène
       → le premier mot remonte depuis le bas = CORRECT */
    transform: translateY(100%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-260%) scale(0.55);
    opacity: 0;
  }
}

/* scintillement étoiles */
@keyframes swc-twinkle { 0%,100%{opacity:.85;} 50%{opacity:.55;} }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .swc-stage:not(.swc-force-animate).swc-start .swc-crawl-content { animation-duration: 1ms !important; }
  .swc-stars { animation: none; }
}

/* =====================================================
   HOLOVID TRIGGER — CSS bouton "Message entrant"
   Dupliqué ici (fichier externe) pour contourner
   tout problème de cache ou d'optimisation inline.
   ===================================================== */
.hv-trigger {
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 700;
  padding: .6rem 1rem;
  border: 2px solid rgba(0,255,255,.25);
  border-radius: 6px;
  background: #001822;
  color: #7df;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: relative;
  display: inline-block;
}
.hv-trigger:hover { background: #012a3a; }
.hv-trigger[aria-busy="true"] { opacity: .85; cursor: wait; }

.hv-trigger--waiting {
  border-color: rgba(122,160,184,.3) !important;
  color: #9bb8cc !important;
  background: #0a1520 !important;
}
.hv-trigger--waiting:hover { background: #0a1520 !important; }

.hv-trigger--pulse {
  animation: hv-pulse-full 1.8s ease-in-out infinite !important;
  color: #fff !important;
  border-color: #0ff !important;
  background: #001e2e !important;
}
@keyframes hv-pulse-full {
  0% {
    box-shadow: 0 0 0 0 rgba(0,255,255,.9),
                0 0 8px 2px rgba(0,255,255,.4),
                inset 0 0 6px rgba(0,255,255,.1);
    text-shadow: 0 0 6px #0ff, 0 0 10px #0af;
    border-color: rgba(0,255,255,.6) !important;
  }
  40% {
    box-shadow: 0 0 0 10px rgba(0,255,255,0),
                0 0 20px 6px rgba(0,255,255,.5),
                inset 0 0 14px rgba(0,255,255,.2);
    text-shadow: 0 0 14px #fff, 0 0 28px #0ff, 0 0 40px #0af;
    border-color: rgba(0,255,255,1) !important;
  }
  80% {
    box-shadow: 0 0 0 18px rgba(0,255,255,0),
                0 0 10px 3px rgba(0,255,255,.3),
                inset 0 0 8px rgba(0,255,255,.1);
    text-shadow: 0 0 6px #0ff, 0 0 10px #0af;
    border-color: rgba(0,255,255,.4) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,255,255,.9),
                0 0 8px 2px rgba(0,255,255,.4),
                inset 0 0 6px rgba(0,255,255,.1);
    text-shadow: 0 0 6px #0ff, 0 0 10px #0af;
    border-color: rgba(0,255,255,.6) !important;
  }
}