/* Y2K layer: glitter titles, gel buttons, retro video windows, tap sparkles. Loaded after style.css. */
:root {
  --shine-pink: #f7a8c4;
  --shine-silver: #fdf8fb;
  --gel-butter-top: #fffbe6;
  --gel-butter: #fde8a0;
  --gel-butter-low: #f5d46e;
  --gel-pink-top: #ffe3ee;
  --gel-pink: #f6a9c4;
  --gel-pink-low: #ea86a9;
  --win-grey: #c0c0c0;
  --win-light: #f4f4f4;
  --win-dark: #3a3a3a;
  --win-title: linear-gradient(90deg, #2c1a15, #6a4335);
}

/* 1. Glitter titles: a pink-and-silver shine sweeps across the letters */
.combo__serif, .combo__script, .combo__cont, .contact__title, .services__title .script, .about__hi, .brands__label, .hero__title {
  background: linear-gradient(110deg, var(--brown) 0%, var(--brown) 38%, var(--shine-pink) 46%, var(--shine-silver) 50%, var(--shine-pink) 54%, var(--brown) 62%, var(--brown) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: y2k-shine 7s linear infinite;
}
.hero__title {
  background-image: linear-gradient(110deg, #fff9f2 0%, #fff9f2 38%, var(--shine-pink) 46%, #ffffff 50%, var(--shine-pink) 54%, #fff9f2 62%, #fff9f2 100%);
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.combo__script { animation-delay: -1.5s; }
@keyframes y2k-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* 2. Glossy gel buttons */
.btn, .nav__cta, .float-cta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 999px; border: 1px solid rgba(74,46,39,.35);
}
.btn--butter, .nav__cta {
  background: linear-gradient(to bottom, var(--gel-butter-top) 0%, var(--gel-butter) 48%, var(--gel-butter-low) 52%, var(--gel-butter) 100%);
  color: var(--brown);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(160,110,20,.25), 0 4px 10px rgba(58,35,29,.3);
}
.btn--ghost, .float-cta {
  background: linear-gradient(to bottom, var(--gel-pink-top) 0%, var(--gel-pink) 48%, var(--gel-pink-low) 52%, var(--gel-pink) 100%);
  color: var(--brown-dark);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(150,40,80,.25), 0 4px 10px rgba(58,35,29,.3);
}
.btn--ghost:hover { background: linear-gradient(to bottom, #fff0f5 0%, #f8b8cf 48%, #ee93b3 52%, #f8b8cf 100%); }
.btn::before, .nav__cta::before, .float-cta::before {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 2px; height: 46%;
  border-radius: 999px; background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.15));
  pointer-events: none;
}

/* 4. Retro window frames on the videos, matching connect.exe */
.phone__screen {
  border-radius: 0; border: 3px solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  background: var(--win-grey); padding: 24px 4px 4px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.28);
}
.phone__screen::before { /* title bar replaces the notch */
  content: attr(data-title); top: 2px; left: 2px; right: 2px; transform: none;
  width: auto; height: 19px; border-radius: 0;
  background: var(--win-title); color: #fff;
  font: 11px/19px var(--sans); letter-spacing: .02em; text-align: left; padding: 0 26px 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phone__screen::after { /* close box */
  content: "\00d7"; position: absolute; z-index: 3; top: 4px; right: 5px;
  width: 15px; height: 14px; display: grid; place-items: center;
  font: 700 12px/1 var(--sans); color: #000; background: var(--win-grey);
  border: 1px solid; border-color: #fff #555 #555 #fff;
}
.phone video { border: 2px solid; border-color: #555 #fff #fff #555; }
.phone__play:focus-visible { border-radius: 0; }

/* 3. Tap sparkles (phones) */
.sparkle--burst { animation: y2k-burst .75s ease-out forwards; }
@keyframes y2k-burst {
  from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(120deg); }
}

@media (prefers-reduced-motion: reduce) {
  .combo__serif, .combo__script, .combo__cont, .contact__title, .services__title .script, .about__hi, .brands__label, .hero__title { animation: none; background-position: 50% 0; }
}