/* ── Loader (first visit per session) ───────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(600px 400px at 50% 40%, rgba(0, 242, 254, 0.16), transparent 70%), var(--bg);
  transition: opacity 0.55s ease, visibility 0.55s;
  cursor: pointer;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__water { position: relative; width: 220px; height: 120px; }
.loader__fish { position: absolute; top: 30px; left: 0; width: 120px; height: 60px; filter: drop-shadow(0 0 18px rgba(0, 242, 254, 0.7)); animation: swim 1.6s ease-in-out infinite; }
.loader__tail { transform-origin: 20px 30px; animation: tail 0.35s ease-in-out infinite alternate; }
.bubbles--loader i { animation-duration: 2.2s; }
.loader__brand { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: fade-up 0.8s var(--ease) both 0.2s; }
.loader__brand strong { font-family: var(--font-head); font-size: 30px; font-weight: 800; background: var(--grad-aqua); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader__brand span { color: var(--muted); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }

.view-enter { animation: fade-up 0.4s var(--ease); }

@keyframes swim {
  0% { transform: translate(0, 0) rotate(-2deg); }
  50% { transform: translate(90px, -8px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(-2deg); }
}
@keyframes tail { from { transform: scaleY(0.75); } to { transform: scaleY(1.15); } }
@keyframes rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(8px, -50vh) scale(1); }
  100% { transform: translate(-6px, -110vh) scale(1.1); opacity: 0; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
@keyframes ping-aqua { 0% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); } 80%, 100% { box-shadow: 0 0 0 9px rgba(0, 242, 254, 0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes shine { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes drift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes rays { from { transform: translateX(-4%) skewX(-4deg); opacity: 0.6; } to { transform: translateX(4%) skewX(4deg); opacity: 1; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.25), 0 0 30px -12px rgba(0, 242, 254, 0.6); } 50% { box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.5), 0 0 40px -6px rgba(0, 242, 254, 0.8); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }