/*
Theme Name: Mallinath
Theme URI: https://mallinathtech.com/blog/
Author: Mallinath Tech
Description: The Mallinath Tech blog and case studies, in the main site's look: logo red on pure white, thin Geist type, gradient panels as stages.
Version: 2.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: mallinath
*/

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The main site's tokens: logo red on pure white, black ink, light weights. */
:root {
  --red: #EA0B09;
  --ink: #000000;
  --ink-2: #4A4A4A;
  --mute: #6B6B6B;
  --soft: #F5F5F5;
  --border: #E4E4E4;
  --font: 'Geist Variable', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1320px;
  --header: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hairline: linear-gradient(90deg, transparent, var(--red) 25%, #ffc4c9 55%, #cfe0ff 80%, transparent);
  --background: #fff;
  /* the slide box: 80px under the top, 16px off the bottom on phones and 24px from 640px up */
  --slide-top: 80px;
  --slide-bottom: 16px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --slide-bottom: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-padding-top: calc(var(--header) + 24px);
}
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.55 var(--font); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: inherit; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
#main { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* The site's type scale. */
.display { font-size: clamp(32px, calc(5.2vw + 12px), 76px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 200; }
.h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 200; }
.lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buttons, as on the site: the logo red in Halo's sheen and grain, and a frosted white one with a hairline. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  background-color: #e30b09;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 52%),
    radial-gradient(140% 120% at 25% 0%, #f42a22, #e30b09 55%, #c40806);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(196 8 6 / 0.3), 0 10px 24px -10px rgb(234 11 9 / 0.6);
  color: #fff; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap;
  transition: filter 150ms, border-color 150ms, scale 150ms var(--ease);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { scale: 0.97; }
.btn--outline { background: rgb(255 255 255 / 0.66); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); color: var(--ink); border-color: rgb(0 0 0 / 0.14); }
.btn--outline:hover { filter: none; border-color: var(--ink); }
.btn--outline, .site-header { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }

/* Header: hides while you read down, comes back when you scroll up. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(255 255 255 / 0.66);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
  border-bottom: 1px solid transparent;
  transition: translate 300ms var(--ease), border-color 300ms var(--ease);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled { border-color: var(--border); }
.site-header.is-hidden:not(:focus-within) { translate: 0 -100%; }
.site-header__row { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__end { display: flex; align-items: center; gap: 8px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }
.logo__mark { display: block; width: 36px; color: var(--red); }
.logo__mark svg, .wordmark__mark svg { display: block; width: 100%; height: auto; }
.nav { display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgb(0 0 0 / 0.035); font-size: 16px; color: var(--ink-2); }
.nav a { position: relative; z-index: 0; padding: 6px 14px; border-radius: 999px; transition: color 150ms; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 12px -4px rgb(0 0 0 / 0.12); }
.menu-btn {
  display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px;
  border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
}
.menu-btn:hover { background: var(--soft); }
.menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .site-header__end .menu-btn { display: none; }
}

/* Phone menu: drops in quickly, leaves faster. */
.menu {
  position: fixed; inset: 12px 12px auto; width: auto; margin: 0; padding: 24px;
  border: 0; border-radius: 24px; color: var(--ink);
  transition: opacity 180ms var(--ease), translate 180ms var(--ease), display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.menu:not(:popover-open) { opacity: 0; translate: 0 -8px; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 -8px; } }
.menu::backdrop { background: rgb(0 0 0 / 0.12); }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__nav { display: flex; flex-direction: column; margin-top: 24px; }
.menu__nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 22px; font-weight: 300; letter-spacing: -0.02em; color: var(--ink-2); }
.menu__nav a:last-child { border: 0; }
.menu__nav a[aria-current] { color: var(--ink); }

/* Gradient panels, as on the site: a still Halo (the live one's first frame, light orange into red, under coarse colour
   grain), which blog.js draws the live ShaderGradient over, fading it in once its first frame is drawn. */
.gl-frame { position: relative; overflow: hidden; border-radius: 28px; }
.gl-frame > .gl-view { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; }
.gl-frame > :not(.gl-view) { position: relative; }
.gl-still {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='6 0 0 0 -2.5 0 6 0 0 -2.5 0 0 6 0 -2.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(125deg, #ee9452, #f0601e 45%, #ff1a03 85%);
  background-blend-mode: soft-light, normal;
}
.gl-view canvas { opacity: 0; transition: opacity 700ms var(--ease); }
.gl-view canvas[data-on] { opacity: 1; }

/* Glass: a card floating on a gradient, a little more solid than the header's frost, with a bright top edge and a soft lift. */
.glass, .float {
  background-color: rgb(255 255 255 / 0.84);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.45), 0 1px 2px rgb(0 0 0 / 0.05), 0 20px 50px -20px rgb(0 0 0 / 0.3);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .glass, .float, .btn--outline { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Slides, as on every site page: each screen sticks once fully in view, the next rises over it as a grey card opening out
   to the full screen while the one underneath sinks back (blog.js runs the site's own slides.ts). */
.slide { position: sticky; top: 0; min-height: 100svh; background: var(--background); }
.slide[data-in] {
  background: color-mix(in srgb, var(--soft) calc((1 - var(--open)) * 100%), var(--background));
  clip-path: inset(0 calc((1 - var(--open)) * (var(--gutter) - 4px)) round calc((1 - var(--open)) * 32px));
}
.slides-flat .slide { position: relative !important; top: auto !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .slide { position: relative; } }
.slide-box, .slide-wrap {
  width: 100%; min-height: 100svh; max-width: var(--max); margin-inline: auto;
  padding-top: var(--slide-top); padding-bottom: var(--slide-bottom);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.slide-box { display: flex; flex-direction: column; }
/* a slide of reading: the same sides, with room under the header */
.slide-wrap { padding-top: calc(var(--slide-top) + clamp(24px, 6vh, 64px)); padding-bottom: calc(var(--slide-bottom) + clamp(24px, 6vh, 64px)); }
.stage { flex: 1; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

/* A page's first slide: its title and line centred on Halo, as the site's PageHead. */
.head { display: grid; place-items: center; padding: 64px 24px; }
.head__text { display: flex; flex-direction: column; align-items: center; max-width: 720px; text-align: center; }
.head .display { max-width: 14ch; }
.head .lead { max-width: 52ch; margin-top: 24px; color: var(--ink); }
.head .crumbs { margin-bottom: 20px; }
.head .meta { justify-content: center; margin-top: 20px; }
.head .crumbs, .head .meta, .head .chip { color: var(--ink); }
.head .call__actions { justify-content: center; }
.head .float { margin-top: 32px; }

.float {
  border-radius: 16px;
  transition: translate 400ms var(--ease-out);
}
.float--image { width: min(80%, 560px); padding: 6px; }
.float--image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 11px; }
/* With no picture, the card shows the post's own sections, in order. */
.float--toc { width: min(80%, 340px); padding: 18px 20px 8px; }
.float--toc ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: s; }
.float--toc li {
  counter-increment: s; display: flex; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); font-size: 14px; line-height: 1.35; color: var(--ink);
}
.float--toc li::before { content: counter(s); min-width: 1ch; color: var(--mute); font-variant-numeric: tabular-nums; }
.float__time { display: block; padding: 18px 0 12px; font-size: 40px; line-height: 1; font-weight: 200; letter-spacing: -0.03em; }
.float__sub { padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-2); }
/* A case study's card carries its outcome. */
.float--result { width: min(80%, 380px); padding: 18px 20px 22px; }
.float--result p { margin-top: 12px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; letter-spacing: -0.01em; font-weight: 300; color: var(--ink); }

/* Post cards. The title's link covers the whole card. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 32px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; gap: 20px; }
.card__stage { display: grid; place-items: center; aspect-ratio: 16 / 11; padding: 24px; }
.card__body { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.card__title { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 300; }
.card__title a::after { content: ''; position: absolute; inset: 0; border-radius: 28px; }
.card__title a:focus-visible { outline: none; }
.card__title a:focus-visible::after { outline: 2px solid var(--red); outline-offset: 4px; }
.card__text { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; color: var(--ink); }
.more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: translate 300ms var(--ease-out); }
@media (hover: hover) {
  .card:hover .float { translate: 0 -6px; }
  .card:hover .more svg { translate: 3px 0; }
}
@media (min-width: 768px) {
  .card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; }
  .card--wide .card__stage { aspect-ratio: 4 / 3; }
  .card--wide .card__title { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 200; }
  .card--wide .card__text { -webkit-line-clamp: 3; }
}

/* Blog list. */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 48px; }
.filters a {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; color: var(--ink-2); transition: border-color 150ms, color 150ms;
}
.filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters a[aria-current] { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.filters .count { margin-left: 6px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pager { display: flex; justify-content: space-between; gap: 16px; padding-top: 64px; }
.empty { padding: 48px 0; color: var(--ink-2); }

/* A post. */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 14px; }
.crumbs a:hover { text-decoration: underline; }
.post__layout { display: grid; align-content: start; gap: 40px; }
@media (min-width: 1100px) {
  .post__layout.has-rail { grid-template-columns: 220px minmax(0, 680px); gap: 80px; }
}

/* "On this page": the section you're reading is black, the rest grey, like the Solutions list. */
.rail { align-self: start; font-size: 15px; }
.rail__label { margin-bottom: 10px; font-size: 13px; color: var(--mute); }
.rail ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rail a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; line-height: 1.35; color: var(--mute); transition: color 200ms var(--ease); }
.rail a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); translate: 0 -2px; opacity: 0; transition: opacity 200ms var(--ease); }
.rail a:hover, .rail a[aria-current] { color: var(--ink); }
.rail a[aria-current]::before { opacity: 1; }
@media (min-width: 1100px) { .rail { position: sticky; top: calc(var(--header) + 32px); } }
@media (max-width: 1099px) { .rail { max-width: 680px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 20px; } .rail a::before { display: none; } }

/* Post text. */
.prose { min-width: 0; max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 200; color: var(--ink); }
.prose h3 { margin-top: 1.8em; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 300; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--red); }
.prose blockquote { margin: 2em 0; padding: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; font-weight: 300; color: var(--ink); }
.prose blockquote p + p { margin-top: 0.6em; }
.prose blockquote cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; letter-spacing: 0; color: var(--mute); }
.prose figure { margin: 2em 0; }
.prose img { border-radius: 20px; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--mute); }
.prose hr { height: 1px; margin: 3em 0; border: 0; background: var(--hairline); }
.prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { font-weight: 500; color: var(--ink); }
.prose code { padding: 0.15em 0.4em; border-radius: 6px; background: var(--soft); font-family: var(--mono); font-size: 0.88em; }
.prose pre { overflow-x: auto; padding: 20px; border-radius: 16px; background: var(--soft); font-size: 15px; line-height: 1.6; }
.prose pre code { padding: 0; background: none; }

.more-posts { display: flex; flex-direction: column; gap: 32px; }

/* The closing slide, as on every site page: a glass card floating on Halo, with the footer on the same screen. */
.call__stage { display: grid; place-items: center; padding: 16px; }
.call__card { width: 100%; max-width: 520px; padding: 28px; border-radius: 16px; }
.call__card p { margin-top: 16px; color: var(--ink-2); }
.call__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 640px) {
  .call__stage { padding: 40px; }
  .call__card { padding: 36px; }
}

/* Footer: gradient hairline on top, the pages on the left and how to reach us on the right, then the thin wordmark. */
.site-footer { margin-top: var(--slide-bottom); color: var(--ink-2); }
.site-footer__line { height: 1px; background: var(--hairline); }
.site-footer a { transition: color 150ms, border-color 150ms; }
.site-footer a:hover { color: var(--ink); }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 40px; padding: 32px 0; }
.site-footer__top nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 28px; font-size: 16px; }
.site-footer address { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.625; font-style: normal; }
.socials { display: flex; gap: 8px; margin-top: 12px; }
.socials a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; }
.socials a:hover { border-color: var(--ink); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__mark { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; font-size: 16px; }
.site-footer__mark > a { flex-shrink: 0; }
.wordmark { display: flex; align-items: flex-end; gap: 1.2vw; }
.wordmark__mark { display: block; flex-shrink: 0; width: 6.5vw; color: var(--red); }
.wordmark__word { font-size: 7.5vw; line-height: 0.8; letter-spacing: -0.04em; font-weight: 100; color: var(--ink); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 24px; font-size: 14px; color: var(--mute); }
@media (min-width: 640px) {
  .site-footer__top { padding: 40px 0; }
  .site-footer address { align-items: flex-end; text-align: right; }
  .site-footer__legal { margin-top: 32px; }
}

/* Motion. Scroll-driven rise-in where the browser has scroll timelines; everything sits in place otherwise. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry calc(5% + var(--i, 0) * 6%) entry calc(65% + var(--i, 0) * 6%);
    }
  }
}
@keyframes reveal { from { opacity: 0; translate: 0 32px; } }

/* Moving between the site and the blog: the header stays, the page underneath cross-fades. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.nav-pill { view-transition-name: nav-pill; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: 200ms var(--ease) both page-out; }
::view-transition-new(root) { animation: 420ms var(--ease) 60ms both page-in; }
@keyframes page-out { to { opacity: 0; filter: blur(4px); } }
@keyframes page-in { from { opacity: 0; translate: 0 10px; filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}