/* website/styles.css */

/* Brand Colors */
:root {
  --pink: #FFB6C1;
  --orange: #FFD59E;
  --yellow: #FFFACD;
  --green: #98FB98;
  --blue: #87CEEB;
  --purple: #DDA0DD;
  --cream: #FFFEF0;
  --text: #333;
  --text-light: #666;

  --rainbow-gradient: linear-gradient(
    135deg,
    var(--pink),
    var(--orange),
    var(--yellow),
    var(--green),
    var(--blue),
    var(--purple),
    var(--pink)
  );
}

/* Animated gradient */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Reset and Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--cream);
  min-height: 100vh;
}

/* Typography */
h1, h2, h3 {
  font-family: "Lilita One", cursive, sans-serif;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

a {
  color: var(--purple);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Layout */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.center {
  text-align: center;
}

/* Header */
.header {
  background: var(--rainbow-gradient);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
  padding: 2rem 1rem;
  padding-bottom: calc(2rem + 35px);
  margin-bottom: 35px;
  text-align: center;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L200,0 L200,95 C198,95 197,82 195,82 C193,82 192,95 190,95 C188,95 187,78 185,78 C183,78 182,90 180,90 C178,90 177,74 175,74 C173,74 172,94 170,94 C168,94 167,80 165,80 C163,80 162,88 160,88 C158,88 157,72 155,72 C153,72 152,92 150,92 C148,92 147,76 145,76 C143,76 142,95 140,95 C138,95 137,80 135,80 C133,80 132,90 130,90 C128,90 127,70 125,70 C123,70 122,94 120,94 C118,94 117,82 115,82 C113,82 112,88 110,88 C108,88 107,74 105,74 C103,74 102,92 100,92 C98,92 97,80 95,80 C93,80 92,95 90,95 C88,95 87,72 85,72 C83,72 82,90 80,90 C78,90 77,76 75,76 C73,76 72,94 70,94 C68,94 67,82 65,82 C63,82 62,88 60,88 C58,88 57,70 55,70 C53,70 52,92 50,92 C48,92 47,78 45,78 C43,78 42,95 40,95 C38,95 37,80 35,80 C33,80 32,90 30,90 C28,90 27,74 25,74 C23,74 22,94 20,94 C18,94 17,82 15,82 C13,82 12,72 10,72 C8,72 7,92 5,92 C3,92 2,80 0,80 L0,0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L200,0 L200,95 C198,95 197,82 195,82 C193,82 192,95 190,95 C188,95 187,78 185,78 C183,78 182,90 180,90 C178,90 177,74 175,74 C173,74 172,94 170,94 C168,94 167,80 165,80 C163,80 162,88 160,88 C158,88 157,72 155,72 C153,72 152,92 150,92 C148,92 147,76 145,76 C143,76 142,95 140,95 C138,95 137,80 135,80 C133,80 132,90 130,90 C128,90 127,70 125,70 C123,70 122,94 120,94 C118,94 117,82 115,82 C113,82 112,88 110,88 C108,88 107,74 105,74 C103,74 102,92 100,92 C98,92 97,80 95,80 C93,80 92,95 90,95 C88,95 87,72 85,72 C83,72 82,90 80,90 C78,90 77,76 75,76 C73,76 72,94 70,94 C68,94 67,82 65,82 C63,82 62,88 60,88 C58,88 57,70 55,70 C53,53 52,92 50,92 C48,92 47,78 45,78 C43,78 42,95 40,95 C38,95 37,80 35,80 C33,80 32,90 30,90 C28,90 27,74 25,74 C23,74 22,94 20,94 C18,94 17,82 15,82 C13,82 12,72 10,72 C8,72 7,92 5,92 C3,92 2,80 0,80 L0,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo-container {
  position: relative;
  width: 5rem;
  height: 5rem;
}

.header .logo {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5rem;
  line-height: 1;
  transition: opacity 1.5s ease;
}

.header .stacked-title {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1;
  color: var(--text);
  text-shadow: 2px 2px 0 rgba(255,255,255,0.5);
}

.header .stacked-title span {
  display: block;
}

/* Cards */
.card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Buttons */
.button {
  display: inline-block;
  background: var(--rainbow-gradient);
  color: var(--text);
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-decoration: none;
}

.button-secondary {
  background: white;
  border: 2px solid var(--purple);
  color: var(--purple);
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* Countdown (for redirect page) */
.countdown {
  font-size: 4rem;
  font-weight: bold;
  color: var(--purple);
  margin: 1rem 0;
}

.headset-info {
  font-size: 1.5rem;
  margin: 1rem 0;
}

.headset-info .emoji {
  font-size: 2rem;
}

/* Responsive */
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .header .logo { font-size: 3rem; }
  .countdown { font-size: 3rem; }
}