/* Motion homepage styles, shared by index.html and its preview. */
.motion-preview { overflow-x: clip; background: var(--paper); }
.motion-preview main, .motion-preview .site-footer { position: relative; z-index: 1; }
.motion-preview .hero::before { display: none; }
.motion-preview .particle-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2vw; padding-right: 3vw; }
.motion-preview .hero-copy { z-index: 2; }
.motion-preview .hero h1 { font-size: clamp(54px, 6.1vw, 104px); line-height: 1.06; }
.motion-preview .hero-intro { max-width: 490px; }
.motion-preview .writing-section { background: transparent; }
.motion-preview .article-grid { background: color-mix(in srgb, var(--paper-strong) 94%, transparent); }
.word-together { white-space: nowrap; }
.particle-stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 760px; justify-self: center; touch-action: pan-y; }
.particle-canvas { display: block; width: 100%; height: 100%; }
.particle-stage .art-note { opacity: .64; pointer-events: none; }
.particle-stage .art-note-top { top: 4%; right: 8%; }
.particle-stage .art-note-bottom { bottom: 5%; left: 9%; }
.motion-controls { position: absolute; bottom: 22px; right: 7vw; display: flex; gap: 18px; align-items: center; }
.motion-controls button, .motion-controls a { font: 11px/1.4 var(--sans); color: var(--muted); }
.motion-controls button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.motion-controls button:hover, .motion-controls a:hover { color: var(--ink); }
.motion-preview :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
/* Soft gradient edges, without an expensive full-screen blur. */
.ambient-halos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --spread: 1; }
.halo-anchor { position: absolute; width: 88vmax; height: 88vmax; transform: translate(-50%, -50%) scale(var(--spread)); will-change: transform; }
.halo-anchor-violet { left: var(--violet-x, 87%); top: var(--violet-y, 49%); }
.halo-anchor-pink { left: var(--pink-x, 104%); top: var(--pink-y, 68%); }
.halo-anchor-blue { left: var(--blue-x, 78%); top: var(--blue-y, 12%); }
.halo {
    position: relative; width: 100%; height: 100%;
    --halo-low: .42; --halo-high: .64;
    animation: halo-drift var(--drift-duration, 9s) ease-in-out var(--drift-delay, -3s) infinite alternate,
        halo-pulse var(--pulse-duration, 7s) ease-in-out var(--pulse-delay, -4s) infinite alternate;
}
/* Moving, overlapping color pockets change the interior of the mist too.
   Only transform/opacity animate; no full-screen blur or repainting gradients. */
.halo::before, .halo::after {
    content: ""; position: absolute; inset: 9% 6%; pointer-events: none;
    background: radial-gradient(ellipse at center, var(--mist-one), transparent 62%);
    animation: mist-flow-one 8s ease-in-out -3s infinite alternate;
}
.halo::after {
    inset: 16% 4% 8% 20%;
    background: radial-gradient(ellipse at center, var(--mist-two), transparent 62%);
    animation: mist-flow-two 11s ease-in-out -8s infinite alternate;
}
.halo, .halo::before, .halo::after { animation-play-state: var(--halo-play, running); }
.halo-violet {
    --mist-one: rgba(237,74,170,.94); --mist-two: rgba(69,128,255,.92);
    background: radial-gradient(ellipse at center, rgba(130,57,224,.68), rgba(111,42,180,.20) 26%, transparent 60%);
}
.halo-pink {
    --mist-one: rgba(158,71,242,.92); --mist-two: rgba(244,96,171,.90);
    --drift-duration: 11s; --drift-delay: -7s; --pulse-duration: 9s; --pulse-delay: -2s;
    background: radial-gradient(ellipse at center, rgba(228,80,156,.58), rgba(175,47,121,.18) 30%, transparent 60%);
}
.halo-blue {
    --mist-one: rgba(145,83,242,.90); --mist-two: rgba(70,151,255,.94);
    --drift-duration: 13s; --drift-delay: -10s; --pulse-duration: 11s; --pulse-delay: -6s;
    background: radial-gradient(ellipse at center, rgba(71,111,234,.58), rgba(56,65,179,.15) 30%, transparent 60%);
}
.halo-pink::before { animation-delay: -7s; animation-duration: 10s; }
.halo-blue::after { animation-delay: -3s; animation-duration: 12s; }
/* Light mode has its own chromatic palette, not a washed-out dark-mode overlay. */
html:not([data-theme="dark"]) .halo { --halo-low: .50; --halo-high: .70; filter: none; }
html:not([data-theme="dark"]) .halo-violet { background: radial-gradient(ellipse at center, rgba(146,92,222,.85), rgba(157,105,213,.38) 27%, transparent 63%); }
html:not([data-theme="dark"]) .halo-pink { background: radial-gradient(ellipse at center, rgba(232,122,176,.82), rgba(219,139,185,.32) 30%, transparent 63%); }
html:not([data-theme="dark"]) .halo-blue { background: radial-gradient(ellipse at center, rgba(106,146,236,.83), rgba(128,150,223,.30) 30%, transparent 64%); }
.motion-preview.tab-hidden .ambient-halos { --halo-play: paused; }
@keyframes halo-drift {
    from { transform: translate(-8%,10%) rotate(-24deg) scale(.78,1.14); }
    to { transform: translate(12%,-14%) rotate(30deg) scale(1.20,.78); }
}
@keyframes halo-pulse { from { opacity: var(--halo-low); } to { opacity: var(--halo-high); } }
@keyframes mist-flow-one {
    from { transform: translate(-28%,24%) rotate(-40deg) scale(.66,1.30); opacity: .48; }
    to { transform: translate(26%,-28%) rotate(45deg) scale(1.34,.70); opacity: 1; }
}
@keyframes mist-flow-two {
    from { transform: translate(30%,-28%) rotate(42deg) scale(1.30,.65); opacity: 1; }
    to { transform: translate(-32%,26%) rotate(-46deg) scale(.70,1.32); opacity: .42; }
}
.inverse-cursor { position: fixed; left: 0; top: 0; z-index: 10000; width: 180px; height: 180px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transform: translate(-50%,-50%); transition: width 200ms cubic-bezier(.2,.8,.2,1), height 200ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease; will-change: left, top; }
.inverse-cursor.is-visible { opacity: 1; }
.inverse-cursor.is-small { width: 12px; height: 12px; }
@media (hover: none), (pointer: coarse) { .inverse-cursor { display: none; } }
@media (max-width: 1050px) and (min-width: 761px) {
    .motion-preview .particle-hero { padding-left: 40px; padding-right: 20px; gap: 0; }
    .motion-preview .hero h1 { font-size: clamp(54px,7vw,78px); }
}
@media (max-width: 760px) {
    .motion-preview .particle-hero { grid-template-columns: 1fr; gap: 0; padding: 126px 22px 90px; }
    .motion-preview .hero h1 { font-size: clamp(48px,13.3vw,76px); line-height: 1.08; }
    .motion-preview .hero-intro { margin-top: 26px; }
    .motion-preview .hero-actions { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
    .motion-preview .hero-actions .button { padding-inline: 20px; min-height: 48px; }
    .particle-stage { width: min(100%,500px); margin-top: 26px; }
    .particle-stage .art-note { font-size: 8px; }
    .motion-controls { bottom: 20px; right: 22px; }
    .halo-anchor { width: 125vmax; height: 125vmax; }
    .halo { --halo-low: .32; --halo-high: .48; }
    html:not([data-theme="dark"]) .halo { --halo-low: .42; --halo-high: .58; }
    .halo::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .halo, .halo::before, .halo::after { animation: none; }
    .halo { opacity: var(--halo-low); }
    .inverse-cursor { transition: none; }
    .motion-preview .reveal { opacity: 1; transform: none; transition: none; }
    .motion-preview .button, .motion-preview .site-header { transition: none; }
}