/* ==========================================================
   V — Custom Styles
   Rose gold + deep burgundy palette. Luxe and unapologetic.
   ========================================================== */

:root {
  --v-black:    #07060a;
  --v-ink:      #0e0c12;
  --v-wine:     #2a0a18;
  --v-deep:     #1a0812;
  --v-rose:     #c4856a;
  --v-gold:     #d4a870;
  --v-blush:    #e8c4b0;
  --v-cream:    #f0e8dc;
  --v-mist:     #c8b8ac;
}

/* ---------- Typography ---------- */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--v-black);
  color: var(--v-cream);
  letter-spacing: 0.01em;
}
.font-cinzel    { font-family: 'Cinzel', serif; }
.font-cormorant { font-family: 'Cormorant Garamond', serif; }

/* ---------- Tailwind utility overrides ---------- */
.bg-v-black   { background-color: var(--v-black); }
.bg-v-ink     { background-color: var(--v-ink); }
.bg-v-wine    { background-color: var(--v-wine); }
.text-v-cream { color: var(--v-cream); }
.text-v-rose  { color: var(--v-rose); }
.text-v-gold  { color: var(--v-gold); }
.text-v-mist  { color: var(--v-mist); }
.border-v-rose { border-color: var(--v-rose); }

/* ---------- Ambient backdrop ---------- */
.bg-gradient-radial {
  background:
    radial-gradient(ellipse at 25% 0%,   rgba(80,20,40,0.65),   transparent 55%),
    radial-gradient(ellipse at 80% 20%,  rgba(42,10,24,0.6),    transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(196,133,106,0.12), transparent 55%),
    linear-gradient(180deg, #050408 0%, #07060a 50%, #050408 100%);
  animation: nebula-drift 30s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .bg-gradient-radial { animation: none; } }

.noise-layer {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.75  0 0 0 0 0.7  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.9) 100%);
}

/* ---------- Halo ---------- */
.halo {
  width: 80vmin; height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(196,133,106,0.20) 0%,
    rgba(196,133,106,0.08) 30%,
    rgba(196,133,106,0.02) 60%,
    transparent 75%);
  filter: blur(28px);
  animation: halo-pulse 8s ease-in-out infinite;
}
.halo::after {
  content: "";
  position: absolute; inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(196,133,106,0.07);
  animation: halo-pulse 8s ease-in-out 4s infinite;
}
@keyframes halo-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%       { transform: scale(1.1); opacity: 1; }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1.3s cubic-bezier(0.2,1,0.2,1), transform 1.3s cubic-bezier(0.2,1,0.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Sigil hero ---------- */
.sigil-hero {
  display: inline-block;
  animation: sigil-draw 2.5s cubic-bezier(0.2,0.8,0.2,1) forwards,
             sigil-pulse 8s ease-in-out 2.5s infinite;
  will-change: filter;
}
@keyframes sigil-draw {
  0%   { opacity: 0; transform: scale(0.55) rotate(-18deg); filter: blur(14px); }
  45%  { opacity: 0.9; transform: scale(1.1) rotate(5deg); filter: blur(2px) drop-shadow(0 0 40px rgba(196,133,106,1)); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0) drop-shadow(0 0 18px rgba(196,133,106,0.5)); }
}
@keyframes sigil-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(196,133,106,0.3)); }
  50%       { filter: drop-shadow(0 0 30px rgba(196,133,106,0.8)); }
}
@media (prefers-reduced-motion: reduce) {
  .sigil-hero { animation: none; opacity: 1; filter: drop-shadow(0 0 18px rgba(196,133,106,0.5)); }
}

/* ---------- Divider ---------- */
.divider {
  width: 6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v-rose), transparent);
  position: relative;
}
.divider::after {
  content: "♀";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--v-black);
  color: var(--v-rose);
  padding: 0 0.6rem;
  font-size: 0.85rem;
}

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--v-black);
  background: linear-gradient(135deg, var(--v-blush), var(--v-rose));
  border: 1px solid var(--v-rose);
  overflow: hidden; transition: all 0.5s ease; cursor: pointer;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--v-rose), #8a3a28);
  opacity: 0; transition: opacity 0.5s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -10px rgba(196,133,106,0.6); }
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--v-cream);
  background: transparent;
  border: 1px solid rgba(240,232,220,0.3);
  overflow: hidden; transition: all 0.5s ease; cursor: pointer;
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,133,106,0.15), transparent);
  opacity: 0; transition: opacity 0.5s ease;
}
.btn-ghost:hover { border-color: var(--v-rose); color: var(--v-rose); transform: translateY(-2px); }
.btn-ghost:hover::before { opacity: 1; }

/* ---------- Platform cards ---------- */
.platform-card {
  position: relative;
  padding: 2.5rem 2rem;
  background: linear-gradient(180deg, rgba(42,10,24,0.5), rgba(7,6,10,0.8));
  border: 1px solid rgba(196,133,106,0.2);
  backdrop-filter: blur(8px);
  transition: all 0.6s ease;
  overflow: hidden;
}
.platform-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(196,133,106,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.6s ease;
}
.platform-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,0.06) 50%, transparent 62%);
  transform: translateX(-130%); pointer-events: none; transition: none;
}
.platform-card:hover { transform: translateY(-6px); border-color: rgba(196,133,106,0.55); box-shadow: 0 20px 60px -20px rgba(196,133,106,0.3); }
.platform-card:hover::before { opacity: 1; }
.platform-card:hover::after  { transform: translateX(130%); transition: transform 0.55s ease; }

.platform-icon {
  display: inline-block; font-size: 2.5rem;
  color: var(--v-rose); margin-bottom: 1.25rem;
  text-shadow: 0 0 30px rgba(196,133,106,0.5);
}

/* ---------- Gate modal ---------- */
#gate.show { display: flex !important; animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.gate-card {
  position: relative;
  background: linear-gradient(180deg, rgba(42,10,24,0.7), rgba(7,6,10,0.97));
  border: 1px solid rgba(196,133,106,0.4);
  box-shadow: 0 30px 100px -20px rgba(196,133,106,0.25),
              inset 0 0 60px rgba(0,0,0,0.6);
  animation: gate-rise 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.gate-card::before {
  content: ""; position: absolute; top: 14px; left: 14px;
  width: 22px; height: 22px;
  border-top: 1px solid rgba(196,133,106,0.5);
  border-left: 1px solid rgba(196,133,106,0.5);
  pointer-events: none;
}
.gate-card::after {
  content: ""; position: absolute; bottom: 14px; right: 14px;
  width: 22px; height: 22px;
  border-bottom: 1px solid rgba(196,133,106,0.5);
  border-right: 1px solid rgba(196,133,106,0.5);
  pointer-events: none;
}
@keyframes gate-rise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- Perk list ---------- */
.perk-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(42,10,24,0.35), rgba(7,6,10,0.7));
  border: 1px solid rgba(196,133,106,0.15);
  border-left: 3px solid var(--v-rose);
  transition: all 0.4s ease;
}
.perk-item:hover { border-color: rgba(196,133,106,0.5); transform: translateX(4px); box-shadow: -4px 0 20px -8px rgba(196,133,106,0.3); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--v-black); }
::-webkit-scrollbar-thumb { background: rgba(196,133,106,0.25); }
::-webkit-scrollbar-thumb:hover { background: var(--v-rose); }

/* ---------- Selection ---------- */
::selection { background: var(--v-rose); color: var(--v-black); }

/* ---------- Nav underline ---------- */
nav a { position: relative; }
nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 0; height: 1px; background: var(--v-rose);
  transition: width 0.35s ease, left 0.35s ease;
}
nav a:hover::after { width: 100%; left: 0; }

/* ---------- Section header gradient ---------- */
.font-cinzel.text-3xl,
.font-cinzel.text-4xl,
.font-cinzel.text-5xl {
  background: linear-gradient(180deg, var(--v-cream) 0%, rgba(240,232,220,0.72) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 640px) {
  .btn-primary, .btn-ghost { padding: 0.85rem 1.5rem; font-size: 0.7rem; }
  .platform-card { padding: 1.75rem 1.25rem; }
}

/* ==========================================================
   VISUAL ENHANCEMENT LAYER
   ========================================================== */

/* Scroll progress */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--v-rose), var(--v-blush), var(--v-rose));
  z-index: 200; pointer-events: none;
  box-shadow: 0 0 10px rgba(196,133,106,0.8);
  transition: width 0.08s linear;
}

/* Keyframes */
@keyframes shimmer-sweep {
  0%   { background-position: 100% center; }
  100% { background-position: -200% center; }
}
@keyframes ring-expand {
  0%   { transform: scale(0.1); opacity: 0.65; }
  100% { transform: scale(5.5); opacity: 0; }
}
@keyframes btn-ripple-anim { to { transform: scale(4); opacity: 0; } }
@keyframes tagline-pulse {
  0%, 100% { opacity: 0.85; text-shadow: 0 0 20px rgba(196,133,106,0.1); }
  50%       { opacity: 1;    text-shadow: 0 0 50px rgba(196,133,106,0.5), 0 0 18px rgba(196,133,106,0.25); }
}
@keyframes nebula-drift {
  0%, 100% { transform: scale(1)    translate(0, 0); }
  33%      { transform: scale(1.02) translate(0.7%, -0.4%); }
  66%      { transform: scale(1.01) translate(-0.4%, 0.7%); }
}
@keyframes sigil-ambient {
  0%   { transform: rotate(0deg)   translateY(0px) scale(1); }
  25%  { transform: rotate(90deg)  translateY(-12px) scale(1.03); }
  50%  { transform: rotate(180deg) translateY(0px) scale(1); }
  75%  { transform: rotate(270deg) translateY(10px) scale(0.97); }
  100% { transform: rotate(360deg) translateY(0px) scale(1); }
}

/* Hero outer ring */
#top { --ring-color: rgba(196,133,106,0.06); }
#top::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 60%, var(--ring-color) 70%, transparent 75%);
  pointer-events: none;
}

/* Small shake (for gate wrong-password) */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}