* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body { overflow: hidden; background: #09090f; }

/* State containers are toggled via the [hidden] attribute from main.js */
.state[hidden] { display: none; }

/* Back button hover (ported from the prototype's style-hover) */
#backBtn:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.45); }

@keyframes scan {
  from { top: -3px; }
  to   { top: 100vh; }
}
@keyframes hpulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hintpulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}
@keyframes gflash {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  12%  { opacity: 0; }
  25%  { opacity: 0.7; }
  33%  { opacity: 0; }
  62%  { opacity: 0.6; }
  70%  { opacity: 0; }
  82%  { opacity: 0.95; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes gr {
  0%   { opacity: 0;   transform: translate(-6px,  2px);  clip-path: inset(100% 0 0 0); }
  8%   { opacity: 0.8; transform: translate(-10px, 0);    clip-path: inset(18% 0 42% 0); }
  22%  { opacity: 0.5; transform: translate(-5px, -2px);  clip-path: inset(63% 0 12% 0); }
  44%  { opacity: 0.9; transform: translate(-12px, 1px);  clip-path: inset(38% 0 28% 0); }
  66%  { opacity: 0.4; transform: translate(-6px, -1px);  clip-path: inset(82% 0 4% 0); }
  85%  { opacity: 0.7; transform: translate(-9px,  0);    clip-path: inset(9% 0 58% 0); }
  100% { opacity: 0;   transform: translate(0, 0); }
}
@keyframes gb {
  0%   { opacity: 0;   transform: translate(6px, -2px);   clip-path: inset(0 0 72% 0); }
  10%  { opacity: 0.7; transform: translate(10px, 1px);   clip-path: inset(38% 0 38% 0); }
  30%  { opacity: 0.8; transform: translate(11px, -1px);  clip-path: inset(72% 0 12% 0); }
  55%  { opacity: 0.5; transform: translate(7px,  0);     clip-path: inset(14% 0 52% 0); }
  78%  { opacity: 0.6; transform: translate(5px,  2px);   clip-path: inset(48% 0 22% 0); }
  100% { opacity: 0;   transform: translate(0, 0); }
}
@keyframes gshake {
  0%,100% { transform: translate(0,0); }
  10%  { transform: translate(-4px,  2px) skewX(-1.5deg); }
  22%  { transform: translate(3px,  -1px) skewX(1deg); }
  36%  { transform: translate(-2px,  3px); }
  48%  { transform: translate(5px,  -2px) skewX(-2deg); }
  60%  { transform: translate(-3px,  1px); }
  72%  { transform: translate(4px,   3px) skewX(1.5deg); }
  85%  { transform: translate(-5px, -1px); }
  93%  { transform: translate(2px,  -3px); }
}
/* gshake is applied to #glitch via inline animation in main.js on entry */
#glitch { animation: gshake 0.8s linear; }

@keyframes pfadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#panorama:not([hidden]) { animation: pfadein 0.45s ease; }

@keyframes countdown {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes scrolldot {
  0%   { transform: translateY(0);   opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}