/* ============================================================
   PS3 WORLD — WINTER / CHRISTMAS THEME (temporary)
   ------------------------------------------------------------
   Loaded on every page after style.css. Does nothing unless
   <html> has the class "winter", which the small inline script
   in each page's <head> adds from 1 to 31 December (or on any
   day with ?theme=winter in the address, for previewing).
   After December the site looks normal again by itself; to
   remove for good, delete this file and the "Winter theme"
   block from each page's <head>.

   Look: midnight-navy night sky, frost-white and ice-blue text
   accents, cranberry-red buttons, a snowflake by the logo, a string of fairy lights
   under the header and a light snowfall.
   ============================================================ */

/* ---------- 1. Token swap: PS blue -> cranberry + ice ---------- */
html.winter {
  /* Surfaces: cold night navy */
  --bg: #050a14;
  --bg-2: #0a1222;
  --card: #0d1729;
  --card-2: #132036;
  --media-bg: #040812;
  --panel-top: #10203a;
  --panel-bottom: #08101e;

  /* Borders */
  --border: #1b2a42;
  --border-2: #2a3f60;

  /* Text: frost */
  --text: #eef6ff;
  --text-2: #a9bbd3;
  --text-3: #7488a6;

  /* Brand: buttons go cranberry, highlights go ice */
  --ps-blue: #b3122e;
  --ps-blue-2: #e5394f;
  --ps-cyan: #a9e2ff;
  --ps-sky: #7fd0ff;
  --ps-sky-2: #b8e6ff;
  --ps-ice: #d6f1ff;

  /* Small UI */
  --kbd-bg: #16243a;
  --kbd-text: #d6f1ff;

  /* Depth */
  --shadow-glow: 0 0 40px rgba(127, 208, 255, 0.16);
  --ring: 0 0 0 3px rgba(169, 226, 255, 0.45);

  scrollbar-color: #2a3f60 var(--bg);
}

/* ---------- 2. Background & base ---------- */
html.winter body { background: #050913; }
html.winter body::before {
  background:
    linear-gradient(rgba(5, 10, 20, 0.93), rgba(5, 10, 20, 0.93)),
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(127, 208, 255, 0.14), transparent),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(229, 57, 79, 0.08), transparent),
    #000;
}
html.winter ::selection { background: rgba(127, 208, 255, 0.35); }

/* XMB waves: paler and icier */
html.winter .page-waves {
  --pw-a: #3683c5; --pw-b: #67abf8; --pw-c: #9de8ff;
  --pw-d: #314773; --pw-e: #152036; --pw-f: #b7f0ff;
  --pw-glow: rgba(127, 208, 255, 0.18);
}

html.winter hr.solid { border-bottom-color: rgba(169, 226, 255, 0.18); }

/* ---------- 3. Header, logo & nav ---------- */
html.winter header.site {
  background: rgba(5, 10, 20, 0.95);
  border-bottom-color: rgba(169, 226, 255, 0.22);
}
html.winter .logo::after {
  content: "❄️";
  font-size: 20px;
  line-height: 1;
  animation: wtSpin 12s linear infinite;
}
html.winter nav.main > a.active::after,
html.winter nav.main .nav-item > a.active::after { box-shadow: 0 0 10px rgba(229, 57, 79, 0.6); }
html.winter nav.main .dropdown { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(169, 226, 255, 0.08); }
html.winter nav.main .dropdown a:hover,
html.winter nav.main .dropdown a:focus-visible { background: rgba(127, 208, 255, 0.1); }
html.winter nav.main .dropdown a.active { background: rgba(229, 57, 79, 0.1); }
html.winter .search-trigger:focus-visible { box-shadow: 0 0 0 4px rgba(127, 208, 255, 0.15); }

/* ---------- 4. Hero: frosted headline ---------- */
html.winter .hero h1 {
  background: linear-gradient(180deg, #fff 0%, #e4f5ff 55%, #8fd6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(169, 226, 255, 0.25));
}

/* ---------- 5. Buttons ---------- */
html.winter .btn,
html.winter .contact-form button,
html.winter .contact-form input[type="submit"] { box-shadow: 0 0 22px rgba(229, 57, 79, 0.32); }
html.winter .btn:hover,
html.winter .btn-manual:hover,
html.winter .contact-form button:hover,
html.winter .contact-form input[type="submit"]:hover { box-shadow: 0 0 34px rgba(229, 57, 79, 0.55); }
html.winter .btn.btn-ghost:hover { background: rgba(127, 208, 255, 0.1); }
html.winter .alpha-btn.active { box-shadow: 0 0 16px rgba(229, 57, 79, 0.45); }

/* ---------- 6. Cards & home ---------- */
html.winter .explore-card {
  background:
    radial-gradient(120% 120% at 100% 100%, rgba(127, 208, 255, 0.13), transparent 60%),
    linear-gradient(160deg, var(--panel-top), var(--panel-bottom));
}
html.winter .explore-card:hover,
html.winter .link-card:hover {
  border-color: rgba(169, 226, 255, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(169, 226, 255, 0.16), 0 0 30px rgba(127, 208, 255, 0.12);
}
html.winter .link-card:hover { background: linear-gradient(180deg, rgba(127, 208, 255, 0.08), rgba(127, 208, 255, 0.02)); }
html.winter .explore-chips a:hover { background: rgba(127, 208, 255, 0.18); }
html.winter .feed-item--lead { background: linear-gradient(135deg, rgba(127, 208, 255, 0.09), rgba(255, 255, 255, 0.02) 60%); }
html.winter .share-btn:hover { box-shadow: 0 6px 24px rgba(127, 208, 255, 0.16); }
html.winter .post .post-date { border-color: rgba(169, 226, 255, 0.22); background: rgba(169, 226, 255, 0.06); }
html.winter .info-box,
html.winter .info-box-purple,
html.winter .contact-notice { --accent-soft: rgba(127, 208, 255, 0.18); }

/* ---------- 7. Navigation aids ---------- */
html.winter .crumbs { border-color: rgba(169, 226, 255, 0.22); background: rgba(169, 226, 255, 0.05); }
html.winter .quick-nav-count { background: rgba(169, 226, 255, 0.12); }
@media (hover: hover) { html.winter .quick-nav-links a:hover { background: rgba(127, 208, 255, 0.12); } }
html.winter .quick-nav-links a.is-current { box-shadow: 0 0 14px rgba(229, 57, 79, 0.4); }
html.winter .sb-item.is-current { background: rgba(229, 57, 79, 0.16); }
html.winter .scroll-progress {
  background: linear-gradient(90deg, #e5394f, #fff, #7fd0ff);
  box-shadow: 0 0 8px rgba(169, 226, 255, 0.6);
}
html.winter #backToTop { box-shadow: 0 8px 32px rgba(229, 57, 79, 0.4); }
html.winter #backToTop:hover { box-shadow: 0 12px 40px rgba(229, 57, 79, 0.6), 0 0 0 8px rgba(169, 226, 255, 0.08); }
html.winter .lightbox button.close:hover,
html.winter .lightbox button.close:focus-visible,
html.winter .lb-nav:hover,
html.winter .lb-nav:focus-visible { background: rgba(127, 208, 255, 0.22); }
html.winter .contact-form input:focus,
html.winter .contact-form textarea:focus,
html.winter .contact-form select:focus { box-shadow: 0 0 0 4px rgba(127, 208, 255, 0.15); }

/* ---------- 8. Footer ---------- */
html.winter footer.site { border-top-color: rgba(169, 226, 255, 0.25); }
html.winter footer.site::before {
  content: "❄  Happy holidays from PS3 World  ❄";
  display: block;
  margin: -12px 0 24px;
  text-align: center;
  color: var(--ps-cyan);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ---------- 9. Decorations (added by the inline script) ---------- */
/* Fairy lights hanging under the header: a sagging wire with bulbs
   in four colours. Two bulb layers twinkle out of step. */
.wt-lights {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  pointer-events: none;
  overflow: hidden;
  /* the wire: one sag every 64px */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M0 1 Q32 17 64 1' fill='none' stroke='%23dcebff' stroke-opacity='.32' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 64px 22px repeat-x;
}
.wt-lights::before,
.wt-lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 256px 22px;
}
/* bulbs sit at the bottom of each sag (x = 32, 96, 160, 224) */
.wt-lights::before {
  background-image:
    radial-gradient(circle 4px at 32px 13px, #ff4d5e 70%, transparent 72%),
    radial-gradient(circle 4px at 160px 13px, #ffd166 70%, transparent 72%);
  filter: drop-shadow(0 0 4px rgba(255, 120, 120, 0.9));
  animation: wtTwinkle 2.4s ease-in-out infinite;
}
.wt-lights::after {
  background-image:
    radial-gradient(circle 4px at 96px 13px, #49d27a 70%, transparent 72%),
    radial-gradient(circle 4px at 224px 13px, #8fd6ff 70%, transparent 72%);
  filter: drop-shadow(0 0 4px rgba(140, 220, 255, 0.9));
  animation: wtTwinkle 2.4s ease-in-out -1.2s infinite;
}

/* Snowfall: a few soft flakes drifting down behind the content */
.wt-snow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wt-snow i {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.55;
  filter: blur(0.5px);
  animation: wtFall 16s linear infinite;
}
.wt-snow i:nth-child(1)  { left: 4%;  animation-duration: 15s; animation-delay: -2s; }
.wt-snow i:nth-child(2)  { left: 12%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: -9s; opacity: 0.4; }
.wt-snow i:nth-child(3)  { left: 21%; animation-duration: 17s; animation-delay: -5s; }
.wt-snow i:nth-child(4)  { left: 29%; width: 8px; height: 8px; animation-duration: 13s; animation-delay: -11s; opacity: 0.35; filter: blur(1.5px); }
.wt-snow i:nth-child(5)  { left: 38%; width: 4px; height: 4px; animation-duration: 21s; animation-delay: -3s; }
.wt-snow i:nth-child(6)  { left: 47%; animation-duration: 16s; animation-delay: -14s; opacity: 0.45; }
.wt-snow i:nth-child(7)  { left: 56%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: -7s; }
.wt-snow i:nth-child(8)  { left: 64%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: -1s; opacity: 0.3; filter: blur(1.5px); }
.wt-snow i:nth-child(9)  { left: 72%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: -12s; }
.wt-snow i:nth-child(10) { left: 80%; animation-duration: 15s; animation-delay: -6s; opacity: 0.5; }
.wt-snow i:nth-child(11) { left: 88%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: -16s; }
.wt-snow i:nth-child(12) { left: 95%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -10s; opacity: 0.4; }

@keyframes wtFall {
  0%   { transform: translate(0, -2vh); }
  25%  { transform: translate(14px, 24vh); }
  50%  { transform: translate(-10px, 50vh); }
  75%  { transform: translate(12px, 76vh); }
  100% { transform: translate(-6px, 104vh); }
}
@keyframes wtTwinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes wtSpin {
  to { transform: rotate(360deg); }
}

html:not(.winter) .wt-lights,
html:not(.winter) .wt-snow { display: none; }

/* ---------- 10. Small screens & reduced motion ---------- */
@media (max-width: 700px) {
  .wt-snow i:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-snow { display: none; }
  .wt-lights::before,
  .wt-lights::after,
  html.winter .logo::after { animation: none; }
}
@media print {
  .wt-snow, .wt-lights { display: none; }
}