/* ═══════════════════════════════════════════════════════════
   SCROLL ILLUSTRATIONS — Floating shapes, section dividers,
   text shimmer, particle canvas, decorative dots
   ═══════════════════════════════════════════════════════════ */

/* ── Floating Geometric Shapes ── */
.scroll-shapes {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1;
}
.scroll-shape {
  position: absolute; opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.22,1,0.36,1);
}
.scroll-shape.is-visible { opacity: 1; }

/* Circle outlines */
.scroll-shape--circle {
  width: clamp(80px, 12vw, 180px); height: clamp(80px, 12vw, 180px);
  border: 1px solid var(--c-brass-dim); border-radius: 50%;
  opacity: 0.12;
}
.scroll-shape--circle-sm {
  width: clamp(40px, 6vw, 90px); height: clamp(40px, 6vw, 90px);
  border: 1px solid var(--c-brass); border-radius: 50%;
  opacity: 0.08;
}

/* Dotted line */
.scroll-shape--dots {
  width: clamp(120px, 18vw, 280px); height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--c-brass-dim) 0 3px, transparent 3px 12px);
  opacity: 0.15;
}

/* Triangle outline */
.scroll-shape--tri {
  width: 0; height: 0;
  border-left: clamp(30px, 5vw, 60px) solid transparent;
  border-right: clamp(30px, 5vw, 60px) solid transparent;
  border-bottom: clamp(52px, 8.6vw, 104px) solid transparent;
  filter: drop-shadow(0 0 0 var(--c-brass-dim));
  opacity: 0.1;
}
.scroll-shape--tri::after {
  content: ""; position: absolute;
  left: calc(-1 * clamp(28px, 4.6vw, 56px));
  top: 2px;
  border-left: clamp(28px, 4.6vw, 56px) solid transparent;
  border-right: clamp(28px, 4.6vw, 56px) solid transparent;
  border-bottom: clamp(48px, 8vw, 97px) solid var(--c-void);
}

/* Cross / Plus mark */
.scroll-shape--cross {
  width: clamp(24px, 3vw, 40px); height: clamp(24px, 3vw, 40px);
  position: relative; opacity: 0.12;
}
.scroll-shape--cross::before,
.scroll-shape--cross::after {
  content: ""; position: absolute; background: var(--c-brass-dim);
}
.scroll-shape--cross::before {
  left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%);
}
.scroll-shape--cross::after {
  top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%);
}

/* Diamond shape */
.scroll-shape--diamond {
  width: clamp(16px, 2vw, 28px); height: clamp(16px, 2vw, 28px);
  border: 1px solid var(--c-brass); transform: rotate(45deg);
  opacity: 0.14;
}

/* Positioning per section */
.expertise .scroll-shape:nth-child(1) { top: 8%; right: 5%; }
.expertise .scroll-shape:nth-child(2) { bottom: 15%; left: 3%; }
.expertise .scroll-shape:nth-child(3) { top: 45%; right: 2%; }

.compare .scroll-shape:nth-child(1) { top: 10%; left: 4%; }
.compare .scroll-shape:nth-child(2) { bottom: 12%; right: 6%; }
.compare .scroll-shape:nth-child(3) { top: 55%; left: 8%; }

.phases .scroll-shape:nth-child(1) { top: 5%; right: 8%; }
.phases .scroll-shape:nth-child(2) { bottom: 20%; left: 2%; }

.cta .scroll-shape:nth-child(1) { top: 15%; left: 8%; }
.cta .scroll-shape:nth-child(2) { bottom: 18%; right: 5%; }
.cta .scroll-shape:nth-child(3) { top: 40%; right: 12%; }

/* ── Animated Section Dividers ── */
.section-line {
  display: block; width: 100%; max-width: var(--maxw); height: 1px;
  margin: 0 auto; position: relative; overflow: hidden;
}
.section-line::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-brass-dim) 20%,
    var(--c-brass) 50%,
    var(--c-brass-dim) 80%,
    transparent 100%);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-line.is-drawn::before { transform: scaleX(1); }

/* Glow variant */
.section-line--glow::after {
  content: ""; position: absolute;
  inset: -4px 20% -4px 20%;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.25) 0%, transparent 70%);
  opacity: 0; transition: opacity 1.2s ease 0.4s;
}
.section-line--glow.is-drawn::after { opacity: 1; }

/* ── Particle Canvas (CTA section) ── */
.ink-particles {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; width: 100%; height: 100%;
  opacity: 0.6;
}

/* ── Text Shimmer on Headings ── */
@keyframes text-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.sec-title.is-shimmering {
  background: linear-gradient(
    90deg,
    var(--c-paper) 0%,
    var(--c-paper) 35%,
    var(--c-brass-hi) 50%,
    var(--c-paper) 65%,
    var(--c-paper) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s ease-in-out 1 forwards;
}
.sec-title.is-shimmering em {
  -webkit-text-fill-color: var(--c-brass);
}

/* ── Capacity Number Glow Pulse ── */
@keyframes capacity-glow {
  0% { text-shadow: 0 0 0 rgba(212,175,55,0); -webkit-text-stroke-color: var(--c-brass); }
  50% { text-shadow: 0 0 80px rgba(212,175,55,0.5), 0 0 160px rgba(212,175,55,0.2);
        -webkit-text-stroke-color: var(--c-brass-hi); }
  100% { text-shadow: 0 0 40px rgba(212,175,55,0.15); -webkit-text-stroke-color: var(--c-brass); }
}
.capacity__num.is-glowing {
  animation: capacity-glow 2.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* ── Scroll Progress Decorative Dots ── */
.scroll-dots {
  position: fixed; left: max(0.8rem, 1vw); top: 50%;
  transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.scroll-dots__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-2);
  transition: background 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.scroll-dots__dot.is-filled {
  background: var(--c-brass); transform: scale(1.5);
}
@media (max-width: 1200px) { .scroll-dots { display: none; } }

/* ── Footer Columns Entrance ── */
html.js .footer__cols > div {
  opacity: 0; transform: translateY(24px);
}
html.js .footer__cols > div.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
html.js .footer__cols > div:nth-child(1) { transition-delay: 0s; }
html.js .footer__cols > div:nth-child(2) { transition-delay: 0.12s; }
html.js .footer__cols > div:nth-child(3) { transition-delay: 0.24s; }

/* ── Footer Legal Entrance ── */
html.js .footer__legal {
  opacity: 0; transform: translateY(16px);
}
html.js .footer__legal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

/* ── Fit Section Card-lift Entrance ── */
html.js .fit__col {
  opacity: 0; transform: translateY(30px) scale(0.97);
}
html.js .fit__col.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
html.js .fit__col:nth-child(3) { transition-delay: 0.15s; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-shape,
  .section-line::before,
  .section-line--glow::after,
  .ink-particles,
  .scroll-dots__dot,
  html.js .footer__cols > div,
  html.js .footer__legal,
  html.js .fit__col {
    animation: none !important;
    transition-duration: 0.01ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sec-title.is-shimmering {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--c-paper) !important;
  }
  .capacity__num.is-glowing { animation: none !important; }
}