/* Carlos Computer Club — shared base CSS
 * Resets, safe-area helpers, util classes. Variants build on top of this. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  font-family: system-ui, -apple-system, sans-serif;
}

button, input, textarea {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: none;
  outline: none;
  width: 100%;
  font-family: inherit;
}
button { cursor: pointer; }
a { color: inherit; }

img, svg { display: block; max-width: 100%; }

/* Safe area helpers (iOS notch / Dynamic Island) */
.safe-top    { padding-top:    env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Common keyframes used across variants */
@keyframes cccBreath  { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes cccCaret   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cccPulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* TRON-style fly-out: glide up + scaleY stretch + glow trail */
@keyframes cccFlyTron {
  0%   { transform: translateY(0)     scaleY(1);    opacity: 1;    filter: brightness(1)   blur(0); }
  12%  { transform: translateY(-6px)  scaleY(1.1);  opacity: 1;    filter: brightness(1.35) blur(0); }
  50%  { transform: translateY(-150px) scaleY(1.85); opacity: 0.85; filter: brightness(1.8)  blur(0.5px); }
  100% { transform: translateY(-400px) scaleY(2.8);  opacity: 0;    filter: brightness(2.2)  blur(2.5px); }
}

/* Burst variant: gentler scatter, slight rotation, smoother arc */
@keyframes cccFlyBurst {
  0%   { transform: translate(0, 0)      rotate(0deg)  scale(1);    opacity: 1;    filter: brightness(1) blur(0); }
  22%  { transform: translate(0, -26px)  rotate(-3deg) scale(1.08); opacity: 1;    filter: brightness(1.3); }
  60%  { transform: translate(0, -170px) rotate(2deg)  scale(1.02); opacity: 0.78; filter: blur(0.4px); }
  100% { transform: translate(0, -380px) rotate(0deg)  scale(0.7);  opacity: 0;    filter: blur(2px); }
}

/* Split-flap lock: brief flash + scaleY snap when a char settles */
@keyframes cccFlapLock {
  0%   { transform: scaleY(0.4) translateY(2px); filter: brightness(2.4) drop-shadow(0 0 8px currentColor); }
  55%  { transform: scaleY(1.15) translateY(-1px); filter: brightness(1.5) drop-shadow(0 0 6px currentColor); }
  100% { transform: scaleY(1)    translateY(0);   filter: brightness(1)   drop-shadow(0 0 0 transparent); }
}