/* Y2K — fiesta adolescente cromo y holográfico: destellos, corazones, carita feliz y la foto en una
   ventana de computadora del 2000. Va después de kit/base.css y kit/fiesta.css. Solo var(--k-*). */

.y2 {
  --y2-holo: linear-gradient(125deg,
    color-mix(in srgb, var(--k-secondary) 80%, var(--k-surface)),
    color-mix(in srgb, var(--k-primary) 22%, var(--k-surface)) 30%,
    color-mix(in srgb, var(--k-accent) 45%, var(--k-surface)) 55%,
    color-mix(in srgb, var(--k-secondary) 60%, var(--k-surface)) 80%,
    var(--k-surface));
  --y2-ink: var(--k-text);
}
.y2 h2 { font-weight: 800; }
.y2-hero { background: var(--y2-holo); }
.y2-hero > .y2-spark, .y2-hero > .y2-smile, .y2-hero > .y2-fly { position: absolute; }
.y2-spark { width: 64px; }
.y2-spark .k-orn { color: var(--k-primary); }
.y2-spark--a { top: 3%; left: 3%; }
.y2-spark--b { top: 40%; right: 1%; width: 50px; }
.y2-spark--b .k-orn { color: var(--k-surface); }
@media (prefers-reduced-motion: no-preference) {
  .y2-spark { animation: y2-twinkle 2.8s ease-in-out infinite; }
  .y2-spark--b { animation-delay: -1.4s; }
}
@keyframes y2-twinkle { 50% { scale: .82; opacity: .6; } }
.y2-smile { top: 7%; right: 7%; width: 48px; rotate: 14deg; }
.y2-fly { top: 50%; left: 1%; width: 52px; rotate: -16deg; --k-orn-2: var(--k-surface); }
.y2-window { position: relative; width: min(64vw, 270px); margin: .6rem auto 1.2rem; padding: 0 6px 6px; border-radius: 14px; background: var(--k-surface); text-align: left; box-shadow: 0 0 0 2px var(--y2-ink), 6px 6px 0 2px var(--y2-ink); }
.y2-bar { display: flex; align-items: center; gap: 6px; padding: 8px 4px; font: 700 .78rem/1 var(--k-font-body); }
.y2-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--k-primary); box-shadow: 0 0 0 1.5px var(--y2-ink); }
.y2-bar i:nth-child(2) { background: var(--k-accent); }
.y2-bar i:nth-child(3) { background: var(--k-secondary); }
.y2-bar span { overflow: hidden; margin-left: auto; text-overflow: ellipsis; white-space: nowrap; }
.y2-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 8px; background: var(--k-soft); box-shadow: 0 0 0 2px var(--y2-ink); }
.y2-photo img { width: 100%; height: 100%; object-fit: cover; }
.y2-age { position: absolute; right: -14%; bottom: -8%; rotate: 8deg; box-shadow: 0 0 0 3px var(--y2-ink), 4px 4px 0 3px var(--y2-ink); }
.y2 .fs-age strong { font-family: var(--k-font-title); font-weight: 800; }
.y2 .fs-name { color: var(--k-primary); font-weight: 800; text-shadow: 3px 3px 0 var(--k-secondary); }
.y2 .fs-countdown > div { border-radius: 12px; box-shadow: 0 0 0 2px var(--y2-ink), 3px 3px 0 2px var(--y2-ink); }
.y2 .fs-countdown strong { font-weight: 800; }
.y2 .k-card { box-shadow: 0 0 0 2px var(--y2-ink), 5px 5px 0 2px var(--y2-ink); }
.y2 .fs-soft { background: color-mix(in srgb, var(--k-secondary) 34%, var(--k-bg)); }
.y2 .fs-welcome .k-divider { width: 56px; --k-orn-2: var(--k-surface); }
.y2 .fs-footer-orn { width: 60px; }