/* ga-scroll-ornaments.css */

/* Tall track, same as .relic-scroll. The stage inside reuses
   .relic-scroll__stage (sticky, 100svh) and the text classes from
   relic-scroll.css, so nothing about those is redefined here.
   Length per instance: style="--relic-scroll-length: 400svh" */
.ga-ornaments {
  position: relative;
  height: var(--relic-scroll-length, 300vh);
  height: var(--relic-scroll-length, 300svh);
}

/* Canvas sits behind the text (text has z-index: 2 in relic-scroll.css) */
.ga-ornaments__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ga-ornaments.is-ready .ga-ornaments__canvas { opacity: 1; }

/* Anchor boxes: invisible, the 3D object is fitted into them. */
[data-ornament] {
  position: absolute;
}
.ga-ornaments[data-debug] [data-ornament] {
  outline: 1px dashed rgba(139, 21, 56, 0.7);
}

/* ---- presets: tweak freely ---------------------------------------- */

/* Thorn rings, partly cut off by the corners */
.ga-orn--ring-tl,
.ga-orn--ring-br {
  width: clamp(260px, 38vw, 620px);
  aspect-ratio: 1;
}
.ga-orn--ring-tl { left: -9vw; top: -9vw; }
.ga-orn--ring-br { right: -9vw; bottom: -9vw; }

/* Chains: vertical bands hugging the edges */
.ga-orn--chain-left,
.ga-orn--chain-right {
  top: 0;
  bottom: 0;
  width: clamp(70px, 9vw, 150px);
}
.ga-orn--chain-left  { left: 3vw; }
.ga-orn--chain-right { right: 3vw; }

/* Close-up hero object peeking in from the right */
.ga-orn--peek-right {
  right: -18vw;
  top: 50%;
  translate: 0 -50%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
}

@media (max-width: 768px) {
  .ga-orn--ring-tl,
  .ga-orn--ring-br { width: 62vw; }
  .ga-orn--ring-tl { left: -20vw; top: -14vw; }
  .ga-orn--ring-br { right: -20vw; bottom: -14vw; }

  .ga-orn--chain-left,
  .ga-orn--chain-right { width: 56px; }
  .ga-orn--chain-left  { left: 0; }
  .ga-orn--chain-right { right: 0; }

  .ga-orn--peek-right { right: -40vw; width: 100vw; }
}