/* Decoration stays behind the stationary reading/clickable layer. */
.hero-with-art { position: relative; isolation: isolate; overflow: hidden; }
.hero-content, .hero-with-art::before { position: relative; z-index: 1; }
.hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-parallax { position: absolute; inset: -20px; }
.hero-scene { -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 72%); mask-image: linear-gradient(90deg, transparent 25%, #000 72%); }
.hero-svg { position: absolute; width: 76%; height: 125%; right: -7%; top: -12%; overflow: visible; }
.hero-mesh, .hero-light { position: absolute; inset: -15%; }
.hero-mesh { background: radial-gradient(ellipse at 83% 35%, #71aaff38, transparent 42%), radial-gradient(ellipse at 55% 100%, #09265670, transparent 65%); animation: hero-mesh-drift 26s ease-in-out infinite paused; }
.hero-light { background: radial-gradient(ellipse at 78% 20%, #b2daff25, transparent 35%); animation: hero-light-drift 19s ease-in-out infinite paused; }
.hero-motion-layer { animation-play-state: paused; }
.hero-with-art[data-motion="running"] .hero-motion-layer { animation-play-state: running; }

/* Academic: translucent grid planes separated in true CSS perspective. */
.hero-grid-stage { position: absolute; width: 310px; height: 310px; top: 50%; right: 12%; margin-top: -145px; perspective: 900px; }
.hero-grid-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-32deg); animation: hero-grid-turn 28s ease-in-out infinite paused; }
.hero-grid-plane { position: absolute; inset: 0; border: 1px solid #c5e6ff85; border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 37px, #d3eeff26 37px 38px), repeating-linear-gradient(90deg, transparent 0 37px, #d3eeff26 37px 38px), linear-gradient(135deg, #d9eeff22, #619fee06); box-shadow: 0 25px 50px #071c4c29, inset 0 0 30px #a4d5ff0a; }
.hero-grid-rear { transform: translateZ(-90px); opacity: .4; }
.hero-grid-middle { transform: translateZ(0); opacity: .65; }
.hero-grid-front { transform: translateZ(90px); }
.hero-grid-diagonal { position: absolute; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, #e5f5ff, transparent); top: 50%; left: 15%; transform: rotate(-45deg); }
.hero-grid-point { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e1f4ff; box-shadow: 0 0 12px 3px #a5d5ff75; top: 24%; left: 24%; }
.hero-grid-point:nth-of-type(2) { top: 73%; left: 61%; }
.hero-grid-point:nth-of-type(3) { top: 36%; left: 85%; }
.hero-academic-points { animation: hero-light-drift 14s ease-in-out infinite paused; }

/* Innovation: lit sphere with rings passing behind and in front. */
[data-theme="innovation"] .hero-mesh { background: radial-gradient(ellipse at 80% 28%, #b8a1ff52, transparent 35%), radial-gradient(ellipse at 63% 86%, #3f2e8766, transparent 45%), radial-gradient(ellipse at 100% 70%, #53b4d429, transparent 40%); }
[data-theme="innovation"] .hero-light { background: radial-gradient(ellipse at 73% 28%, #eee6ff2e, transparent 28%); }
.hero-orbit-float { transform-box: fill-box; transform-origin: center; animation: hero-orbit-float 18s ease-in-out infinite paused; }
.hero-orbit-dots { transform-box: view-box; transform-origin: 0 0; animation: hero-orbit-spin 46s linear infinite paused; }

/* Nature: shaded leaves and a second branch swaying in the distance. */
[data-theme="nature"] .hero-mesh { background: radial-gradient(ellipse at 92% 70%, #64826038, transparent 45%), radial-gradient(ellipse at 60% 0%, #fff8d88c, transparent 60%); }
[data-theme="nature"] .hero-light { background: radial-gradient(ellipse at 85% 6%, #fffbeaaa, transparent 43%); }
.hero-leaf-main, .hero-leaf-rear { transform-box: view-box; transform-origin: 342px 648px; animation: hero-leaf-sway 20s ease-in-out infinite paused; }
.hero-leaf-rear { animation-duration: 27s; animation-delay: -9s; }
.hero-breeze { animation: hero-breeze 24s ease-in-out infinite paused; }

/* Repeating 720-unit wave tiles have matching endpoints and tangents. */
[data-theme="contemporary"] .hero-mesh { background: radial-gradient(ellipse at 85% 15%, #89ede533, transparent 50%), radial-gradient(ellipse at 60% 100%, #092d5280, transparent 60%); }
[data-theme="contemporary"] .hero-light { background: radial-gradient(ellipse at 82% 42%, #a1faf321, transparent 42%); }
.hero-wave-svg { width: 100%; height: 135%; right: -15%; top: -15%; }
.hero-wave-track { animation: hero-wave-flow 32s linear infinite paused; }
.hero-wave-mid { animation-duration: 26s; animation-delay: -9s; }
.hero-wave-near { animation-duration: 20s; animation-delay: -13s; }

/* Ceremony: mirrored gold edges with a travelling reflection. */
[data-theme="ceremony"] .hero-scene { inset: 0; -webkit-mask-image: none; mask-image: none; }
[data-theme="ceremony"] .hero-mesh { background: radial-gradient(ellipse at 50% 0%, #c9995529, transparent 55%), radial-gradient(ellipse at 50% 100%, #270b2480, transparent 70%); }
[data-theme="ceremony"] .hero-light { background: radial-gradient(ellipse at 50% 30%, #f4db9921, transparent 60%); }
.hero-formal-svg { inset: 0; width: 100%; height: 100%; overflow: hidden; }
.hero-gold-sweep { animation: hero-gold-sweep 22s linear infinite paused; }
.hero-gold-particle { animation: hero-gold-rise 19s linear infinite paused; }

/* Matching end poses, full rotations and invisible resets keep loops seamless. */
@keyframes hero-mesh-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 2%, 0) scale(1.08); } }
@keyframes hero-light-drift { 0%, 100% { opacity: .6; transform: translate3d(0, 0, 0); } 50% { opacity: 1; transform: translate3d(-16px, 12px, 0); } }
@keyframes hero-grid-turn { 0%, 100% { transform: rotateX(52deg) rotateY(-6deg) rotateZ(-32deg); } 50% { transform: rotateX(61deg) rotateY(7deg) rotateZ(-25deg); } }
@keyframes hero-orbit-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(3deg); } }
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hero-leaf-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes hero-breeze { 0%, 100% { opacity: .45; transform: translate(-8px, 4px); } 50% { opacity: 1; transform: translate(12px, -5px); } }
@keyframes hero-wave-flow { to { transform: translateX(-720px); } }
@keyframes hero-gold-sweep { from { transform: translateX(0); } to { transform: translateX(1820px); } }
@keyframes hero-gold-rise { 0% { opacity: 0; transform: translateY(0); } 20%, 70% { opacity: .85; } 100% { opacity: 0; transform: translateY(-75px); } }

@media (max-width: 991.98px) {
    .hero-grid-stage { right: 5%; width: 260px; height: 260px; }
    .hero-scene { opacity: .8; }
}
@media (max-width: 767.98px) {
    .hero-scene { opacity: .52; -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 100%); mask-image: linear-gradient(90deg, transparent 12%, #000 100%); }
    .hero-svg { width: 150%; height: 90%; right: -60%; top: -5%; }
    .hero-grid-stage { width: 230px; height: 230px; right: -14%; top: 37%; }
    .hero-grid-rear { display: none; }
    .hero-wave-svg { width: 175%; right: -55%; height: 110%; top: 5%; }
    [data-theme="nature"] .hero-scene { opacity: .4; }
    .hero-leaf-rear { display: none; }
    [data-theme="ceremony"] .hero-scene { opacity: .7; }
    .hero-formal-svg { width: 100%; height: 100%; inset: 0; }
    .hero-gold-particle:nth-last-child(-n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-motion-layer { animation: none !important; }
    .hero-parallax { transform: none !important; }
    .hero-gold-particle { opacity: .5; }
}
@media print { .hero-art { display: none !important; } }