/* Y2K Throwback: butterflies flap and drift, sparkles twinkle, the CD's sheen turns.
   The classic opening ("dialup", only if the film can't load): the desktop zooms in, the windows
   pop open, the butterflies flutter in and the chrome name inflates. Only transform and opacity
   animate; reduced motion shows the finished desktop, still. */
[data-theme="y2k"] .hero-sky .hero-art { overflow: visible; }
[data-theme="y2k"] .hero-art .yk-wing, [data-theme="y2k"].tv-bd .yk-wing { transform-box: fill-box; animation: yk-flap .34s ease-in-out infinite alternate; }
[data-theme="y2k"] .hero-art .yk-wl, [data-theme="y2k"].tv-bd .yk-wl { transform-origin: 100% 50%; }
[data-theme="y2k"] .hero-art .yk-wr, [data-theme="y2k"].tv-bd .yk-wr { transform-origin: 0 50%; }
[data-theme="y2k"] .hero-art .yk-bf { animation: yk-float 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.6s); }
[data-theme="y2k"] .hero-art .yk-cd { transform-box: fill-box; transform-origin: center; animation: yk-spin 9s linear infinite; }
[data-theme="y2k"] .hero-art .twinkle, [data-theme="y2k"].tv-bd .twinkle { animation: yk-tw 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
[data-theme="y2k"] .card { border-radius: 20px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(185, 163, 240, .6), 0 14px 34px rgba(142, 106, 216, .2); }
[data-theme="y2k"] .btn { border-radius: 999px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%); }
[data-theme="y2k"] .title { letter-spacing: .01em; text-shadow: 0 2px 0 #fff, 0 4px 0 #ff5fb3, 0 8px 18px rgba(142, 106, 216, .35); }
[data-theme="y2k"] .eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; }
[data-theme="y2k"] .btn, [data-theme="y2k"] .card h2, [data-theme="y2k"] .title, [data-theme="y2k"] .eyebrow { overflow-wrap: anywhere; }

/* the classic opening */
[data-theme="y2k"] .op-art svg { overflow: visible; }
[data-theme="y2k"] .op-card:not(.fm-cta) { background: rgba(255, 255, 255, .82); color: var(--cardInk); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a7ff, 0 20px 50px rgba(142, 106, 216, .28); }
[data-theme="y2k"] .op-dialup .op-line { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
[data-theme="y2k"] .op-dialup.op-run .yk-bf { animation: yk-in 1.4s calc(2s + var(--i) * .25s) cubic-bezier(.2, .8, .2, 1) both, yk-float 6s 3.6s ease-in-out infinite alternate; }
[data-theme="y2k"] .op-dialup.op-run .yk-cd { animation: yk-spin 1.2s 1.4s cubic-bezier(.2, .8, .2, 1) both, yk-spin 9s 2.6s linear infinite; }
[data-theme="y2k"] .op-art { transform: scale(1.4); transform-origin: 50% 50%; transition: opacity 1s ease, transform 4.6s cubic-bezier(.33, .05, .2, 1); }
[data-theme="y2k"] .op-run .op-art, [data-theme="y2k"] .op-final .op-art { opacity: 1; transform: none; }
[data-theme="y2k"] .op-final .op-art { transition: none; }
@media (max-aspect-ratio: 4/5) { [data-theme="y2k"] .op-art svg { transform: scale(1.3); transform-origin: 50% 100%; } }

@keyframes yk-flap { to { transform: scaleX(.35); } }
@keyframes yk-float { from { transform: translate(0, 0); } to { transform: translate(6px, -7px); } }
@keyframes yk-spin { to { transform: rotate(360deg); } }
@keyframes yk-in { from { opacity: 0; transform: translate(-60px, 30px); } }
@keyframes yk-tw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="y2k"] .hero-art *, [data-theme="y2k"] .op-art *, [data-theme="y2k"].tv-bd * { animation: none !important; }
}