/*
 * Learn with Vinod — Fluid motion (1.10). Loaded with the Liquid Glass look.
 * - smooth page-to-page transitions (no white flash)
 * - slowly flowing aurora behind the page
 * - liquid loader, liquid dark-mode switch, softer reveals
 * All motion stops for readers who ask for reduced motion.
 */

/* ---------- 1. Page-to-page transitions (Chrome, Edge, Safari 18+) ---------- */
@view-transition { navigation: auto; }

/* The floating header stays in place while the page underneath changes */
.lwv-glass .site-header { view-transition-name: lwv-header; }
.lwv-glass .lwv-progress { view-transition-name: lwv-progress; }

::view-transition-old(root) { animation: lwv-vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: lwv-vt-in .42s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(lwv-header) { animation-duration: .35s; }
::view-transition-old(lwv-header), ::view-transition-new(lwv-header) { animation: none; mix-blend-mode: normal; }

@keyframes lwv-vt-out {
	to { opacity: 0; transform: scale(.985) translateY(-6px); filter: blur(6px); }
}
@keyframes lwv-vt-in {
	from { opacity: 0; transform: scale(1.01) translateY(10px); filter: blur(8px); }
}

/* Browsers without page transitions: content melts away as soon as a link is
   clicked (the next page is not delayed), and a liquid bar shows it is loading. */
html.lwv-leaving .site-main,
html.lwv-leaving .widget-area,
html.lwv-leaving .lwv-hero {
	opacity: .35; filter: blur(4px); transform: translateY(-4px);
	transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.lwv-nav-bar {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100001; pointer-events: none;
	overflow: hidden; opacity: 0; transition: opacity .2s ease;
}
html.lwv-leaving .lwv-nav-bar { opacity: 1; }
.lwv-nav-bar::before {
	content: ""; position: absolute; inset: 0; width: 45%;
	background: linear-gradient(90deg, transparent, #5b9bff, #8b6cff, transparent);
	box-shadow: 0 0 14px rgba(91, 155, 255, .9);
	animation: lwv-nav-flow 1s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes lwv-nav-flow { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

/* ---------- 2. Flowing aurora ---------- */
.lwv-aurora {
	position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	contain: strict;
}
.lwv-aurora i {
	position: absolute; display: block; border-radius: 50%;
	filter: blur(60px); opacity: .9; will-change: transform;
}
.lwv-aurora i:nth-child(1) { width: 62vmax; height: 48vmax; left: -14vmax; top: -18vmax; background: var(--g-aurora-1); animation: lwv-flow-a 26s ease-in-out infinite alternate; }
.lwv-aurora i:nth-child(2) { width: 54vmax; height: 44vmax; right: -16vmax; top: -10vmax; background: var(--g-aurora-2); animation: lwv-flow-b 32s ease-in-out infinite alternate; }
.lwv-aurora i:nth-child(3) { width: 64vmax; height: 50vmax; right: -10vmax; bottom: -24vmax; background: var(--g-aurora-3); animation: lwv-flow-c 36s ease-in-out infinite alternate; }
.lwv-aurora i:nth-child(4) { width: 40vmax; height: 34vmax; left: -10vmax; bottom: -12vmax; background: var(--g-aurora-4); animation: lwv-flow-b 30s ease-in-out infinite alternate-reverse; }
@keyframes lwv-flow-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.12) rotate(20deg); } }
@keyframes lwv-flow-b { to { transform: translate3d(-10vmax, 10vmax, 0) scale(.9) rotate(-25deg); } }
@keyframes lwv-flow-c { to { transform: translate3d(-14vmax, -8vmax, 0) scale(1.15) rotate(15deg); } }
/* The static gradient stays underneath as a fallback; the flowing layer replaces its look */
.lwv-glass.lwv-fluid body::before { opacity: .55; }
/* Phones: fewer, smaller blobs keep scrolling smooth */
@media (max-width: 767px) {
	.lwv-aurora i { filter: blur(44px); }
	.lwv-aurora i:nth-child(4) { display: none; }
}

/* ---------- 3. Softer, liquid reveals ---------- */
.lwv-fluid .lwv-reveal {
	opacity: 0; filter: blur(8px); transform: translateY(26px) scale(.985);
	transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}
.lwv-fluid .lwv-reveal.is-revealed { opacity: 1; filter: none; transform: none; }

/* The first screen settles in (never starts invisible, so it does not delay Google's LCP) */
.lwv-fluid .lwv-hero > .lwv-container,
.lwv-fluid .lwv-article { animation: lwv-settle .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lwv-settle { from { transform: translateY(10px) scale(.992); filter: blur(3px); } }

/* Hero heading: light slowly flowing through the letters */
.lwv-fluid .lwv-hero h1 {
	background-image: linear-gradient(110deg, var(--lwv-ink) 0%, var(--lwv-ink) 38%, var(--lwv-primary) 50%, #8b6cff 56%, var(--lwv-ink) 68%, var(--lwv-ink) 100%);
	background-size: 250% 100%;
	animation: lwv-ink-flow 9s ease-in-out infinite;
}
@keyframes lwv-ink-flow { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

/* Cards: springy hover */
.lwv-fluid .lwv-card { transition: transform .5s cubic-bezier(.3, 1.35, .45, 1), box-shadow .35s ease; }

/* ---------- 4. Liquid loader ---------- */
html.lwv-js.lwv-fluid .lwv-loader {
	background-color: var(--lwv-bg);
	background-image:
		radial-gradient(40vmax 30vmax at 20% 20%, var(--g-aurora-1), transparent 70%),
		radial-gradient(36vmax 30vmax at 80% 30%, var(--g-aurora-2), transparent 70%),
		radial-gradient(40vmax 30vmax at 60% 90%, var(--g-aurora-3), transparent 70%);
}
.lwv-fluid .lwv-loader-inner { position: relative; z-index: 0; }
.lwv-fluid .lwv-loader-name { margin-top: 12px; }
/* A liquid glass drop that wobbles behind the sprout */
.lwv-fluid .lwv-loader-inner::before {
	content: ""; position: absolute; left: 50%; top: -16px; width: 128px; height: 128px; margin-left: -64px; z-index: -1;
	background: var(--g-bg-strong); background-image: var(--g-shine);
	box-shadow: 0 1px 0 var(--g-line) inset, 0 0 0 1px var(--g-hair), 0 24px 50px -24px rgba(24, 56, 120, .55);
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	animation: lwv-drop 2.4s ease-in-out infinite alternate, lwv-drop-in .6s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes lwv-drop {
	0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg); }
	50% { border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; }
	100% { border-radius: 47% 53% 55% 45% / 60% 42% 58% 40%; transform: rotate(25deg); }
}
@keyframes lwv-drop-in { from { scale: .4; opacity: 0; } }
/* Liquid progress: a wave instead of a sliding bar */
.lwv-fluid .lwv-loader-bar { width: 140px; height: 6px; border-radius: 6px; background: var(--g-bg-soft); box-shadow: 0 0 0 1px var(--g-hair) inset; }
.lwv-fluid .lwv-loader-bar span {
	width: 100%; border-radius: 6px;
	background: linear-gradient(90deg, #5b9bff, #8b6cff, #2ac8be, #5b9bff);
	background-size: 300% 100%;
	transform-origin: left center;
	animation: lwv-fill 1s cubic-bezier(.2, .8, .2, 1) both, lwv-liquid 1.6s linear infinite;
}
@keyframes lwv-fill { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes lwv-liquid { to { background-position: 300% 0; } }
/* Loader leaves like a drop dissolving */
.lwv-fluid .lwv-loader.is-done { transition: opacity .5s ease, visibility .5s ease, filter .5s ease; filter: blur(10px); }
.lwv-fluid .lwv-loader.is-done .lwv-loader-inner { transform: scale(1.08); }

/* ---------- 5. Liquid dark-mode switch (circle grows from the button) ---------- */
html.lwv-vt-theme::view-transition-old(root) { animation: none; z-index: 1; }
html.lwv-vt-theme::view-transition-new(root) {
	animation: lwv-theme-reveal .7s cubic-bezier(.7, 0, .2, 1) both; z-index: 2;
}
html.lwv-vt-theme::view-transition-old(lwv-header), html.lwv-vt-theme::view-transition-new(lwv-header) { animation: none; }
html.lwv-vt-theme .site-header { view-transition-name: none; }
@keyframes lwv-theme-reveal {
	from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 40px)); }
	to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 40px)); }
}

/* ---------- Reduced motion: no movement at all ---------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.lwv-aurora, .lwv-nav-bar { display: none; }
	.lwv-fluid .lwv-hero > .lwv-container, .lwv-fluid .lwv-article, .lwv-fluid .lwv-hero h1 { animation: none; }
	.lwv-fluid .lwv-reveal { opacity: 1; filter: none; transform: none; }
	html.lwv-leaving .site-main, html.lwv-leaving .widget-area, html.lwv-leaving .lwv-hero { opacity: 1; filter: none; transform: none; }
}