/* ==========================================
   TEMPLATE — RETRO Y2K
   Y2K 2000s pop · Windows 98 UI · Purple + Pink
   ========================================== */

/* --- Reset & Variables --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Win98 chrome */
  --silver: #c0c0c0;
  --silver-light: #d4d0c8;
  --silver-dark: #808080;
  --white: #ffffff;
  --black: #000000;

  /* Y2K purple + pink palette */
  --purple: #9b4dff;
  --purple-dark: #6d28d9;
  --purple-light: #c9a9ff;
  --pink: #ff5fcb;
  --pink-dark: #d6249f;
  --pink-light: #ffc2ef;
  --hot: #ff3eb5;
  --accent-cyan: #6ee7ff;

  --title: #8a2be2;
  --text: #1a0a2e;
  --link: #c026a8;
  --link-hover: #8a2be2;
  --inset-bg: #ffffff;

  /* Fonts */
  --sys-font: 'VT323', 'Courier New', monospace;
  --pixel-font: 'Press Start 2P', monospace;

  /* 3D border helpers */
  --raised-tl: #ffffff;
  --raised-br: #808080;
  --raised-outer-br: #404040;
  --sunken-tl: #808080;
  --sunken-br: #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sys-font);
  font-size: 18px;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,95,203,0.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(110,231,255,0.30), transparent 45%),
    linear-gradient(135deg, #c86dd7 0%, #9b4dff 45%, #ff7ad9 100%);
  background-attachment: fixed;
}

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }

/* --- 3D Border Mixins --- */
.raised {
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
}
.sunken {
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  box-shadow: inset 1px 1px 0 var(--raised-outer-br), inset -1px -1px 0 var(--white);
}

/* --- Taskbar (top nav) --- */
.taskbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--silver-light);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-bottom: 2px solid;
  border-color: var(--raised-tl) transparent var(--raised-br) transparent;
  box-shadow: inset 0 1px 0 var(--white);
}
.start-btn {
  position: absolute;
  left: 8px;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 14px; height: 38px;
  background: linear-gradient(180deg, var(--purple-light), var(--purple));
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
  cursor: url('cursor.cur'), auto;
  font-family: var(--pixel-font);
  font-size: 0.7rem;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.start-btn:hover { color: var(--white); }
.start-btn:active {
  border-color: var(--raised-outer-br) var(--raised-tl) var(--raised-tl) var(--raised-outer-br);
  box-shadow: inset 1px 1px 0 var(--raised-br), inset -1px -1px 0 var(--white);
}
.start-icon { font-size: 1rem; color: #fff34d; }

.taskbar-divider {
  width: 2px; height: 28px; margin: 0 6px;
  border-left: 1px solid var(--raised-br);
  border-right: 1px solid var(--white);
}
.taskbar-links { display: flex; list-style: none; gap: 3px; }
.taskbar-links a {
  display: block;
  padding: 6px 14px;
  font-family: var(--sys-font);
  font-size: 18px;
  color: var(--black);
  text-decoration: none;
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
  white-space: nowrap;
}
.taskbar-links a:hover {
  border-color: var(--raised-tl) var(--raised-br) var(--raised-br) var(--raised-tl);
  color: var(--purple-dark);
}
.taskbar-links a.active {
  background: var(--pink-light);
  color: var(--purple-dark);
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  box-shadow: inset 1px 1px 0 var(--raised-outer-br);
}
.taskbar-clock {
  position: absolute; right: 8px;
  font-family: var(--sys-font);
  font-size: 18px;
  padding: 4px 14px;
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  padding: 6px 8px; cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--black); }

/* --- Main Container --- */
.desktop { padding: 64px 20px 20px; max-width: 960px; margin: 0 auto; position: relative; }

/* --- Window Component --- */
.window {
  position: relative;
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br), 4px 4px 0 rgba(106,13,173,0.25);
  margin-bottom: 16px;
}
.win-titlebar {
  background: linear-gradient(90deg, var(--purple), var(--pink));
  padding: 4px 6px;
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; user-select: none;
}
.win-title {
  font-family: var(--sys-font);
  font-size: 18px; color: var(--white); font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.win-controls { display: flex; gap: 2px; flex-shrink: 0; }
.win-ctrl-btn {
  width: 22px; height: 22px;
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sys-font); font-size: 16px; cursor: pointer;
  color: var(--black); line-height: 1;
}
.win-ctrl-btn:active {
  border-color: var(--raised-outer-br) var(--raised-tl) var(--raised-tl) var(--raised-outer-br);
  box-shadow: inset 1px 1px 0 var(--raised-br);
}
.win-menubar { display: flex; padding: 2px 4px; gap: 0; border-bottom: 1px solid var(--raised-br); }
.win-menubar span { padding: 2px 10px; font-family: var(--sys-font); font-size: 16px; cursor: pointer; }
.win-menubar span:hover { background: var(--purple); color: var(--white); }
.win-body { padding: 12px; }
.win-content {
  background: var(--inset-bg);
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  box-shadow: inset 1px 1px 0 var(--raised-outer-br), inset -1px -1px 0 var(--white);
  padding: 12px;
}
.win-statusbar { display: flex; padding: 3px 4px; border-top: 1px solid var(--raised-br); gap: 4px; }
.win-status-cell {
  flex: 1; padding: 2px 6px; font-family: var(--sys-font); font-size: 14px;
  border: 1px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
}

/* --- Buttons --- */
.btn-98 {
  display: inline-block; padding: 6px 20px;
  font-family: var(--sys-font); font-size: 18px;
  background: var(--silver-light); color: var(--black);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn-98:hover { background: var(--purple-light); color: var(--purple-dark); }
.btn-98:active {
  border-color: var(--raised-outer-br) var(--raised-tl) var(--raised-tl) var(--raised-outer-br);
  box-shadow: inset 1px 1px 0 var(--raised-br);
  padding: 7px 19px 5px 21px;
}
.btn-pink {
  background: linear-gradient(180deg, var(--pink), var(--pink-dark));
  color: var(--white);
  border-color: var(--pink-light) var(--pink-dark) var(--pink-dark) var(--pink-light);
}
.btn-pink:hover { background: var(--hot); color: var(--white); }
.btn-purple {
  background: linear-gradient(180deg, var(--purple), var(--purple-dark));
  color: var(--white);
  border-color: var(--purple-light) var(--purple-dark) var(--purple-dark) var(--purple-light);
}
.btn-purple:hover { background: var(--purple-dark); color: var(--white); }

/* --- Form Elements --- */
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 6px 8px;
  font-family: var(--sys-font); font-size: 18px;
  background: var(--white);
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  box-shadow: inset 1px 1px 0 var(--raised-outer-br); outline: none;
}
input:focus, textarea:focus {
  border-color: var(--purple) var(--purple-light) var(--purple-light) var(--purple);
}
label { font-family: var(--sys-font); font-size: 16px; display: block; margin-bottom: 4px; }
.form-group { margin-bottom: 12px; }
textarea { min-height: 120px; resize: vertical; }

/* --- Page Header --- */
.page-title {
  font-family: var(--pixel-font); font-size: 1rem;
  color: var(--title); text-align: center; margin-bottom: 4px;
}
.page-subtitle {
  font-family: var(--sys-font); font-size: 18px;
  color: var(--silver-dark); text-align: center; margin-bottom: 16px;
}

/* --- Card Grid --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card {
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--raised-br);
}
.card-header {
  background: linear-gradient(90deg, var(--purple), var(--pink));
  padding: 4px 8px; font-family: var(--sys-font); font-size: 16px; color: var(--white);
}
.card-body { padding: 10px; }
.card-body h3 { font-family: var(--pixel-font); font-size: 0.6rem; margin-bottom: 6px; color: var(--purple-dark); }
.card-body p { font-size: 16px; margin-bottom: 8px; }

/* --- Gallery Grid (stickers) --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.gallery-item {
  background: var(--white);
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  box-shadow: inset 1px 1px 0 var(--raised-outer-br);
  aspect-ratio: 1; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px;
  transition: transform 0.2s;
}
.gallery-item:hover img { transform: scale(1.08) rotate(-2deg); }

/* --- Link List --- */
.link-list { list-style: none; }
.link-list li {
  padding: 6px 8px; border-bottom: 1px solid var(--silver);
  display: flex; justify-content: space-between; align-items: center;
}
.link-list li:last-child { border-bottom: none; }
.link-desc { font-size: 14px; color: var(--silver-dark); }

/* --- About --- */
.about-info { margin-bottom: 16px; }
.about-info p { margin-bottom: 6px; }
.about-info strong { color: var(--purple-dark); }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact-cell {
  background: var(--white);
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  padding: 8px; text-align: center;
}
.fact-label { font-family: var(--pixel-font); font-size: 0.45rem; color: var(--title); display: block; margin-bottom: 4px; }
.fact-value { font-size: 18px; color: var(--text); }

/* --- Rating --- */
.rating { color: var(--pink); font-size: 18px; }

/* --- Contact Socials --- */
.socials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.social-cell {
  background: var(--white);
  border: 2px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  padding: 10px; text-align: center;
}
.social-label { font-family: var(--pixel-font); font-size: 0.45rem; color: var(--title); display: block; margin-bottom: 4px; }

/* --- Sticker decorations --- */
.sticker-decor {
  position: absolute; width: 90px; height: auto; z-index: 5;
  pointer-events: none;
  filter: drop-shadow(2px 3px 2px rgba(106,13,173,0.35));
  animation: bob 4s ease-in-out infinite;
}
.sticker-decor.s-tr { top: 90px; right: -118px; transform: rotate(8deg); }
.sticker-decor.s-tl { top: 90px; left: -120px; transform: rotate(-10deg); animation-delay: .6s; }
.sticker-decor.s-br { bottom: 60px; right: -118px; transform: rotate(-6deg); animation-delay: 1.2s; }
.sticker-decor.s-bl { bottom: 200px; left: -120px; transform: rotate(7deg); animation-delay: 1.8s; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* sticker row inside a window */
.sticker-strip { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.sticker-strip img { width: 64px; height: 64px; object-fit: contain; transition: transform .2s; }
.sticker-strip img:hover { transform: scale(1.15) rotate(6deg); }

/* --- Blinkie / marquee bar --- */
.y2k-bar {
  background: repeating-linear-gradient(45deg, var(--pink) 0 12px, var(--purple) 12px 24px);
  color: #fff; text-align: center; font-family: var(--sys-font); font-size: 16px;
  padding: 4px; letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  overflow: hidden; white-space: nowrap;
}
.y2k-bar span { display: inline-block; animation: slide 14s linear infinite; }
@keyframes slide { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* --- Footer --- */
.site-footer {
  max-width: 960px; margin: 0 auto 20px;
  background: var(--silver-light);
  border: 2px solid;
  border-color: var(--raised-tl) var(--raised-outer-br) var(--raised-outer-br) var(--raised-tl);
  padding: 4px; display: flex; gap: 4px;
}
.footer-cell {
  flex: 1; padding: 3px 8px;
  border: 1px solid;
  border-color: var(--sunken-tl) var(--sunken-br) var(--sunken-br) var(--sunken-tl);
  font-size: 14px; text-align: center;
}
.footer-cell a { color: var(--title); text-decoration: none; }
.footer-cell a:hover { text-decoration: underline; }

/* --- Scroll reveal --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* --- Responsive --- */
@media (max-width: 768px) {
  .taskbar-links {
    display: none; position: fixed; top: 52px; left: 0; right: 0;
    background: var(--silver-light); flex-direction: column; padding: 4px;
    border-bottom: 2px solid var(--raised-br);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 999;
  }
  .taskbar-links.open { display: flex; }
  .taskbar-links a { padding: 8px 12px; }
  .nav-toggle { display: flex; margin-left: auto; }
  .taskbar-clock { display: none; }
  .taskbar-divider { display: none; }
  .start-btn { position: static; }
  .desktop { padding: 64px 10px 10px; }
  .card-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-grid { grid-template-columns: 1fr; }
  .socials-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
  .page-title { font-size: 0.8rem; }
  .sticker-decor { display: none; }
}