/* =====================================================================
   sun-art.css — styling + motion for the SVG sun scenes (sun.js).
   ===================================================================== */

.scene { width: 100%; height: 100%; display: block; }

/* ---- rays group leans toward the pointer ---- */
.rays {
    transform-box: view-box;
    transform-origin: 50% 84%;
    transform: rotate(var(--lean, 0deg));
    transition: transform 0.5s var(--ease);
}

/* god-ray wedges (aurora) */
.wedge {
    fill: var(--ray);
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: wedgeFlow var(--d, 6s) var(--dl, 0s) ease-in-out infinite alternate;
}
@keyframes wedgeFlow { from { opacity: 0.28; } to { opacity: 0.62; } }

/* thin line rays (horizon) — light travels OUTWARD from the sun and pulses.
   A dash pattern animated along each ray reads as motes of light streaming
   away from the disc; a second animation pulses the brightness. */
.ray {
    stroke: var(--ray); stroke-width: 2.4; stroke-linecap: round;
    mix-blend-mode: screen;
    stroke-dasharray: 13 30;
    animation: rayTravel var(--d, 5s) linear infinite,
               rayPulse calc(var(--d, 5s) / 2) ease-in-out infinite alternate;
}
.ray-lg { stroke-width: 3.4;
    animation: rayTravel var(--d, 5s) linear infinite,
               rayPulseLg calc(var(--d, 5s) / 2) ease-in-out infinite alternate; }
.ray-sm { stroke-width: 1.5;
    animation: rayTravel var(--d, 5s) linear infinite,
               rayPulseSm calc(var(--d, 5s) / 2) ease-in-out infinite alternate; }
/* negative offset = pattern flows from sun toward the outer end (outward).
   -86 is 2× the 43px dash period, so the loop is seamless. */
@keyframes rayTravel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -86; } }
@keyframes rayPulse   { from { opacity: 0.30; } to { opacity: 0.85; } }
@keyframes rayPulseLg { from { opacity: 0.44; } to { opacity: 1; } }
@keyframes rayPulseSm { from { opacity: 0.14; } to { opacity: 0.52; } }

/* halo bloom */
.halo { transform-box: fill-box; transform-origin: center; animation: haloBreath 5.5s ease-in-out infinite; }
@keyframes haloBreath { 0%,100% { transform: scale(0.96); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }

/* disc + core */
.disc { transform-box: fill-box; transform-origin: center; }
.core { transform-box: fill-box; transform-origin: center; animation: corePulse 4s ease-in-out infinite; }
@keyframes corePulse { 0%,100% { opacity: 0.78; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.05); } }
.rim { animation: rimPulse 3.5s ease-in-out infinite; }
@keyframes rimPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* corona rings (eclipse) */
.corona { transform-box: fill-box; transform-origin: center; opacity: 0.5;
    animation: coronaPulse var(--d, 6s) var(--dl, 0s) ease-in-out infinite; }
@keyframes coronaPulse {
    0%,100% { transform: scale(0.98); opacity: 0.28; }
    50% { transform: scale(1.04); opacity: 0.6; }
}

/* motes */
.mote {
    fill: var(--sun-core); mix-blend-mode: screen; opacity: 0;
    animation: moteDrift var(--d, 8s) var(--dl, 0s) ease-in-out infinite;
}
@keyframes moteDrift {
    0% { opacity: 0; transform: translate(0, 8px); }
    25% { opacity: 0.7; }
    50% { opacity: 0.9; transform: translate(var(--mx, 0px), -14px); }
    75% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(0, 8px); }
}

/* horizon + water */
.horizon { stroke: var(--sun-core); stroke-width: 1.5; opacity: 0.45; }
.wave { fill: none; stroke: var(--sun-core); stroke-width: 1.4; opacity: var(--o, 0.2);
    animation: waveDrift var(--d, 7s) ease-in-out infinite; }
@keyframes waveDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
.glint { stroke: var(--sun-core); stroke-width: 2; stroke-linecap: round; opacity: 0.3;
    mix-blend-mode: screen; animation: glintPulse var(--d, 4s) var(--dl, 0s) ease-in-out infinite; }
@keyframes glintPulse { 0%,100% { opacity: 0.12; } 50% { opacity: 0.4; } }

/* ---- hover/touch boost: intensify rays + halo ---- */
.sky.boost .rays { filter: brightness(1.5) saturate(1.12); }
.sky.boost .rays .wedge { opacity: 0.92; }
.sky.boost .halo { transform: scale(1.08); opacity: 1; }
.sky.boost .core { opacity: 1; }

/* ---- entrance ---- */
.scene.enter .disc { animation: discIn 1.5s var(--ease) both; }
@keyframes discIn { 0% { opacity: 0; transform: translateY(60px) scale(0.6); } 50% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.scene.enter .rays { animation: raysIn 1.6s var(--ease) 0.15s both; }
@keyframes raysIn { from { opacity: 0; } to { opacity: 1; } }

.scene.enter .wedge { animation: wedgeIn 1.1s ease-out both, wedgeFlow var(--d,6s) var(--dl,0s) ease-in-out 1.2s infinite alternate; }
@keyframes wedgeIn { from { opacity: 0; } to { opacity: 0.5; } }

.scene.enter .halo { animation: haloIn 1.8s var(--ease) both, haloBreath 5.5s ease-in-out 1.8s infinite; }
@keyframes haloIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.9; transform: scale(1); } }

.scene.enter .horizon { animation: hzDraw 1.1s ease-out both; }
@keyframes hzDraw { from { opacity: 0; stroke-dasharray: 1300; stroke-dashoffset: 1300; } to { opacity: 0.45; stroke-dasharray: 1300; stroke-dashoffset: 0; } }

.scene.enter .water { animation: waterIn 1.2s ease 0.5s both; }
@keyframes waterIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.scene.enter .rings .corona { animation: coronaIn 1.4s var(--ease) both, coronaPulse var(--d,6s) var(--dl,0s) ease-in-out 1.4s infinite; }
@keyframes coronaIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 0.5; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .wedge, .ray, .mote, .wave, .glint, .corona, .halo, .core, .rim { animation: none !important; }
    .ray { stroke-dasharray: none; opacity: 0.6; }
    .mote { opacity: 0.5; }
    .scene.enter .disc, .scene.enter .rays, .scene.enter .halo, .scene.enter .water, .scene.enter .horizon { animation: fadeOnly 0.5s ease both; }
    @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
}