/* Effects layer (owner request 2026-10-08): richer background gradients and attention animations.
 * Loaded after components/pages, before motion.css. Only transform / opacity / background-position animate;
 * everything stops under prefers-reduced-motion (motion.css). */

/* ───────── page-wide ambient gradient (fixed layer, cheap: no background-attachment) ───────── */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 0% 0%, color-mix(in oklch, oklch(55% .09 190) 22%, transparent), transparent 70%),
    radial-gradient(50vw 45vh at 100% 30%, color-mix(in oklch, var(--color-brand) 7%, transparent), transparent 70%),
    radial-gradient(55vw 50vh at 20% 100%, color-mix(in oklch, var(--color-accent-2) 6%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-0), oklch(18.5% .024 205));
}

/* sections: alternating soft bands so long pages don't read flat */
main > .sec:nth-of-type(even):not(.deep) {
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in oklch, oklch(55% .09 190) 12%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, color-mix(in oklch, var(--surface-1) 45%, transparent) 50%, transparent);
}

/* results band */
.deep {
  background:
    radial-gradient(60% 80% at 85% 0%, color-mix(in oklch, var(--color-brand) 8%, transparent), transparent 65%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in oklch, oklch(55% .09 190) 18%, transparent), transparent 70%),
    var(--surface-deep);
}

/* inner page heads: gradient mesh + slow drifting blobs */
.page-head::before {
  background:
    radial-gradient(45% 140% at 8% 100%, color-mix(in oklch, var(--color-brand) 14%, transparent), transparent 70%),
    radial-gradient(40% 120% at 92% 0%, color-mix(in oklch, var(--color-accent-2) 11%, transparent), transparent 70%),
    radial-gradient(60% 120% at 55% 50%, color-mix(in oklch, oklch(55% .09 190) 20%, transparent), transparent 75%);
  animation: mesh 18s ease-in-out infinite alternate;
  background-size: 140% 140%;
}
@keyframes mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* footer glow */
.site-footer {
  background:
    radial-gradient(50% 60% at 50% 0%, color-mix(in oklch, oklch(55% .09 190) 16%, transparent), transparent 70%),
    var(--surface-deep);
}

/* ───────── surfaces: gradient cards + gradient border on hover ───────── */
.card, .post, .tile, .step, .box, .filters, .empty, .toc, .faq details, .facts > div, .foot-data > div {
  background-image: linear-gradient(160deg, color-mix(in oklch, var(--surface-2) 70%, transparent), transparent 60%);
}
.card, .post, .tile { isolation: isolate; }
.card::before, .post::before, .tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--color-brand), oklch(60% .1 190) 45%, var(--color-accent-2));
  -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);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover::before, .post:hover::before, .tile:hover::before { opacity: .9; }
.card__art { background-image: linear-gradient(150deg, color-mix(in oklch, oklch(55% .09 190) 18%, transparent), transparent 65%); }

/* primary button: gradient + periodic shine sweep */
.btn--primary {
  background: linear-gradient(110deg, var(--color-brand), oklch(90% .17 125) 55%, var(--color-brand));
  background-size: 200% 100%; overflow: hidden; isolation: isolate;
}
.btn--primary:hover { background-position: 100% 0; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, oklch(100% 0 0 / .55) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 5.5s var(--ease) 1.5s infinite;
}
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ───────── highlighter sweeps in when the heading scrolls into view ───────── */
@supports (animation-timeline: view()) {
  /* the pill pops in whole (lime + ink never separate, so contrast holds on every frame) */
  .sec h2 .hl { display: inline-block; animation: hl-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  @keyframes hl-in { from { opacity: 0; transform: translateY(.25em) rotate(-3deg) scale(.85); } to { opacity: 1; transform: none; } }
}

/* ───────── hero: draw balls pop in one by one ───────── */
.draw .ball { animation: pop .5s var(--spring) both; }
.draw .ball:nth-child(1) { animation-delay: .25s; } .draw .ball:nth-child(2) { animation-delay: .35s; }
.draw .ball:nth-child(3) { animation-delay: .45s; } .draw .ball:nth-child(4) { animation-delay: .55s; }
.draw .ball:nth-child(5) { animation-delay: .65s; } .draw .ball:nth-child(6) { animation-delay: .75s; }
.draw .ball:nth-child(7) { animation-delay: .95s; }
@keyframes pop { from { transform: scale(.4) translateY(8px); } to { transform: none; } }

/* ───────── results ticker under the hero ───────── */
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, var(--surface-deep), color-mix(in oklch, var(--surface-1) 70%, var(--surface-deep)), var(--surface-deep)); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--surface-deep), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--surface-deep), transparent); }
.ticker__track { display: flex; width: max-content; animation: drift 60s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.6rem; white-space: nowrap; font-size: .88rem; color: var(--text-2); text-decoration: none; border-right: 1px solid var(--line); }
.ticker__item b { color: var(--text-1); font: 600 .9rem/1 var(--font-display); letter-spacing: -.02em; }
.ticker__item .n { width: 28px; height: 28px; font-size: .78rem; }
.ticker__item .n-sep { height: 28px; }
.ticker__item:hover b { color: var(--color-brand); }

/* ───────── carousel ───────── */
.carousel .shelf { scrollbar-width: none; }
.carousel .shelf::-webkit-scrollbar { display: none; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: .4rem; }
.dot-i { position: relative; width: 22px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; transition: width .3s var(--ease); }
.dot-i.is-on { width: 44px; }
.dot-i i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--color-brand), oklch(90% .17 125)); border-radius: inherit; }
.dot-i.is-on i { transform: scaleX(1); }
.dots.is-playing .dot-i.is-on i { animation: fill var(--dur, 4500ms) linear both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-autoplay] .ap-play, [data-autoplay].is-paused .ap-pause { display: none; }
[data-autoplay].is-paused .ap-play { display: inline-flex; }
[data-autoplay] span { display: inline-flex; }
@media (max-width: 720px) { .carousel .shelf-nav { display: flex; } .carousel .shelf-nav [data-dir] { display: none; } }

/* ───────── cascading card reveal ───────── */
@supports (animation-timeline: view()) {
  .grid > li, .feat > li, .news > li, .steps > li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
}

/* ───────── floating icon in tiles ───────── */
.tile__icon .icon { animation: float 5s ease-in-out infinite; }
.tile:nth-child(2) .tile__icon .icon { animation-delay: -2.5s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }


/* ───────── photos (Unsplash / Pexels licences, source/images/photos/CREDITS.md) ───────── */
.page-head--photo { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px); }
.page-head__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.page-head__bg picture, .page-head__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-head__bg img { opacity: .5; filter: saturate(.8); }
.page-head--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface-0) 0%, color-mix(in oklch, var(--surface-0) 82%, transparent) 42%, color-mix(in oklch, var(--surface-0) 30%, transparent) 100%), linear-gradient(0deg, var(--surface-0), transparent 40%); }
.page-head--photo .page-head__digits { z-index: -1; }
.post__cover { position: relative; margin: -.6rem -.5rem .2rem; height: 160px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__cover img { transform: scale(1.05); }
.tile--photo .tile__bg { position: absolute; inset: 0; z-index: -2; }
.tile--photo .tile__bg picture, .tile--photo .tile__bg img { width: 100%; height: 100%; object-fit: cover; }
.tile--photo .tile__bg img { opacity: .38; transition: transform .8s var(--ease), opacity .4s; }
.tile--photo:hover .tile__bg img { transform: scale(1.05); opacity: .48; }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--surface-1) 30%, color-mix(in oklch, var(--surface-1) 40%, transparent)); }
.ticker__item:focus-visible { outline-offset: -3px; }
.ticker.is-paused .ticker__track { animation-play-state: paused; }
.ticker__pause { position: absolute; right: 8px; top: 50%; z-index: 2; translate: 0 -50%; }