/* Black opening; a warm, flowing mesh is revealed by pointer interaction. */
.hero-gradient { position:absolute; inset:0; overflow:hidden; pointer-events:none; background:#000; --gradient-x:75%; --gradient-y:50%; }
.hero-gradient-glow { position:absolute; left:var(--gradient-x); top:var(--gradient-y); width:clamp(240px,30vw,420px); height:clamp(240px,38vh,380px); translate:-50% -50%; opacity:0; transition:opacity 1.1s cubic-bezier(.16,1,.3,1); }
.hero-gradient.is-awake .hero-gradient-glow { opacity:1; }
.hero-gradient-glow::before { content:""; position:absolute; inset:-6%; background:radial-gradient(ellipse at 53% 41%,#ff941be6 0%,#ff651ca6 19%,transparent 47%),radial-gradient(ellipse at 69% 59%,#ff392980 0%,#ee351f66 22%,transparent 50%),radial-gradient(ellipse at 33% 66%,#a23aff99 0%,#7324e766 23%,transparent 49%); filter:blur(28px); mask-image:radial-gradient(ellipse,#000 20%,transparent 69%); animation:heroGradientFlow 12s cubic-bezier(.45,0,.55,1) infinite alternate; will-change:transform; }
.hero-gradient::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0007,transparent 68%),linear-gradient(0deg,#0006,transparent 35%,transparent 80%,#0003); }
.hero-gradient-grain { position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1s ease; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.hero-gradient.is-awake .hero-gradient-grain { opacity:.17; }
@keyframes heroGradientFlow { 0% { transform:translate3d(-4%,-2%,0) scale(.96); } 50% { transform:translate3d(2%,-3%,0) scale(1.05); } 100% { transform:translate3d(4%,4%,0) scale(1.1); } }
.hero-gradient.is-paused .hero-gradient-glow::before { animation-play-state:paused; }
@media(max-width:767px) { .hero-gradient-glow { width:280px; height:300px; } .hero-gradient-glow::before { filter:blur(32px); } .hero-gradient::after { background:linear-gradient(180deg,#0007,transparent 48%,#0006),linear-gradient(90deg,#0005,transparent 90%); } }
@media(prefers-reduced-motion:reduce) { .hero-gradient-glow::before { animation:none; will-change:auto; } .hero-gradient-glow,.hero-gradient-grain { transition:none; } }
/* Residual pigment and gently expanding water-like ripples. */
.hero-gradient-water { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-gradient.is-awake .hero-gradient-glow { opacity:.45; }
@media(prefers-reduced-motion:reduce) { .hero-gradient-water { display:none; } }