/* ===========================
   INFOGRAPHIC RIBBON
   ---------------------------
   A single narrative line that threads the page from top-right, weaves through
   the page margins (never overlapping the content column), and terminates in a
   glowing landing node at the exact center of the convergence circle in the
   contact section.

   Draw progress is driven by the --scroll CSS variable (0..1) updated in JS,
   which directly sets stroke-dashoffset on the main path.
   =========================== */

.ribbon-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.ribbon-layer svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ribbon-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Restrict horizontal overflow so the wavy path doesn't force scroll */
  overflow: hidden;
}

/* Paint order (no explicit z-index where not needed):
     body background                 flat
     ribbon-root (DOM early)         absolute, paints over body bg
     sections (DOM later)            opaque backgrounds cover ribbon
     .container > content            inherits section stacking
     nav                             z-index: 100
   Ribbon visibility: appears in gaps between sections (padding) and wherever
   sections have transparent/semi-transparent backgrounds.
*/

/* Ribbon sits at z-index: 2 — above parallax photo (z:0) and vignette (z:1),
   but below the section's content container (z:3) so cards can still "cover"
   the ribbon where they overlap. This produces the under/over weave. */
.ribbon-root { z-index: 2; }
.ribbon-under { opacity: 0.92; }

/* The path strokes: accent-colored, progressively drawn.
   pathLength="1" normalizes the path so dashoffset math is simple.
   --draw is a 0..1 value = how much of the path is visible, derived from --scroll. */

.ribbon-path {
  fill: none;
  stroke: var(--ribbon-color);
  stroke-width: var(--ribbon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px var(--ribbon-glow));
}

.ribbon-path--muted {
  opacity: 0.85;
  filter: drop-shadow(0 0 8px var(--ribbon-glow));
}

/* Terminus: large landing node at the main path's end, lands in the center
   of the .convergence-ring in the contact section. */
.ribbon-terminus-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 40px;
  opacity: 0.35;
  animation: ribbon-terminus-glow-pulse 3s ease-in-out infinite;
}

.ribbon-terminus-core {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 16px;
  filter: drop-shadow(0 0 14px var(--ribbon-glow));
}

@keyframes ribbon-terminus-glow-pulse {
  0%, 100% { stroke-width: 40px; opacity: 0.35; }
  50%      { stroke-width: 54px; opacity: 0.15; }
}

/* Content containers paint above the ribbon so card backgrounds can cover it
   where they overlap (produces the "under" illusion). */
.section > .container,
.philosophy > .container,
.contact > .container {
  position: relative;
  z-index: 3;
}

/* ===========================
   CONVERGENCE POINT (where ribbon terminates — "todo converge aquí")
   =========================== */
.convergence {
  position: relative;
  text-align: center;
  padding: 4rem 0 2rem;
}

.convergence-ring {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
}

.convergence-ring svg {
  width: 100%;
  height: 100%;
  animation: orbit 30s linear infinite;
}

/* Convergence-core removed: the ribbon-terminus (inside the global ribbon SVG)
   lands at the center of .convergence-ring via JS measurement, and provides
   the filled landing node. */

/* ===========================
   RESPONSIVE — simplify ribbon on narrower screens
   =========================== */
@media (max-width: 1024px) {
  :root { --ribbon-stroke: 3.5px; }
  .ribbon-under { opacity: 0.75; }
}

@media (max-width: 640px) {
  :root { --ribbon-stroke: 2px; }
  .ribbon-under { opacity: 0.4; }
  .ribbon-path--muted { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-path { stroke-dashoffset: 0 !important; }
  .ribbon-terminus-glow,
  .ribbon-terminus-core { animation: none !important; }
  .convergence-ring svg { animation: none; }
}