/* phys8-design-system.css
 * Уникальный визуальный язык «Физики 8» — 3 тематических темы.
 * Применяется на physics_8_hub.html, physics_8_ch1/ch2/ch3.html, physics_8_lab.html.
 *
 * Тематика:
 *   Ch1 «жар»    — угольный/оранжевый/жёлтый, дышащий градиент
 *   Ch2 «искра»  — индиго/бирюза/голубой, electric pulse
 *   Ch3 «спектр» — глубокий синий/радуга/персик, dispersion shift
 */

/* === Глобальные тематические переменные === */
:root {
  --p8-brand:        #7c3aed;
  --p8-brand-d:      #5b21b6;
  --p8-brand-l:      #c4b5fd;
  --p8-brand-soft:   #ede9fe;
  --p8-ink:          #0f172a;
  --p8-text:         #1e293b;
  --p8-muted:        #64748b;
  --p8-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --p8-display: 'Unbounded', 'Outfit', system-ui, sans-serif;
  --p8-body: 'Inter', system-ui, sans-serif;
}

html.dark {
  --p8-ink:    #f1f5f9;
  --p8-text:   #e2e8f0;
  --p8-muted:  #94a3b8;
}

/* === Тема Ch1 «жар» — Тепловые явления === */
body.p8-theme-thermal {
  --th-deep:   #0f172a;
  --th-mid:    #f97316;
  --th-warm:   #facc15;
  --th-glow:   rgba(249, 115, 22, .35);
  --th-soft:   #fff7ed;
  --th-card:   #fffbf5;
}
html.dark body.p8-theme-thermal {
  --th-soft: #1a0f05;
  --th-card: #1f1408;
}

/* === Тема Ch2 «искра» — Электромагнитные явления === */
body.p8-theme-electric {
  --el-deep:   #1e1b4b;
  --el-mid:    #06b6d4;
  --el-cool:   #7dd3fc;
  --el-glow:   rgba(6, 182, 212, .35);
  --el-soft:   #ecfeff;
  --el-card:   #f0fbff;
}
html.dark body.p8-theme-electric {
  --el-soft: #061226;
  --el-card: #081530;
}

/* === Тема Ch3 «спектр» — Световые явления === */
body.p8-theme-spectrum {
  --sp-deep:   #0c0a3a;
  --sp-mid-r:  #ef4444;
  --sp-mid-y:  #facc15;
  --sp-mid-g:  #22c55e;
  --sp-mid-b:  #3b82f6;
  --sp-mid-v:  #a855f7;
  --sp-warm:   #fb7185;
  --sp-glow:   rgba(168, 85, 247, .30);
  --sp-soft:   #fdf2f8;
  --sp-card:   #fff5fa;
}
html.dark body.p8-theme-spectrum {
  --sp-soft: #0d0a1f;
  --sp-card: #110d27;
}

/* === Hero (заменяет .hdr на главах) === */
.p8-hero {
  position: relative;
  padding: 48px 28px 38px;
  color: #fff;
  overflow: hidden;
  font-family: var(--p8-display);
  border-bottom: 2px solid rgba(255,255,255,.16);
}
.p8-theme-thermal .p8-hero {
  background:
    radial-gradient(circle at 78% 18%, var(--th-glow), transparent 55%),
    linear-gradient(125deg, var(--th-deep) 0%, var(--th-mid) 60%, var(--th-warm) 100%);
  background-size: 220% 220%, 100% 100%;
  animation: p8-thermal-shift 14s ease-in-out infinite;
}
.p8-theme-electric .p8-hero {
  background:
    radial-gradient(circle at 22% 30%, var(--el-glow), transparent 50%),
    linear-gradient(115deg, var(--el-deep) 0%, var(--el-mid) 65%, var(--el-cool) 100%);
  animation: p8-electric-pulse 5s ease-in-out infinite;
}
.p8-theme-spectrum .p8-hero {
  background:
    linear-gradient(115deg,
      var(--sp-deep) 0%,
      var(--sp-mid-r) 20%,
      var(--sp-mid-y) 38%,
      var(--sp-mid-g) 55%,
      var(--sp-mid-b) 72%,
      var(--sp-mid-v) 88%,
      var(--sp-warm) 100%);
  background-size: 240% 100%;
  animation: p8-spectrum-drift 18s linear infinite;
}

@keyframes p8-thermal-shift {
  0%, 100% { background-position: 0% 50%, 0 0; }
  50%      { background-position: 100% 50%, 0 0; }
}
@keyframes p8-electric-pulse {
  0%, 100% { filter: brightness(1)    saturate(1); }
  35%      { filter: brightness(1.12) saturate(1.18); }
  60%      { filter: brightness(0.96) saturate(1.06); }
}
@keyframes p8-spectrum-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* === Hero watermark (тематический SVG-символ справа) === */
.p8-hero-wm {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 32vw, 360px);
  aspect-ratio: 1;
  opacity: .18;
  color: #fff;
  pointer-events: none;
  z-index: 0;
}
.p8-hero-wm svg { width: 100%; height: 100%; fill: currentColor; }

/* Анимация дыхания watermark */
.p8-theme-thermal .p8-hero-wm { animation: p8-wm-breathe 6s ease-in-out infinite; }
.p8-theme-electric .p8-hero-wm { animation: p8-wm-flicker 3.2s ease-in-out infinite; }
.p8-theme-spectrum .p8-hero-wm { animation: p8-wm-rotate 40s linear infinite; }
@keyframes p8-wm-breathe { 0%,100% { opacity: .15; transform: translateY(-50%) scale(1); } 50% { opacity: .22; transform: translateY(-50%) scale(1.06); } }
@keyframes p8-wm-flicker { 0%,100% { opacity: .18; } 30% { opacity: .26; } 33% { opacity: .12; } 36% { opacity: .24; } 50% { opacity: .18; } }
@keyframes p8-wm-rotate { 0% { transform: translateY(-50%) rotate(0); } 100% { transform: translateY(-50%) rotate(360deg); } }

/* === Hero content === */
.p8-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.p8-hero-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255,255,255,.18);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.p8-hero-title {
  font-family: var(--p8-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 10px;
  text-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.p8-hero-sub {
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  opacity: .92;
  max-width: 640px;
  font-family: var(--p8-body);
  font-weight: 500;
  line-height: 1.55;
}

/* === Live header indicator (маячок в углу хедера) === */
.p8-hero-meter {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  font-family: var(--p8-mono);
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.p8-hero-meter::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 currentColor;
  animation: p8-meter-pulse 1.4s ease-out infinite;
}
@keyframes p8-meter-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* === Section watermarks (тематические SVG на правой стороне каждой секции) === */
.p8-sec-wm {
  position: absolute;
  right: -28px;
  top: 8%;
  width: clamp(140px, 22vw, 240px);
  aspect-ratio: 1;
  color: var(--p8-brand);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.p8-theme-thermal .p8-sec-wm { color: var(--th-mid); }
.p8-theme-electric .p8-sec-wm { color: var(--el-mid); }
.p8-theme-spectrum .p8-sec-wm { color: var(--sp-mid-v); }
.p8-sec-wm svg { width: 100%; height: 100%; fill: currentColor; }

/* === Hover-resonance — SVG/canvas в виджетах === */
.wg svg, .wg canvas {
  transition: filter .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.wg:hover svg,
.wg:hover canvas {
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.10));
}
.p8-theme-thermal .wg:hover svg { filter: drop-shadow(0 6px 20px var(--th-glow)); }
.p8-theme-electric .wg:hover svg { filter: drop-shadow(0 6px 20px var(--el-glow)); }
.p8-theme-spectrum .wg:hover svg { filter: drop-shadow(0 6px 20px var(--sp-glow)); }

/* === Staggered fade-in для виджетов === */
@keyframes p8-wg-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sec.active .wg {
  animation: p8-wg-fade-in .45s cubic-bezier(.16,1,.3,1) backwards;
}
.sec.active .wg:nth-of-type(1) { animation-delay: .03s; }
.sec.active .wg:nth-of-type(2) { animation-delay: .10s; }
.sec.active .wg:nth-of-type(3) { animation-delay: .17s; }
.sec.active .wg:nth-of-type(4) { animation-delay: .24s; }
.sec.active .wg:nth-of-type(5) { animation-delay: .31s; }
.sec.active .wg:nth-of-type(6) { animation-delay: .38s; }
.sec.active .wg:nth-of-type(7) { animation-delay: .45s; }

/* === Soft elevation на карточках (2 уровня) === */
.wg {
  box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.04);
  transition: box-shadow 350ms cubic-bezier(.16,1,.3,1), transform 350ms cubic-bezier(.16,1,.3,1);
}
.wg:hover {
  box-shadow: 0 4px 10px rgba(15,23,42,.07), 0 18px 36px rgba(15,23,42,.10);
  transform: translateY(-2px);
}

/* === Typography rhythm: моноширинный для физических величин === */
.p8-num, .p8-unit, .p8-mono, var.p8-var,
.tinp[type="number"], input[type="number"].tinp {
  font-family: var(--p8-mono);
  letter-spacing: -.01em;
}
.p8-num { font-weight: 700; color: var(--p8-ink); }
.p8-unit { color: var(--p8-muted); font-weight: 600; font-size: .92em; }

/* === Topic-aware progress bars === */
.p8-theme-thermal .hp-fill,
.p8-theme-thermal .po-fill,
.p8-theme-thermal .ch-prog-fill {
  background: linear-gradient(90deg, var(--th-mid), var(--th-warm));
}
.p8-theme-electric .hp-fill,
.p8-theme-electric .po-fill,
.p8-theme-electric .ch-prog-fill {
  background: linear-gradient(90deg, var(--el-mid), var(--el-cool));
}
.p8-theme-spectrum .hp-fill,
.p8-theme-spectrum .po-fill,
.p8-theme-spectrum .ch-prog-fill {
  background: linear-gradient(90deg, var(--sp-mid-b), var(--sp-mid-v), var(--sp-warm));
  background-size: 200% 100%;
  animation: p8-spectrum-drift 8s linear infinite;
}

/* === Mobile responsiveness === */
@media (max-width: 768px) {
  .p8-hero { padding: 34px 18px 26px; }
  .p8-hero-wm { width: clamp(120px, 38vw, 200px); right: -16px; opacity: .12; }
  .p8-hero-meter { top: 14px; right: 16px; font-size: .68rem; padding: 5px 9px; }
  .p8-sec-wm { width: clamp(80px, 28vw, 140px); right: -16px; opacity: .05; }
}

/* === Animated noise overlay (микро-шум на hero) === */
.p8-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 25% 30%, rgba(255,255,255,.10) 0, transparent 1px),
    radial-gradient(circle 1px at 75% 60%, rgba(255,255,255,.08) 0, transparent 1px),
    radial-gradient(circle 1px at 50% 80%, rgba(255,255,255,.06) 0, transparent 1px),
    radial-gradient(circle 1px at 15% 75%, rgba(255,255,255,.09) 0, transparent 1px),
    radial-gradient(circle 1px at 85% 20%, rgba(255,255,255,.07) 0, transparent 1px);
  background-size: 80px 80px;
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.p8-theme-thermal .p8-hero::after { animation: p8-noise-thermal 8s linear infinite; }
.p8-theme-electric .p8-hero::after { animation: p8-noise-electric 4s linear infinite; }
.p8-theme-spectrum .p8-hero::after { animation: p8-noise-spectrum 12s linear infinite; }
@keyframes p8-noise-thermal { 0% { background-position: 0 0; } 100% { background-position: 80px -160px; } }
@keyframes p8-noise-electric { 0% { background-position: 0 0; } 100% { background-position: -120px 80px; } }
@keyframes p8-noise-spectrum { 0% { background-position: 0 0; } 100% { background-position: 80px 80px; } }

/* === Focus-visible для accessibility === */
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
.wg [tabindex]:focus-visible {
  outline: 2px solid var(--p8-brand);
  outline-offset: 2px;
  border-radius: 9px;
}
.p8-theme-thermal :focus-visible { outline-color: var(--th-mid); }
.p8-theme-electric :focus-visible { outline-color: var(--el-mid); }
.p8-theme-spectrum :focus-visible { outline-color: var(--sp-mid-v); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .p8-hero,
  .p8-hero-wm,
  .p8-hero-meter::before,
  .p8-hero::after,
  .sec.active .wg,
  .p8-theme-spectrum .ch-prog-fill {
    animation: none !important;
  }
  .wg, .wg svg, .wg canvas { transition: none !important; }
}