/* ==========================================================
   logo.css — styles for SVG zones and states
   ========================================================== */

/* ----------------------------------------------------------
   Base styles for touch zones
   ---------------------------------------------------------- */
.symbol-zone {
  cursor: pointer;
  touch-action: none;
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}

/* Invisible touch area */
.touch-area {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

/* Symbol paths */
.symbol-path-gold,
.symbol-path-blue,
.symbol-path-orange,
.symbol-path-dark {
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* ----------------------------------------------------------
   Hover
   ---------------------------------------------------------- */
.symbol-zone:hover .symbol-path-orange {
  filter: brightness(1.15) drop-shadow(0 0 5px rgba(238, 164, 0, 0.25));
}

.symbol-zone:hover .symbol-path-gold {
  filter: brightness(1.15) drop-shadow(0 0 5px rgba(196, 168, 0, 0.25));
}

.symbol-zone:hover .symbol-path-blue {
  filter: brightness(1.2) drop-shadow(0 0 5px rgba(124, 151, 169, 0.25));
}

.symbol-zone:hover .symbol-path-dark {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(78, 91, 54, 0.15));
}

/* ----------------------------------------------------------
   Active symbol
   ---------------------------------------------------------- */
.symbol-zone.is-active .symbol-path-orange {
  filter: brightness(1.15) drop-shadow(0 0 5px rgba(238, 164, 0, 0.25));
}

.symbol-zone.is-active .symbol-path-gold {
  filter: brightness(1.15) drop-shadow(0 0 5px rgba(196, 168, 0, 0.25));
}

.symbol-zone.is-active .symbol-path-blue {
  filter: brightness(1.2) drop-shadow(0 0 5px rgba(124, 151, 169, 0.25));
}

.symbol-zone.is-active .symbol-path-dark {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(78, 91, 54, 0.15));
}

/* ----------------------------------------------------------
   Dimming inactive symbols when the panel is open
   ---------------------------------------------------------- */
#app.state-active .symbol-zone:not(.is-active) {
  opacity: 0.45;
  transition: opacity var(--transition-main);
}

#app.state-active .symbol-zone:not(.is-active) .symbol-path-gold,
#app.state-active .symbol-zone:not(.is-active) .symbol-path-orange,
#app.state-active .symbol-zone:not(.is-active) .symbol-path-blue,
#app.state-active .symbol-zone:not(.is-active) .symbol-path-dark {
  filter: none;
  transition: filter var(--transition-main);
}

#app.state-active .symbol-zone.is-active {
  opacity: 1;
}

/* ----------------------------------------------------------
   Idle mode
   ---------------------------------------------------------- */
#app.state-idle .symbol-zone {
  opacity: 1;
  transition: opacity var(--transition-main);
}

/* ----------------------------------------------------------
   Attract mode
   ---------------------------------------------------------- */

/* Phase 1: glow fades in smoothly */
.symbol-zone.attract-pulse .symbol-path-orange {
  animation: attractGlowWarm 0.7s ease-in-out forwards;
}
.symbol-zone.attract-pulse .symbol-path-gold {
  animation: attractGlowWarm 0.7s ease-in-out forwards;
}
.symbol-zone.attract-pulse .symbol-path-blue {
  animation: attractGlowCool 0.7s ease-in-out forwards;
}
.symbol-zone.attract-pulse .symbol-path-dark {
  animation: attractGlowDark 0.7s ease-in-out forwards;
}

/* Phase 2: symbol shake */
.symbol-zone.attract-shake {
  animation: attractShake 0.55s ease-in-out forwards;
}

/* Phase 3: glow fades out smoothly */
.symbol-zone.attract-fadeout .symbol-path-orange,
.symbol-zone.attract-fadeout .symbol-path-gold {
  animation: attractGlowWarmOut 0.6s ease-in-out forwards;
}
.symbol-zone.attract-fadeout .symbol-path-blue {
  animation: attractGlowCoolOut 0.6s ease-in-out forwards;
}
.symbol-zone.attract-fadeout .symbol-path-dark {
  animation: attractGlowDarkOut 0.6s ease-in-out forwards;
}

#valeni-logo.no-hover .symbol-zone:hover .symbol-path-orange,
#valeni-logo.no-hover .symbol-zone:hover .symbol-path-gold,
#valeni-logo.no-hover .symbol-zone:hover .symbol-path-blue,
#valeni-logo.no-hover .symbol-zone:hover .symbol-path-dark {
  filter: none;
}