/* =================================================================
   VH Audio — Left Sidebar Navigation
   Replaces the old GIF-based Dreamweaver MM_swapImage nav

   Font:   Exo 2 via Google Fonts CDN
           License: SIL OFL 1.1 — free for commercial web embedding
           https://fonts.google.com/specimen/Exo+2/about

   Colors (all pulled from existing main.css):
     Text (default):  #BEA142 — matches existing sidebar gold (client-confirmed)
     Icon (hover):    #33FF33 — matches .body-table-head-green in main.css
     Background:      #00001F — existing sidebar bg, unchanged

   Animation concepts (switch by class on <nav>):
     .concept-a  — Vibration + glow pulse
     .concept-b  — Resonance draw via SVG stroke-dashoffset  (default)
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@1,800&display=swap');

/* ── Container ───────────────────────────────────────────────── */

.vh-sidebar-nav {
  padding: 0;
  margin: 0;
  width: 153px;
}

.vh-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vh-sidebar-nav li {
  margin: 0;
  padding: 0;
  display: block;
}

/* ── Item dividers — delete this one rule to remove them ─────── */
.vh-sidebar-nav li { border-bottom: 1px solid #0d1a38; }


/* ── Links — override global a rules from main.css ───────────── */
/*
   main.css declares:
     a:link    { color: #FFCC00 }
     a:visited { color: #CC9900 }
     a:hover   { color: #FF0000 }
   These must be overridden for the sidebar with higher specificity + !important.
*/

.vh-sidebar-nav a,
.vh-sidebar-nav a:link,
.vh-sidebar-nav a:visited,
.vh-sidebar-nav a:hover,
.vh-sidebar-nav a:focus,
.vh-sidebar-nav a:active {
  color: #D9B33A !important;
  text-decoration: none !important;
}

.vh-sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-end;    /* right-aligned, matching original layout */
  width: 153px;
  height: 40px;
  padding: 0 10px 0 0;
  gap: 7px;
  font-family: 'Exo 2', 'Eurostile', 'Square 721 BT', Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  box-sizing: border-box;
  user-select: none;
  outline: none;
  cursor: pointer;
}


/* ── Label (text) ────────────────────────────────────────────── */

.vh-sidebar-nav .nav-label {
  display: block;
  line-height: 1;
  flex-shrink: 0;
}


/* ── SVG icon wrapper ────────────────────────────────────────── */

.vh-sidebar-nav .nav-icon {
  display: block;
  flex-shrink: 0;
  width: 34px;
  height: 22px;
  overflow: visible;    /* allow outer resonance ring to paint past viewBox edge */
  transform: translateY(2px);   /* nudge down to align with italic text visual center */
}


/* ── SVG element defaults ────────────────────────────────────── */

/* Tuning fork — resting state */
.vha-fork-stem,
.vha-fork-tines {
  stroke: #E0E0E0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}

/* Resonance circle container — invisible at rest */
.vha-fork-rings {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Centre dot */
.vha-ring-dot {
  fill: #33FF33;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Shared ring defaults */
.vha-ring {
  stroke: #33FF33;
  fill: none;
  stroke-linecap: round;
}

/* Ring 1 — inner   r=4,   circumference = 2π×4   = 25.13 */
.vha-ring-1 {
  stroke-width: 1.5;
  stroke-dasharray: 25.13;
  stroke-dashoffset: 25.13;
  transition: stroke-dashoffset 0.28s ease 0.04s;
}

/* Ring 2 — middle  r=6.5, circumference = 2π×6.5 = 40.84 */
.vha-ring-2 {
  stroke-width: 1.5;
  stroke-dasharray: 40.84;
  stroke-dashoffset: 40.84;
  transition: stroke-dashoffset 0.33s ease 0.13s;
}

/* Ring 3 — outer   r=9,   circumference = 2π×9   = 56.55 */
.vha-ring-3 {
  stroke-width: 1;
  stroke-dasharray: 56.55;
  stroke-dashoffset: 56.55;
  transition: stroke-dashoffset 0.38s ease 0.22s;
}


/* =================================================================
   CONCEPT A — VIBRATION + GLOW

   The tuning fork tines oscillate with a slight translateY + rotation
   while a green drop-shadow pulses outward from the icon. The fork
   stays visible throughout — no shape transition.

   Activate: set class="vh-sidebar-nav concept-a" on the <nav>.
   ================================================================= */

/*
   ── ANIMATION TUNING ──────────────────────────────────────────
   Three variables control the tines-only vibration animation.
   The stem never moves — only the tines rotate around their base,
   matching how a real tuning fork rings.

   --vha-angle    Peak rotation of the tines per half-swing.
                  Effective tip travel scales with tine length.
                  Subtle: 1deg   |  Default: 3deg   |  Strong: 6deg

   --vha-speed    Duration of one full vibration cycle.
                  Lower = faster. Match to the feel of the item.
                  Fast: 0.15s   |  Default: 0.2s    |  Slow: 0.5s

   --vha-glow     Duration of one glow pulse cycle.
                  Keep roughly in sync with --vha-speed.
                  Default: 0.5s
   ────────────────────────────────────────────────────────────── */
:root {
  --vha-angle:  4deg;
  --vha-speed:  0.1s;
  --vha-glow:   0.1s;
}

/* Tines-only: pure rotation around the stem junction.
   The stem stays still; tips swing the full arc of --vha-angle. */
@keyframes vha-tines-vibrate {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(calc(-1    * var(--vha-angle))); }
  40%  { transform: rotate(var(--vha-angle)); }
  60%  { transform: rotate(calc(-0.5  * var(--vha-angle))); }
  80%  { transform: rotate(calc( 0.33 * var(--vha-angle))); }
  100% { transform: rotate(0deg); }
}

@keyframes vha-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(51,255,51,0.55)); }
  50%       { filter: drop-shadow(0 0 8px rgba(51,255,51,0.90))
                      drop-shadow(0 0 16px rgba(51,255,51,0.22)); }
}

.concept-a a:hover .nav-icon {
  animation: vha-glow-pulse var(--vha-glow) ease-in-out infinite;
}

/* Both parts turn green — stem stays still, only tines move */
.concept-a a:hover .vha-fork-stem,
.concept-a a:hover .vha-fork-tines {
  stroke: #33FF33;
}

/* Tines pivot at left edge = stem junction, so tips have max travel */
.concept-a a:hover .vha-fork-tines {
  animation: vha-tines-vibrate var(--vha-speed) ease-in-out infinite;
  transform-origin: left center;
  transform-box: fill-box;
}


/* =================================================================
   CONCEPT B — RESONANCE DRAW  (default in sidebar-left.php)

   On hover the fork fades out; concentric circles draw inward-out
   sequentially using the SVG stroke-dashoffset technique. Closest
   in spirit to the original vibrating-fork GIF animation.

   Activate: set class="vh-sidebar-nav concept-b" on the <nav>.
   ================================================================= */

/* Fork disappears */
.concept-b a:hover .vha-fork-stem,
.concept-b a:hover .vha-fork-tines {
  opacity: 0;
}

/* Ring container fades in */
.concept-b a:hover .vha-fork-rings {
  opacity: 1;
}

/* Centre dot appears immediately */
.concept-b a:hover .vha-ring-dot {
  opacity: 1;
}

/* All three rings draw in; individual timing via transition-delay above */
.concept-b a:hover .vha-ring-1,
.concept-b a:hover .vha-ring-2,
.concept-b a:hover .vha-ring-3 {
  stroke-dashoffset: 0;
}