/* Shared effects and backgrounds of the single theme «Onda» (owner decision of 11/10:
   impressive but professional). Colours only from tokens.css. Nothing moves with «riduci
   movimento»; pointer effects only with a mouse; the 3D layers of hero3d.js are decoration
   (aria-hidden, no pointer events) over a page that works the same without them. */

/* 3D layers: invisible until their scene has drawn, then a slow fade-in. */
.fx-3d { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-standard); }
.fx-3d.is-ready { opacity: 1; }
.fx-3d canvas { display: block; width: 100%; height: 100%; }
/* The wave: a band between two sections, fading at its top and bottom edges. */
.fx-wave-band { position: relative; height: clamp(150px, 19vw, 300px); margin-block: calc(-1 * var(--s-6)) calc(-1 * var(--s-5));
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); }
/* The 3D voice takes the place of the drawn orb, with room around it for its rings. */
.fx-orb { inset: -60%; z-index: 2; }
/* visibility, not opacity: the drawn rings animate their opacity and would show through. */
.orb.orb-3d > :not(.fx-orb) { visibility: hidden; animation: none; }

/* Aurora: slow light of the voice colours behind a page or a section. */
.fx-aurora { position: relative; isolation: isolate; }
.fx-aurora::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--voice-a) 24%, transparent), transparent 70%),
    radial-gradient(34% 38% at 82% 12%, color-mix(in srgb, var(--voice-b) 16%, transparent), transparent 70%),
    radial-gradient(30% 34% at 62% 88%, color-mix(in srgb, var(--voice-a) 12%, transparent), transparent 70%);
  animation: fx-aurora 26s var(--ease-standard) infinite alternate; }
:root[data-theme="light"] .fx-aurora::after { opacity: .55; }
@keyframes fx-aurora { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 2%, 0) scale(1.06); } }

/* Grain: a fine noise that keeps large gradients from banding. */
.fx-grain { position: relative; isolation: isolate; }
.fx-grain::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* Pointer light: a soft glow that follows the mouse on cards and panels. */
.fx-spotlight { position: relative; }
.fx-spotlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--voice-b) 11%, transparent), transparent 42%);
  transition: opacity var(--dur-section) var(--ease-standard); }
.fx-spotlight:hover::after { opacity: 1; }

/* Tilt: a slight inclination toward the pointer. */
.fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-section) var(--ease-standard); }

/* Shine: a light that runs once across a primary button under the pointer. */
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--on-voice) 26%, transparent) 50%, transparent 70%); }
.fx-shine:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-standard); }

@media (hover: none), (pointer: coarse) {
  .fx-tilt { transform: none; }
  .fx-spotlight::after, .fx-shine::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-aurora::after { animation: none; }
  .fx-tilt { transform: none; transition: none; }
  .fx-shine::after { display: none; }
  .fx-3d { transition: none; }
}
:root[data-motion="reduce"] .fx-aurora::after { animation: none; }
:root[data-motion="reduce"] .fx-tilt { transform: none; transition: none; }
:root[data-motion="reduce"] .fx-shine::after { display: none; }