/* Lippi motion layer: ambient light, entrances, pointer light and the name's glitch and shine. */

/* Page transitions between the blog's pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } }

/* Ambient light behind the top of every page */
.aura { position: absolute; inset: 0 0 auto; height: min(1100px, 100%); overflow: hidden; pointer-events: none; z-index: -1; }
.aura-blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.aura-blob.a { width: 620px; height: 520px; left: calc(50% - 560px); top: -160px; background: radial-gradient(closest-side, rgb(98 173 240 / .30), transparent); animation: drift-a 22s ease-in-out infinite alternate; }
.aura-blob.b { width: 560px; height: 480px; left: calc(50% + 40px); top: -60px; background: radial-gradient(closest-side, rgb(236 160 84 / .20), transparent); animation: drift-b 26s ease-in-out infinite alternate; }
.aura-blob.c { width: 420px; height: 360px; left: calc(50% - 120px); top: 340px; background: radial-gradient(closest-side, rgb(126 211 154 / .10), transparent); animation: drift-c 30s ease-in-out infinite alternate; }
.aura-shift { position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
@keyframes drift-a { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-160px, 120px) scale(.9); } }
@keyframes drift-c { to { transform: translate(120px, -80px) scale(1.2); } }
.aura::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgb(239 232 218 / .10) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 18%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 18%, #000, transparent 75%);
  animation: grid-breathe 9s ease-in-out infinite alternate;
}
@keyframes grid-breathe { from { opacity: .55; } to { opacity: 1; } }
body { position: relative; isolation: isolate; }
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .05;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Reading progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), #eca054); box-shadow: 0 0 12px rgb(98 173 240 / .6); }

/* Header details */
.brand-mark { transition: transform .7s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s; }
.brand:hover .brand-mark { transform: rotateY(360deg) scale(1.08); box-shadow: 0 0 18px rgb(98 173 240 / .55); }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Buttons: light sweep, magnetic pull (set from motion.js) */
.btn { position: relative; overflow: hidden; translate: var(--bx, 0) var(--by, 0); transition: border-color .15s, background-color .15s, color .15s, translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 8px 28px -6px rgb(98 173 240 / .65); }

/* The name: glitch while scrambling, flash on lock, shine on landing */
.name { position: relative; }
.name .ch.scramble { color: #d9e9f7; text-shadow: -2px 0 rgb(98 173 240 / .75), 2px 0 rgb(236 160 84 / .55), 0 0 24px rgb(98 173 240 / .45); }
.name .ch.locked { color: #fff; text-shadow: 0 0 28px rgb(98 173 240 / .9), 0 0 4px #fff; }
.name .ch { transition: color .35s, text-shadow .5s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.name .word {
  display: inline-block; color: transparent;
  background: linear-gradient(100deg, var(--text) 0 42%, #fff 47%, #9fd0ff 50%, #ffd7ab 53%, var(--text) 58% 100%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: shine 1.6s cubic-bezier(.4, 0, .2, 1) .1s both, glow 2.4s ease-out both;
}
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes glow { 0% { filter: drop-shadow(0 0 22px rgb(98 173 240 / .75)); } 100% { filter: drop-shadow(0 0 0 rgb(98 173 240 / 0)); } }
.name { cursor: pointer; }
.name:hover .word { animation: shine 1.2s cubic-bezier(.4, 0, .2, 1) both; }
.caret { box-shadow: 0 0 14px rgb(98 173 240 / .8); }
@supports (animation-timeline: view()) {
  .hero .name { animation: name-exit linear both; animation-timeline: view(); animation-range: exit -10% exit 90%; }
  @keyframes name-exit { to { opacity: .15; transform: translateY(-40px) scale(.96); filter: blur(4px); } }
}

/* Scroll entrances (motion.js adds .rv, then .seen in view) */
.motion .rv { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .7s ease var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter .7s ease var(--d, 0s); }
.motion .rv.seen { opacity: 1; transform: none; filter: none; }
.motion .rv.seen.card, .motion .rv.seen.feature { transition: opacity .7s ease var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter .7s ease var(--d, 0s), border-color .2s; }

/* Pointer light: a spot inside and a lit edge that follow the pointer */
.glow { position: relative; isolation: isolate; }
.glow::before, .glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
.glow::before { z-index: -1; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgb(98 173 240 / .12), transparent 45%); }
.glow::after { z-index: 3; padding: 1px; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(98 173 240 / .95), rgb(236 160 84 / .4) 45%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glow:hover::before, .glow:hover::after { opacity: 1; }
.card:hover { transform: translateY(-3px); }
.motion .rv.seen.card:hover { transform: translateY(-3px); }

/* Featured article: 3D tilt (motion.js), slow light on the image */
.feature { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
.motion .rv.seen.feature { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 236 210 / .16) 48%, transparent 62%); transform: translateX(-100%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.feature:hover .feature-media::after { transform: translateX(100%); }
.feature-media img { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -2%); } }
.dot { animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(126 211 154 / .55); } 100% { box-shadow: 0 0 0 9px rgb(126 211 154 / 0); } }

/* List rows: a lit bar sweeps in, the number turns blue */
.row a { position: relative; overflow: hidden; }
.row a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.row a:hover::before { transform: scaleY(1); }
.row-num, .row-title { transition: color .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.row a:hover .row-num { color: var(--accent); }
.row a:hover .row-title { transform: translateX(4px); }
.chip { transition: background-color .15s, color .15s, transform .2s; }
a.chip:hover { transform: translateY(-2px); }
.filter { transition: color .15s, border-color .15s, background-color .25s, box-shadow .3s, transform .2s; }
.filter:hover { transform: translateY(-1px); }
.filter[aria-current="true"] { box-shadow: 0 6px 22px -6px rgb(98 173 240 / .7); }

/* Article: parallax cover, drop cap, quote line drawing in */
.cover { position: relative; }
@supports (animation-timeline: view()) {
  .cover img, .feature-media img { animation: parallax linear both; animation-timeline: view(); }
  @keyframes parallax { from { transform: translateY(-5%) scale(1.14); } to { transform: translateY(5%) scale(1.14); } }
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.prose > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font: 700 3.6em/.8 var(--display); color: var(--accent); text-shadow: 0 0 26px rgb(98 173 240 / .45); }
.prose blockquote { position: relative; border-left-color: transparent; }
.prose blockquote::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--accent), #eca054); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .3s; }
.prose blockquote.seen::before, html:not(.motion) .prose blockquote::before { transform: scaleY(1); }
.pager a { transition: border-color .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.pager a:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}