/* ═══════════════════════════════════════════════════════
   Instance themes — rules every theme shares.
   The theme itself (pulse, vine, …) is on <html data-theme="…">, set by branding.js.
   ═══════════════════════════════════════════════════════ */

/* The Pulse loop. The hero trace (Shared/Themes/Pulse/PulseHero.razor.css), the member home's
   Next-up beam (Pages/Member/MemberHome.razor.css) and the event card's beam (css/event-pages.css)
   all run on it, so the beam lights the card as the pulse leaves the trace. Change the loop here; the
   keyframe percentages in those files are fractions of it (see the timing note in PulseHero.razor.css). */
:root {
    --pulse-loop-desktop: 6.4s;
    --pulse-loop-phone: 5.4s;
    --pulse-loop-delay: 1.2s;
}

/* Theme art: the layer a theme draws in, filling its surface behind the content. Heroes and the event
   band isolate their stacking, so the art sits at -1 under their text; the sidebar and the staff
   sign-in keep their content at z-index 1, so the art sits at 0 like the dot grid it replaces. */
.ta { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ta--hero, .ta--band { z-index: -1; }
.ta--sidebar, .ta--fill { z-index: 0; }

/* Hidden tabs don't animate. */
:root.crm-tab-hidden .ta, :root.crm-tab-hidden .ta * { animation-play-state: paused !important; }

/* A theme's accent, a little lighter, for second tones (leaf undersides, glints). */
:root { --crm-teal-soft: color-mix(in srgb, var(--crm-teal, #00C5A8) 76%, #fff); }

/* ── Tide: the gulls (drawn by js/themes/tide-gulls.js, so these rules are global) ────────────── */
.tg-sky { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tg-white { fill: #fff; }
.tg-far { fill: #C9D2DA; }
.tg-tip { fill: #2B2F33; }
.tg-beak { fill: #F08A24; }
.tg-eye { fill: color-mix(in srgb, var(--crm-navy, #0D2447) 40%, #000); }
.tg-feathers { fill: none; stroke: #C9D2DA; stroke-width: .7; stroke-linecap: round; }

.tg-wing { transform-box: fill-box; transform-origin: 78% 100%; animation: tg-wing 6s infinite; }
.tg-lift { transform-box: fill-box; transform-origin: center; animation: tg-lift 6s ease-in-out infinite; }
.tg-bob { animation: tg-bob 3s ease-in-out infinite alternate; }

/* Two slow beats (the downstroke quicker than the up), then a long glide with the wings half raised. */
@keyframes tg-wing {
    0% { transform: scaleY(.48) skewX(0deg); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
    9% { transform: scaleY(1) skewX(-4deg); animation-timing-function: cubic-bezier(.55, 0, .75, .7); }
    17% { transform: scaleY(-.62) skewX(9deg); animation-timing-function: cubic-bezier(.3, .3, .45, 1); }
    27% { transform: scaleY(1) skewX(-4deg); animation-timing-function: cubic-bezier(.55, 0, .75, .7); }
    35% { transform: scaleY(-.62) skewX(9deg); animation-timing-function: cubic-bezier(.25, .4, .4, 1); }
    45% { transform: scaleY(.48) skewX(0deg); animation-timing-function: ease-in-out; }
    70% { transform: scaleY(.56) skewX(-2deg); animation-timing-function: ease-in-out; }
    100% { transform: scaleY(.48) skewX(0deg); }
}
/* The body lifts on each downstroke, nose up a little, then eases down through the glide. */
@keyframes tg-lift {
    0% { transform: translateY(0) rotate(0deg); }
    9% { transform: translateY(1px) rotate(0deg); }
    17% { transform: translateY(-3.5px) rotate(-2.5deg); }
    27% { transform: translateY(-2.5px) rotate(-1.5deg); }
    35% { transform: translateY(-6.5px) rotate(-3deg); }
    44% { transform: translateY(-7px) rotate(-1deg); }
    72% { transform: translateY(-3px) rotate(1.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes tg-bob { from { transform: translateY(-3.5px); } to { transform: translateY(4px); } }

/* ── Network: the globe (drawn by js/themes/network-globe.js, so these rules are global) ───────── */
.nw-bloom { background: radial-gradient(circle at 80% 6%, rgba(255, 255, 255, .2), transparent 44%); }
.nw-bloom-foot { background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .17), transparent 55%); }
.nw-globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.nw-edges line { stroke: #fff; stroke-width: .8; }
.nw-links line { stroke: var(--crm-teal-soft, #4DD6C2); stroke-width: 1; }
.nw-nodes circle { fill: #fff; }
.nw-person-ring { fill: none; stroke: #fff; stroke-opacity: .45; stroke-dasharray: 2 4; }
.nw-person-disc { fill: #fff; }
.nw-person-ink { fill: var(--crm-navy, #0D2447); }
.nw-cursor-ring { fill: none; stroke: var(--crm-teal-soft, #4DD6C2); stroke-width: 1.5; }
.nw-cursor-dot { fill: var(--crm-teal-soft, #4DD6C2); }
.nw-dust { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .nw-dust { animation: nw-dust 9s ease-in-out infinite alternate; }
}
@keyframes nw-dust { from { transform: translate(0, 0); } to { transform: translate(14px, -18px); } }