/* Dhee Yogalayam | ornaments and gentle motion, site-wide (2026-09-28). Pairs with ornaments.js. */
.orn { display: inline-block; line-height: 0; color: var(--gold, #C9A97D); }
.orn svg { width: 100%; height: 100%; overflow: visible; }
.orn path { stroke-width: var(--orn-sw, 1.4px); }
.orn .orn-dashed { stroke-dasharray: 0.012 0.018; }

/* Lines draw themselves in (only once JS is ready and the element is in view). */
.motion-ready .orn path:not(.orn-dashed) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.33,.1,.25,1); }
.motion-ready .orn.in-view path:not(.orn-dashed) { stroke-dashoffset: 0; }
.motion-ready .orn .orn-dashed { opacity: 0; transition: opacity 1.6s ease .8s; }
.motion-ready .orn.in-view .orn-dashed { opacity: 1; }
.motion-ready .orn.in-view path:nth-child(2) { transition-delay: .25s; }
.motion-ready .orn.in-view path:nth-child(3) { transition-delay: .45s; }
.motion-ready .orn.in-view path:nth-child(4) { transition-delay: .6s; }
.motion-ready .orn.in-view path:nth-child(5) { transition-delay: .75s; }
.motion-ready .orn.in-view path:nth-child(n+6) { transition-delay: .9s; }
.motion-ready .orn.in-view path:nth-child(n+12) { transition-delay: 1.1s; }

/* Fade and rise into place. Neighbouring items get a small increasing delay (--rv-d). */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
.motion-ready [data-reveal].in-view { opacity: 1; transform: none; }
.motion-ready [data-reveal="2"] { --rv-d: .12s; }
.motion-ready [data-reveal="3"] { --rv-d: .24s; }

/* Images unveil gently without layout-clipping or blocking lazy loading. */
.motion-ready .orn-unveil { opacity: 0; transform: scale(1.03); transition: opacity 0.8s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.motion-ready .orn-unveil.in-view { opacity: 1; transform: none; }

/* Hero lines rise in on page load, one after another. */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.motion-ready .hero-rise { animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--hr-d, 0s); }
/* The big DHEE title breathes in. */
@keyframes titleBreathe { from { opacity: 0; letter-spacing: .5em; filter: blur(8px); } to { opacity: 1; filter: none; } }
.motion-ready .hero .hero-title.hero-rise { animation: titleBreathe 1.8s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--hr-d, 0s); }

/* Dividers between sections */
.orn-divider { display: block; width: min(460px, 78vw); height: 46px; margin: 0 auto; color: var(--gold, #C9A97D); opacity: .9; }
.orn-divider-sm { width: min(300px, 64vw); height: 34px; margin: 10px auto 6px; }

/* Slow-turning mandala behind light heroes. */
@keyframes ornSpin { to { transform: rotate(360deg); } }
.orn-mandala { position: absolute; z-index: 0; pointer-events: none; width: min(560px, 90vw); height: min(560px, 90vw); right: -140px; top: -120px; color: var(--gold, #C9A97D); opacity: .16; }
.orn-mandala svg { animation: ornSpin 160s linear infinite; }
.orn-mandala { --orn-line: 1; }
#about > .orn-mandala { right: auto; left: -180px; top: 40px; opacity: .12; }
.hero-portal > .wrap, .lineage-hero > .wrap, .practice-hero > .wrap, #about > .wrap { position: relative; z-index: 1; }

/* Timeline chapters: the thread draws down, and the node glows as each chapter arrives. */
.motion-ready .chapter::before { transform-origin: top; transform: scaleY(0); transition: transform 1.8s cubic-bezier(.3,.1,.2,1) .3s; }
.motion-ready .chapter.in-view::before { transform: scaleY(1); }
@keyframes nodeGlow { 0% { box-shadow: 0 0 0 0 rgba(201,169,125,.55); } 100% { box-shadow: 0 0 0 14px rgba(201,169,125,0); } }
.motion-ready .chapter.in-view .chapter-node { animation: nodeGlow 1.6s ease-out .4s 2; }

/* Gold thread at the top that follows the scroll. */
.orn-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(201,169,125,0), #C9A97D 30%, #E7C27A 70%, rgba(231,194,122,.4)); }

/* Slow breathing glow for small accents */
@keyframes ornBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.orn-breathe { animation: ornBreathe 5s ease-in-out infinite; }

/* Drifting embers for dark bands (purely decorative). */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #E7C27A; opacity: 0; box-shadow: 0 0 8px 2px rgba(231,194,122,.55); animation: emberRise linear infinite; }
@keyframes emberRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translateY(-520px) translateX(28px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .orn-breathe, .embers i, .orn-mandala svg { animation: none; }
  .embers { display: none; }
}
@media print {
  .embers, .orn-progress, .orn-mandala { display: none !important; }
  [data-reveal], .orn-unveil, .hero-rise { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .orn path { stroke-dashoffset: 0 !important; }
}