/* ===== Section veins — content-specific art ===== */

.has-vein {
  position: relative;
  overflow: hidden;
}

.has-vein > .container {
  position: relative;
  z-index: 3;
}

/* Side SVG panel */
.section-vein {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: clamp(80px, 9vw, 130px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

.section-vein--back {
  width: clamp(56px, 6vw, 90px);
  opacity: 0;
  z-index: 0;
}

.section-vein--front { z-index: 2; }

.section-vein--left { left: max(0px, calc((100vw - var(--max-width)) / 2 - 145px)); }
.section-vein--right { right: max(0px, calc((100vw - var(--max-width)) / 2 - 145px)); }
.section-vein--back.section-vein--left { left: max(0px, calc((100vw - var(--max-width)) / 2 - 95px)); }
.section-vein--back.section-vein--right { right: max(0px, calc((100vw - var(--max-width)) / 2 - 95px)); }

.section-vein svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG labels */
.vein-label {
  fill: rgba(233, 244, 230, 0.58);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  opacity: 0;
}

.vein-caption {
  fill: rgba(255, 255, 255, 0.28);
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  opacity: 0;
}

/* Stroke paths */
.vein {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--vein-len, 500);
  stroke-dashoffset: var(--vein-len, 500);
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--vein-delay, 0s);
}

.vein--primary { stroke-width: 2; }
.vein--thin { stroke-width: 1; opacity: 0.75; }
.vein--ghost { stroke-width: 1; opacity: 0.35; stroke-dasharray: 4 10; }
.vein--accordion { stroke-width: 1; opacity: 0.5; }
.vein--guide { stroke-width: 0.75; opacity: 0.4; stroke-dasharray: 3 6; }
.vein--reach { stroke-width: 1; opacity: 0.6; }
.vein--film { stroke-width: 1; opacity: 0.45; }
.vein--grid { stroke-width: 0.75; opacity: 0.35; }
.vein--bubble { stroke-width: 1; opacity: 0.5; }
.vein--plus { stroke-width: 1.25; opacity: 0.7; stroke-dasharray: none; stroke-dashoffset: 0; }
.vein--frame { stroke-width: 1.5; }
.vein--block { stroke-width: 1.25; opacity: 0.65; }
.vein--slot { stroke-width: 1; opacity: 0.45; fill: rgba(82, 220, 69, 0.07); }
.vein--slot.vein--active { opacity: 0.9; fill: rgba(233, 244, 230, 0.12); }

.vein--node {
  fill: rgba(107, 255, 90, 0.12);
  stroke-width: 1.5;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  scale: 0;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--vein-delay, 0s);
}

.has-vein.vein-active .section-vein--front,
.has-vein.vein-active .section-vein--back {
  opacity: 1;
}

.has-vein.vein-active .section-vein--back {
  opacity: 0.45;
}

.has-vein.vein-active .vein:not(.vein--node):not(.vein--plus) {
  stroke-dashoffset: 0;
}

.has-vein.vein-active .vein--node {
  scale: 1;
}

.has-vein.vein-active .vein--plus {
  opacity: 0.7;
}

/* Particles — count matches section items */
.section-particles {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: clamp(70px, 8vw, 120px);
  pointer-events: none;
  z-index: 2;
}

.section-particles--left { left: max(0px, calc((100vw - var(--max-width)) / 2 - 135px)); }
.section-particles--right { right: max(0px, calc((100vw - var(--max-width)) / 2 - 135px)); }

.section-particle {
  position: absolute;
  top: var(--p-top, 50%);
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(107, 255, 90, 0.85);
  box-shadow: 0 0 8px rgba(82, 220, 69, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.has-vein.vein-active .section-particle {
  animation: particleIn 0.5s ease var(--p-delay, 0s) forwards;
}

@keyframes particleIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Golden border */
.section-gold-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.section-gold-border__edge {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(82,220,69,0.15), rgba(107,255,90,0.7), rgba(233,244,230,0.25), transparent);
  background-size: 200% 100%;
}

.section-gold-border__edge--top { top: 0; }
.section-gold-border__edge--bottom { bottom: 0; }

.section-gold-border__sweep {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(82,220,69,0.08) 50%, transparent 58%);
  background-size: 250% 100%;
}

.has-vein.vein-active .section-gold-border__edge--top {
  animation: goldEdgeReveal 1.2s ease forwards, goldShiver 3s ease-in-out 1.2s infinite;
}

.has-vein.vein-active .section-gold-border__edge--bottom {
  animation: goldEdgeReveal 1.2s ease 0.15s forwards;
}

.has-vein.vein-active .section-gold-border__sweep {
  animation: goldSweep 2s ease 0.3s forwards;
}

.has-vein.vein-active .section-gold-border--scan .section-gold-border__sweep {
  animation: goldSweep 1.8s ease forwards, goldScan 2.5s ease 1s infinite;
}

.has-vein.vein-active .section-gold-border--nodes .section-gold-border__edge--top {
  animation: goldEdgeReveal 1.2s ease forwards, nodePulse 2s ease 1s infinite;
}

.has-vein.vein-active .section-gold-border--beam .section-gold-border__edge--top,
.has-vein.vein-active .section-gold-border--beam .section-gold-border__edge--bottom {
  animation: goldBeam 1.6s ease forwards;
}

@keyframes goldEdgeReveal {
  0% { opacity: 0; background-position: -100% 0; }
  100% { opacity: 0.6; background-position: 100% 0; }
}

@keyframes goldShiver {
  0%, 88%, 100% { transform: translateX(0); filter: brightness(1); }
  90% { transform: translateX(0.5px); filter: brightness(1.3); }
  92% { transform: translateX(-0.4px); }
  94% { transform: translateX(0.3px); }
}

@keyframes goldSweep {
  0% { opacity: 0; background-position: -100% 0; }
  40% { opacity: 1; }
  100% { opacity: 0; background-position: 200% 0; }
}

@keyframes goldScan {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.7; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

@keyframes goldBeam {
  0% { opacity: 0; transform: scaleX(0); }
  45% { opacity: 1; transform: scaleX(1); }
  72% { filter: brightness(1.35); }
  74% { filter: brightness(1); }
  100% { opacity: 0.15; transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .section-vein,
  .section-particles,
  .section-gold-border {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vein { stroke-dashoffset: 0; transition: none; }
  .vein--node { scale: 1; }
  .vein-label, .vein-caption { opacity: 0.5; }
  .section-vein { opacity: 0.3; }
  .section-gold-border__edge,
  .section-gold-border__sweep,
  .section-particle {
    animation: none !important;
    opacity: 0.2;
  }
}