/* workspace/starcode/css/cosmos-hype.css */
/* SC-REVEAL-HYPE: the capture celebration layer over the reveal stage
   (js/reveal-hype.js drives it off the ceremony clock). One line at a
   time punches in big, holds, and leaves; jackpot lines add one screen
   blink. Everything here animates transform and opacity only, so the
   layer never touches layout or paint sizing on a phone. The line sits
   at 30% height: below the typed status pill's band at the top edge,
   above the system center, so neither channel ever covers the other. */
/* The on-screen text and the screen blink are held off until a quieter way
   to announce a system is settled (owner 2026-08-29: the current big words
   are overkill). Everything behind them stays live -- js/reveal-hype.js still
   builds and runs every beat, the journal still records, the sounds still
   play -- so lifting these two rules brings the words straight back. */
.reveal-hype { display: none !important; }
.reveal-hype-flash { display: none !important; }
.reveal-hype {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 3;
  max-width: 94%;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-data);
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.25;
  color: #e8f4ff;
  text-shadow: 0 0 18px rgba(125, 211, 252, 0.55), 0 2px 10px rgba(0, 0, 0, 0.8);
}
.reveal-hype.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.reveal-hype.out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.12);
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}
/* Size and color per tier. The tier is a look, set by js/reveal-hype.js;
   the words themselves carry any rarity claim, and only when the
   measured odds in that file's header earn it. */
.reveal-hype[data-tier="swap"],
.reveal-hype[data-tier="note"] {
  font-size: clamp(26px, 6vw, 48px);
}
.reveal-hype[data-tier="big"] {
  font-size: clamp(32px, 7.5vw, 62px);
}
.reveal-hype[data-tier="epic"] {
  font-size: clamp(34px, 8vw, 68px);
  color: #ffd98a;
  text-shadow: 0 0 22px rgba(245, 158, 11, 0.6), 0 2px 10px rgba(0, 0, 0, 0.8);
}
.reveal-hype[data-tier="jackpot"] {
  font-size: clamp(38px, 9.5vw, 80px);
  color: #ffe3a3;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.85), 0 0 70px rgba(245, 158, 11, 0.45), 0 2px 12px rgba(0, 0, 0, 0.85);
}
/* The punch-in: oversized, then a fast settle with a small overshoot.
   Two identical keyframe sets under two names, so switching the class
   restarts the punch for the next line with no forced style flush. */
.reveal-hype.punch-a {
  animation: hype-punch-a 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal-hype.punch-b {
  animation: hype-punch-b 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hype-punch-a {
  0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes hype-punch-b {
  0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* The jackpot blink: one full-stage warm flash that rises fast and dies
   out, opacity only, under the text and over the scene. Same two-name
   restart trick as the punch. */
.reveal-hype-flash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 236, 190, 0.9) 0%, rgba(255, 214, 130, 0.5) 45%, rgba(245, 158, 11, 0.15) 100%);
}
.reveal-hype-flash.blink-a {
  animation: hype-flash-a 0.7s ease-out both;
}
.reveal-hype-flash.blink-b {
  animation: hype-flash-b 0.7s ease-out both;
}
@keyframes hype-flash-a {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes hype-flash-b {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  100% { opacity: 0; }
}
/* A player who asked the system for reduced motion keeps every line and
   its timing; only the oversized punch and the screen blink calm down
   to a plain fade. */
@media (prefers-reduced-motion: reduce) {
  .reveal-hype.punch-a,
  .reveal-hype.punch-b {
    animation-duration: 0.01s;
  }
  .reveal-hype-flash.blink-a,
  .reveal-hype-flash.blink-b {
    animation: none;
  }
}