/* ── T06: Hero, Animations & Effects ──────────────────────────────── */

/* ===========================================
   Hero — Diagonal split layout
   =========================================== */

.hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 92vh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-section > * {
  min-height: 92vh;
}

/* Background layers — behind the grid */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg--left {
  clip-path: polygon(0 0, 38% 0, 62% 100%, 0 100%);
  background: linear-gradient(135deg, #0a1628 0%, #0d2137 40%, #0B0B0E 100%);
}

.hero-bg--right {
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 62% 100%);
  background: linear-gradient(225deg, #1a1408 0%, #1f180a 40%, #0B0B0E 100%);
}

/* Grid cells — content sits above backgrounds */
.hero-cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.hero-cell--left,
.hero-cell--right {
  justify-content: center;
}

/* ── T18: Hero cards — clickable tiles with photo background ── */

.hero-card {
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.5s ease-in-out, background-color 0.5s ease-in-out,
              border-color 0.5s ease-in-out;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

/* Photo background layer */
.hero-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for readability */
.hero-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.5s ease-in-out;
}

.hero-card-overlay--tok {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.7) 0%, rgba(13, 33, 55, 0.6) 50%, rgba(11, 11, 14, 0.8) 100%);
}

.hero-card-overlay--svet {
  background: linear-gradient(225deg, rgba(26, 20, 8, 0.8) 0%, rgba(31, 24, 10, 0.7) 50%, rgba(11, 11, 14, 0.85) 100%);
}

/* Push hero-content above overlay */
.hero-card .hero-content {
  position: relative;
  z-index: 2;
}

/* Hover glow — cold blue for ПРО ТОК */
.hero-card--tok {
  box-shadow: inset 0 0 30px rgba(91, 192, 255, 0.06);
}

.hero-card--tok:hover {
  box-shadow:
    inset 0 0 80px rgba(91, 192, 255, 0.25),
    0 0 50px rgba(91, 192, 255, 0.3),
    0 0 100px rgba(91, 192, 255, 0.1);
  background-color: rgba(91, 192, 255, 0.08);
  border-color: rgba(91, 192, 255, 0.5);
}

.hero-card--tok:hover .hero-card-overlay--tok {
  opacity: 0.55;
}

/* Hover glow — warm gold for ПРО СВЕТ */
.hero-card--svet {
  box-shadow: inset 0 0 30px rgba(255, 211, 122, 0.06);
}

.hero-card--svet:hover {
  box-shadow:
    inset 0 0 80px rgba(255, 211, 122, 0.25),
    0 0 50px rgba(255, 211, 122, 0.3),
    0 0 100px rgba(255, 211, 122, 0.1);
  background-color: rgba(255, 211, 122, 0.08);
  border-color: rgba(255, 211, 122, 0.5);
}

.hero-card--svet:hover .hero-card-overlay--svet {
  opacity: 0.7;
}

.hero-content {
  padding: 2rem 3rem;
  max-width: 440px;
}

.hero-cell--left .hero-content,
.hero-cell--right .hero-content {
  text-align: center;
}

/* Decorative logo on hero */
.hero-logo-svg {
  width: 120px;
  height: 120px;
  margin-bottom: 1rem;
}

.hero-cell--left .hero-logo-svg,
.hero-cell--right .hero-logo-svg {
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================
   ПРО ТОК — Running impulse (бегущий импульс)
   =========================================== */

.impulse-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: impulse-run 3s ease-in-out infinite;
}

.impulse-glow {
  animation: impulse-glow 3s ease-in-out infinite;
}

@keyframes impulse-run {
  0% {
    stroke-dashoffset: 600;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}

@keyframes impulse-glow {
  0%, 100% {
    opacity: 0.3;
    filter: blur(2px);
  }
  50% {
    opacity: 1;
    filter: blur(4px);
  }
}

/* ===========================================
   ПРО СВЕТ — Diode strip (диодная лента)
   =========================================== */

.diode {
  animation: diode-blink 2.4s ease-in-out infinite;
}

@keyframes diode-blink {
  0%, 100% {
    opacity: 0.15;
    r: 2.5;
  }
  20% {
    opacity: 1;
    r: 4;
  }
  40% {
    opacity: 0.4;
    r: 2.5;
  }
}

.diode-glow {
  animation: diode-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes diode-glow-pulse {
  0%, 100% {
    opacity: 0;
    r: 6;
  }
  20% {
    opacity: 0.6;
    r: 10;
  }
  30% {
    opacity: 0;
    r: 6;
  }
}

/* ===========================================
   Breathing glow (дыхание подсветки)
   =========================================== */

.tile-breathing {
  animation: breathe 5s ease-in-out infinite;
  transition: box-shadow 0.3s, transform 0.3s;
}

.tile-breathing:hover {
  transform: scale(1.02);
}

@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 8px rgba(200, 164, 92, 0.15);
  }
  50% {
    box-shadow: 0 0 24px rgba(200, 164, 92, 0.35);
  }
}

/* ===========================================
   Card hover effects
   =========================================== */

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: scale(1.02);
}

/* ===========================================
   Fade-in on scroll (IntersectionObserver)
   =========================================== */

.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   Parallax — subtle movement
   =========================================== */

.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===========================================
   Diode ring rotation (бегущие по кругу)
   =========================================== */

.diode-ring {
  animation: diode-spin 12s linear infinite;
}

@keyframes diode-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===========================================
   Diode ring static (без вращения, только свечение)
   =========================================== */

.diode-static {
  animation: diode-static-pulse 2.4s ease-in-out infinite;
}

@keyframes diode-static-pulse {
  0%, 100% {
    opacity: 0.3;
    r: 5;
  }
  20% {
    opacity: 1;
    r: 5;
  }
  30% {
    opacity: 0.3;
    r: 5;
  }
}

.diode-glow-static {
  animation: diode-glow-static-pulse 2.4s ease-in-out infinite;
}

@keyframes diode-glow-static-pulse {
  0%, 100% {
    opacity: 0;
    r: 6;
  }
  20% {
    opacity: 0.7;
    r: 12;
  }
  30% {
    opacity: 0;
    r: 6;
  }
}

/* ===========================================
   Reduced motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .impulse-path,
  .impulse-glow,
  .diode-ring,
  .diode,
  .diode-glow,
  .diode-static,
  .diode-glow-static,
  .tile-breathing,
  .hero-card--tok,
  .hero-card--svet {
    animation: none !important;
    box-shadow: none !important;
  }

  .hero-card--tok:hover,
  .hero-card--svet:hover {
    box-shadow: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .hero-card--tok:hover .hero-card-overlay--tok,
  .hero-card--svet:hover .hero-card-overlay--svet {
    opacity: 1 !important;
  }

  .fade-section {
    opacity: 1 !important;
    transform: none !important;
  }

  .card-hover:hover {
    transform: none !important;
  }

  .parallax-layer {
    transform: none !important;
  }
}

/* ===========================================
   Mobile: vertical layout (< 1024px)
   =========================================== */

@media (max-width: 1023px) {
  .hero-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-section > * {
    min-height: auto;
  }

  .hero-bg {
    display: none;
  }

  .hero-cell {
    display: flex;
    justify-content: center !important;
    min-height: 50vh;
  }

  .hero-content {
    text-align: center !important;
    max-width: 100%;
    padding: 2rem 1.5rem;
  }

  .hero-logo-svg {
    width: 80px;
    height: 80px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}