/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #f3efff;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(176, 74, 255, 0.20), transparent 50%),
              radial-gradient(1000px 500px at 80% 20%, rgba(0, 234, 255, 0.14), transparent 55%),
              linear-gradient(180deg, #07010e, #0b0215 40%, #090112);
  overflow-x: hidden;
}

/* Global tilt */
:root { --tiltX: 0deg; --tiltY: 0deg; }
.container { transform: perspective(1200px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition: transform 0.1s ease-out; }

/* Animated glyphs */
.bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.glyph {
  position: absolute;
  left: var(--x);
  top: 110%;
  font-size: calc(28px * var(--s));
  color: rgba(231, 222, 255, 0.18);
  text-shadow:
    0 0 12px rgba(184, 120, 255, 0.25),
    0 0 24px rgba(0, 230, 255, 0.18);
  animation:
    floatUp var(--d) linear infinite,
    flicker calc(var(--d) * 0.6) ease-in-out infinite alternate;
  transform: rotate(var(--r));
  user-select: none;
}

@keyframes floatUp {
  0% { transform: translateY(0) rotate(var(--r)); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-220vh) rotate(calc(var(--r) + 40deg)); opacity: 0; }
}

@keyframes flicker {
  0% { text-shadow:
    0 0 8px rgba(184,120,255,0.20),
    0 0 18px rgba(0,230,255,0.12);
  }
  100% { text-shadow:
    0 0 16px rgba(184,120,255,0.35),
    0 0 36px rgba(0,230,255,0.22);
  }
}

/* Seasonal hero section */
.hero-art {
  --hero-url: url('images/hero-placeholder.svg');
  position: relative;
  width: 100%;
  min-height: min(72vh, 760px);
  background-image: var(--hero-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(184,120,255,0.18);
  box-shadow: inset 0 -100px 120px rgba(7,1,14,0.6);
}
.hero-overlay {
  position: relative;
  min-height: inherit;
  background: linear-gradient(180deg, rgba(6,1,12,0.45), rgba(10,3,20,0.66) 40%, rgba(10,3,20,0.85) 80%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(20px,4vw,40px);
}

/* Layout */
.container {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.hero {
  text-align: center;
  padding-top: 6vh;
}

h1 {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.9;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #efe7ff 0%, #c6b6ff 50%, #abf6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 20px rgba(162, 99, 255, 0.18));
}

.tagline {
  color: #d8cffd;
  font-size: clamp(16px, 2.4vw, 22px);
  opacity: 0.92;
}
.tagline span { color: #b982ff; }

.cta {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(164, 95, 255, 0.85), rgba(0, 200, 255, 0.85));
  color: #0a0314;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(130, 70, 220, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(130, 70, 220, 0.5); }

.about {
  margin: 6vh auto 0;
  max-width: 880px;
  background: rgba(14, 3, 28, 0.42);
  border: 1px solid rgba(184,120,255,0.18);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 40px rgba(155, 84, 255, 0.06);
}

.links {
  margin: 5vh auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  padding: 0 clamp(16px, 3vw, 28px);
}
.link {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(184,120,255,0.22);
  background: linear-gradient(180deg, rgba(24, 7, 44, 0.65), rgba(18, 5, 34, 0.65));
  color: #efe7ff;
  font-weight: 600;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.link:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.55);
  background: linear-gradient(180deg, rgba(26, 9, 48, 0.85), rgba(20, 7, 40, 0.85));
}

.footer {
  margin: 8vh 0 4vh;
  text-align: center;
  color: #b9aef0;
  opacity: 0.85;
  font-size: 14px;
}

/* Mobile polish */
@media (max-width: 520px) {
  .about { margin-top: 4vh; }
  .links { gap: 10px; }
}


/* Social icon badges */
.link { position: relative; padding-left: 44px; }
.link::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
/* IG */
.link-ig::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f58529'/%3E%3Cstop offset='0.5' stop-color='%23dd2a7b'/%3E%3Cstop offset='1' stop-color='%234156b2'/%3E%3C/linearGradient%3E%3Crect width='20' height='20' x='2' y='2' rx='5' fill='url(%23g)'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='white'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.3' fill='white'/%3E%3C/svg%3E"); }
/* YT */
.link-yt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='12' rx='3' ry='3' fill='%23ff0033'/%3E%3Cpath d='M10 9l6 3-6 3V9z' fill='white'/%3E%3C/svg%3E"); }
/* TikTok */
.link-tt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath d='M14 4c1.2 2.3 3.1 3.7 5 3.9v3.0c-1.9 0-3.6-0.7-5-1.7v5.9a5.2 5.2 0 11-3.7-5.0v3.0a2.2 2.2 0 102.2 2.2V4z' fill='%2300f2ea'/%3E%3Cpath d='M14 4c1.2 2.3 3.1 3.7 5 3.9v1.8c-1.9 0-3.6-0.7-5-1.7v5.9a5.2 5.2 0 11-3.7-5.0v1.8a2.2 2.2 0 102.2 2.2V4z' fill='%23ff0050' opacity='0.7'/%3E%3C/svg%3E"); }
/* Facebook */
.link-fb::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='4' fill='%231877f2'/%3E%3Cpath d='M13 10h2.5V7.5H13c-1.4 0-2.5 1.1-2.5 2.5V12H8v2.5h2.5V20H13v-5.5h2.3l.2-2.5H13z' fill='white'/%3E%3C/svg%3E"); }
/* eBay */
.link-eb::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Crect width='64' height='24' fill='none'/%3E%3Ctext x='2' y='18' font-family='Arial' font-size='16' fill='%23e53238'%3Ee%3C/text%3E%3Ctext x='12' y='18' font-family='Arial' font-size='16' fill='%232a61f4'%3EB%3C/text%3E%3Ctext x='23' y='18' font-family='Arial' font-size='16' fill='%23f5af02'%3Ea%3C/text%3E%3Ctext x='33' y='18' font-family='Arial' font-size='16' fill='%237fba00'%3Ey%3C/text%3E%3C/svg%3E"); }