/* Public site shared theme tokens and animation keyframes (Issue #66).
   Provides the cyan token palette and reusable @keyframes consumed by the
   public shell and animated-background layers (see Epic #69). */

:root {
  /* ── Cyan accent palette ─────────────────────────────────────────── */
  --pub-cyan:        #00e5ff;
  --pub-cyan-dark:   #00b4cc;
  --pub-cyan-soft:   rgba(0, 229, 255, 0.18);
  --pub-cyan-dim:    rgba(0, 229, 255, 0.08);
  --pub-cyan-glow:   rgba(0, 229, 255, 0.35);
  --pub-cyan-line:   rgba(0, 229, 255, 0.22);

  /* ── Orange brand accent ─────────────────────────────────────────── */
  --pub-accent:      #00e5ff;
  --pub-accent-dark: #00b4cc;
  --pub-accent-soft: rgba(0, 229, 255, 0.16);
  --pub-accent-dim:  rgba(0, 229, 255, 0.08);
  --pub-accent-glow: rgba(0, 229, 255, 0.35);
  --pub-line-soft:   rgba(0, 229, 255, 0.18);

  /* ── Surfaces & backgrounds ──────────────────────────────────────── */
  --pub-bg:          #000;
  --pub-bg-soft:     #0d0d0d;
  --pub-card:        #111;
  --pub-card-soft:   #12141a;
  --pub-line:        #2a2a2a;
  --pub-shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.42);

  /* ── Typography ──────────────────────────────────────────────────── */
  --pub-text:        #f6f6f6;
  --pub-muted:       #c8c8c8;

  /* Legacy token bridge: public-site.css consumes these names. */
  --accent:          var(--pub-accent);
  --accent-dark:     var(--pub-accent-dark);
  --line-soft:       var(--pub-line-soft);
}

/* Minimal high-impact overrides for hardcoded orange rules in legacy CSS. */
.public-body {
  background:
    radial-gradient(circle at 10% 10%, rgba(0, 229, 255, 0.18), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(0, 229, 255, 0.10), transparent 28%),
    linear-gradient(180deg, #030303 0%, #090909 50%, #000 100%) !important;
}

.hero-wrap {
  background: linear-gradient(135deg, rgba(6, 18, 28, 0.96), rgba(6, 18, 28, 0.92)) !important;
  border-color: rgba(0, 229, 255, 0.2) !important;
}

.page-hero {
  background: linear-gradient(135deg, rgba(6, 18, 28, 0.96), rgba(6, 18, 28, 0.92)) !important;
  border-color: rgba(0, 229, 255, 0.2) !important;
}

.section-header {
  margin-top: 20px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(0, 229, 255, 0.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.96), rgba(7, 12, 18, 0.94)) !important;
}

.callout-note {
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.96), rgba(7, 12, 18, 0.94)) !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

.eyebrow,
.meta-pill,
.public-nav a,
.public-nav .login-link {
  border-color: rgba(0, 229, 255, 0.28) !important;
}

.eyebrow {
  background: rgba(8, 14, 22, 0.96) !important;
}

.meta-pill {
  background: rgba(8, 14, 22, 0.94) !important;
}

.eyebrow,
.public-nav a,
.hero-text h1 {
  color: var(--pub-accent) !important;
}

/* Story #70: public shell background layer + stacking hooks. */
.public-body {
  position: relative;
  overflow-x: clip;
}

.public-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.public-shell-layer {
  position: relative;
  z-index: 1;
}

.public-bg-squares {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.28) 7%, #000 15%, #000 85%, rgba(0, 0, 0, 0.28) 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.28) 7%, #000 15%, #000 85%, rgba(0, 0, 0, 0.28) 93%, transparent 100%);
}

/* Squares match CyberUp Academy AnimatedSquaresBackground exactly:
   size/position/duration/delay generated with same algorithm (i*17%150+56, i*13%100, i*19%100, 14+i%10, -(i%9*1.4)) */
.public-bg-squares .bg-square {
  position: absolute;
  border: 1px solid rgba(0, 229, 255, 0.5);
  animation: float-squares 14s ease-in-out infinite;
  will-change: transform, opacity;
}

.public-bg-squares .bg-square:nth-child(1)  { width:  56px; height:  56px; left:  0%; top:  0%; animation-duration: 14s; animation-delay:    0s; }
.public-bg-squares .bg-square:nth-child(2)  { width:  73px; height:  73px; left: 13%; top: 19%; animation-duration: 15s; animation-delay: -1.4s; }
.public-bg-squares .bg-square:nth-child(3)  { width:  90px; height:  90px; left: 26%; top: 38%; animation-duration: 16s; animation-delay: -2.8s; }
.public-bg-squares .bg-square:nth-child(4)  { width: 107px; height: 107px; left: 39%; top: 57%; animation-duration: 17s; animation-delay: -4.2s; }
.public-bg-squares .bg-square:nth-child(5)  { width: 124px; height: 124px; left: 52%; top: 76%; animation-duration: 18s; animation-delay: -5.6s; }
.public-bg-squares .bg-square:nth-child(6)  { width: 141px; height: 141px; left: 65%; top: 95%; animation-duration: 19s; animation-delay:  -7s; }
.public-bg-squares .bg-square:nth-child(7)  { width: 158px; height: 158px; left: 78%; top: 14%; animation-duration: 20s; animation-delay: -8.4s; }
.public-bg-squares .bg-square:nth-child(8)  { width: 175px; height: 175px; left: 91%; top: 33%; animation-duration: 21s; animation-delay: -9.8s; }
.public-bg-squares .bg-square:nth-child(9)  { width: 192px; height: 192px; left:  4%; top: 52%; animation-duration: 22s; animation-delay:-11.2s; }
.public-bg-squares .bg-square:nth-child(10) { width:  59px; height:  59px; left: 17%; top: 71%; animation-duration: 23s; animation-delay:-12.6s; }
.public-bg-squares .bg-square:nth-child(11) { width:  76px; height:  76px; left: 30%; top: 90%; animation-duration: 14s; animation-delay:    0s; }
.public-bg-squares .bg-square:nth-child(12) { width:  93px; height:  93px; left: 43%; top:  9%; animation-duration: 15s; animation-delay: -1.4s; }
.public-bg-squares .bg-square:nth-child(13) { width: 110px; height: 110px; left: 56%; top: 28%; animation-duration: 16s; animation-delay: -2.8s; }
.public-bg-squares .bg-square:nth-child(14) { width: 127px; height: 127px; left: 69%; top: 47%; animation-duration: 17s; animation-delay: -4.2s; }
.public-bg-squares .bg-square:nth-child(15) { width: 144px; height: 144px; left: 82%; top: 66%; animation-duration: 18s; animation-delay: -5.6s; }
.public-bg-squares .bg-square:nth-child(16) { width: 161px; height: 161px; left: 95%; top: 85%; animation-duration: 19s; animation-delay:  -7s; }
.public-bg-squares .bg-square:nth-child(17) { width: 178px; height: 178px; left:  8%; top:  4%; animation-duration: 20s; animation-delay: -8.4s; }
.public-bg-squares .bg-square:nth-child(18) { width: 195px; height: 195px; left: 21%; top: 23%; animation-duration: 21s; animation-delay: -9.8s; }
.public-bg-squares .bg-square:nth-child(19) { width:  62px; height:  62px; left: 34%; top: 42%; animation-duration: 22s; animation-delay:-11.2s; }
.public-bg-squares .bg-square:nth-child(20) { width:  79px; height:  79px; left: 47%; top: 61%; animation-duration: 23s; animation-delay:-12.6s; }

/* ── Animation keyframes ─────────────────────────────────────────────── */

/* Gentle glow pulse — suitable for orbs, borders and accent elements */
@keyframes pub-pulse-glow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* Slow vertical float — hero images, floating cards */
@keyframes pub-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Horizontal shimmer — loading states, highlight sweeps */
@keyframes pub-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Fade-up entrance — sections and cards on scroll-reveal */
@keyframes pub-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slow continuous rotation — decorative ring / spinner elements */
@keyframes pub-spin-slow {
  to { transform: rotate(360deg); }
}

/* Animated background particle drift */
@keyframes pub-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(12px, -18px) scale(1.04); }
  66%  { transform: translate(-8px, 10px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Cyan neon border flicker */
@keyframes pub-neon-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%           { opacity: 0.7; }
  98%           { opacity: 0.9; }
}

@keyframes float-squares {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.18;
  }
  50% {
    transform: translateY(-20px) rotate(6deg);
    opacity: 0.5;
  }
}