/* ── Geometric Ornaments — Precision Rule System ─────────────── */
/*
 * Three ornament types, all using straight lines + geometric nodes:
 *   .section-ornament  — full-width rule with nodes, between page sections
 *   .hero-ornament     — three stacked rules of decreasing width, in the hero
 *   .title-ornament    — ruled arms + central diamond, under section titles
 *
 * Add .is-visible (via IntersectionObserver in JS) to trigger draw animation.
 * All ornaments expand symmetrically from their centre point.
 */

/* ── Shared ──────────────────────────────────────────────────── */

.section-ornament,
.hero-ornament,
.title-ornament {
  display: block;
  color: var(--color-accent);
  overflow: visible;
}

/* ── Section ornament ────────────────────────────────────────── */

.section-ornament {
  width: 100%;
  height: auto;
}

.ornament__rail {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.ornament__node {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.ornament__center {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.section-ornament.is-visible .ornament__rail {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.section-ornament.is-visible .ornament__center {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   0.3s ease           0.3s,
    transform 0.4s var(--ease-out) 0.3s;
}

.section-ornament.is-visible .ornament__node--quarter {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   0.3s ease           0.7s,
    transform 0.3s var(--ease-out) 0.7s;
}

.section-ornament.is-visible .ornament__node--end {
  opacity: 0.45;
  transform: scale(1);
  transition:
    opacity   0.3s ease           1.15s,
    transform 0.3s var(--ease-out) 1.15s;
}

/* ── Hero ornament ───────────────────────────────────────────── */

.hero-ornament {
  margin: var(--sp-4) 0 var(--sp-3);
  color: rgba(255, 255, 255, 0.5);
}

.hero-ornament__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.85;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero-ornament__dot {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.hero-ornament.is-visible .hero-ornament__line--1 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.hero-ornament.is-visible .hero-ornament__line--2 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.55s;
}
.hero-ornament.is-visible .hero-ornament__line--3 {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.75s;
}
.hero-ornament.is-visible .hero-ornament__dot {
  opacity: 0.7;
  transform: scale(1);
  transition:
    opacity   0.3s ease           1.3s,
    transform 0.3s var(--ease-out) 1.3s;
}

/* ── Title ornament ──────────────────────────────────────────── */

.title-ornament {
  margin: var(--sp-1) auto var(--sp-4);
}

.title-ornament__arm {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.title-ornament__diamond {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.title-ornament__node {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.title-ornament.is-visible .title-ornament__arm--left {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.title-ornament.is-visible .title-ornament__arm--right {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.title-ornament.is-visible .title-ornament__node {
  opacity: 0.6;
  transform: scale(1);
  transition:
    opacity   0.25s ease           0.5s,
    transform 0.25s var(--ease-out) 0.5s;
}
.title-ornament.is-visible .title-ornament__diamond {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   0.3s ease           0.65s,
    transform 0.3s var(--ease-out) 0.65s;
}

/* ── Reduce motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ornament__rail,
  .ornament__node,
  .ornament__center,
  .hero-ornament__line,
  .hero-ornament__dot,
  .title-ornament__arm,
  .title-ornament__diamond,
  .title-ornament__node {
    transition: none !important;
  }

  .section-ornament.is-visible .ornament__rail,
  .hero-ornament.is-visible .hero-ornament__line--1,
  .hero-ornament.is-visible .hero-ornament__line--2,
  .hero-ornament.is-visible .hero-ornament__line--3,
  .title-ornament.is-visible .title-ornament__arm--left,
  .title-ornament.is-visible .title-ornament__arm--right {
    stroke-dashoffset: 0;
  }

  .section-ornament.is-visible .ornament__node,
  .section-ornament.is-visible .ornament__center,
  .hero-ornament.is-visible .hero-ornament__dot,
  .title-ornament.is-visible .title-ornament__diamond,
  .title-ornament.is-visible .title-ornament__node {
    opacity: 1;
    transform: scale(1);
  }
}