/* ============================================
   REVÉRSÉ SOCIETY — Design System
   Ultra-premium dark chrome aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* --- CSS Custom Properties --- */
:root {
  --black: #000000;
  --black-rich: #050505;
  --dark-panel: #0a0a0a;
  --dark-border: #1a1a1a;
  --chrome-dark: #6b6b6b;
  --chrome-mid: #a0a0a0;
  --chrome-light: #c8c8c8;
  --chrome-bright: #e0e0e0;
  --chrome-white: #f0f0f0;
  --accent-glow: rgba(200, 200, 200, 0.08);
  --accent-glow-strong: rgba(220, 220, 220, 0.15);
  --font-primary: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #000000;
  background-color: #000000;
  font-family: var(--font-primary);
  color: var(--chrome-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

::selection {
  background: rgba(200, 200, 200, 0.2);
  color: var(--chrome-white);
}

/* --- Background Video --- */
.bg-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: #000 url('hero-bg.png') center/cover no-repeat;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.bg-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* --- Custom Cursor --- */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--chrome-white), var(--chrome-mid));
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.15s ease-out, opacity 0.3s;
  mix-blend-mode: difference;
  opacity: 0;
}

.cursor-dot.visible {
  opacity: 1;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(200, 200, 200, 0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.08s ease-out, width 0.3s, height 0.3s, opacity 0.3s;
  opacity: 0;
}

.cursor-ring.visible {
  opacity: 1;
}

.cursor-ring.hover {
  width: 52px;
  height: 52px;
  border-color: rgba(200, 200, 200, 0.5);
}

/* --- Particle Canvas --- */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* --- Ambient Spotlight --- */
.ambient-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 600px 500px at 50% 0%,
    rgba(180, 180, 180, 0.06) 0%,
    rgba(120, 120, 120, 0.02) 40%,
    transparent 70%
  );
}

/* --- Mouse Follow Light --- */
.mouse-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.mouse-light.visible {
  opacity: 1;
}

/* --- Main Container --- */
.splash-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  text-align: center;
}

/* --- Logo --- */
.logo-wrapper {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  animation: logoReveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  margin-bottom: 32px;
}

.logo-img {
  width: clamp(260px, 35vw, 500px);
  height: auto;
  filter: drop-shadow(0 0 60px rgba(180, 180, 180, 0.18));
  object-fit: contain;
}

@keyframes logoReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Tagline --- */
.tagline {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
  margin-bottom: 36px;
}

.tagline-hero {
  font-size: clamp(22px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: 0.15em;
  background: linear-gradient(
    135deg,
    var(--chrome-dark) 0%,
    var(--chrome-mid) 20%,
    var(--chrome-white) 40%,
    var(--chrome-bright) 50%,
    var(--chrome-mid) 60%,
    var(--chrome-dark) 80%,
    var(--chrome-mid) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chromeShimmer 6s ease-in-out infinite;
  line-height: 1.3;
  margin-bottom: 8px;
}

.tagline-sub {
  font-size: clamp(11px, 1.6vw, 16px);
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--chrome-dark);
}

@keyframes chromeShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes textReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Divider Line --- */
.divider {
  opacity: 0;
  animation: fadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
  width: 60px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--chrome-dark),
    var(--chrome-mid),
    var(--chrome-dark),
    transparent
  );
  margin-bottom: 36px;
}

/* --- Signup Section --- */
.signup-wrapper {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
  margin-bottom: 40px;
  width: 100%;
  max-width: 520px;
}

/* --- VIP Counter --- */
.vip-counter {
  position: relative;
  margin-bottom: 22px;
}

.counter-text {
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--chrome-mid);
  margin-bottom: 10px;
}

.counter-num {
  font-weight: 600;
  color: var(--chrome-white);
  font-variant-numeric: tabular-nums;
}

.counter-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.counter-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--chrome-dark), var(--chrome-mid), var(--chrome-bright));
  border-radius: 2px;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Powered-Up State (≥ 444 members) ── */
.vip-counter.powered-up .counter-num {
  font-weight: 800;
  background: linear-gradient(
    105deg,
    #b8922e 0%,
    #e8d080 20%,
    #fffbe6 45%,
    #e8d080 70%,
    #b8922e 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: counterGoldShine 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
}

.vip-counter.powered-up .counter-fill {
  background: linear-gradient(90deg,
    #b8922e,
    #e8d080,
    #C9A84C,
    #fffbe6,
    #C9A84C);
  background-size: 200% 100%;
  animation: barGoldPulse 3s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(201,168,76,0.4), 0 0 24px rgba(201,168,76,0.15);
  height: 4px;
}

.vip-counter.powered-up .counter-bar {
  height: 4px;
  box-shadow: 0 0 20px rgba(201,168,76,0.1);
}

.vip-counter.powered-up .counter-text {
  color: var(--chrome-bright);
}

/* Power burst flash — plays once on trigger */
.vip-counter.power-burst::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.25) 0%, transparent 70%);
  animation: powerBurst 1.2s ease-out forwards;
  pointer-events: none;
}

@keyframes counterGoldShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes barGoldPulse {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

@keyframes powerBurst {
  0%   { opacity: 0; transform: scale(0.8); }
  20%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Motivational quote cycling */
.counter-quote {
  min-height: 20px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.counter-quote.visible {
  opacity: 1;
}

/* --- Email Form --- */
.signup-form {
  width: 100%;
}

.input-group {
  display: flex;
  gap: 0;
  width: 100%;
  border: 1px solid var(--dark-border);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.4s;
  overflow: hidden;
}

.input-group:focus-within {
  border-color: rgba(200, 200, 200, 0.2);
}

.email-input {
  flex: 1;
  padding: 16px 22px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--chrome-white);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.email-input::placeholder {
  color: rgba(150, 150, 150, 0.4);
  letter-spacing: 0.08em;
}

.submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: linear-gradient(
    135deg,
    rgba(30, 30, 30, 0.9),
    rgba(20, 20, 20, 0.95)
  );
  border: none;
  border-left: 1px solid var(--dark-border);
  color: var(--chrome-mid);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 200, 200, 0.05),
    transparent
  );
  transition: left 0.6s;
}

.submit-btn:hover {
  color: var(--chrome-white);
  background: linear-gradient(
    135deg,
    rgba(50, 50, 50, 0.9),
    rgba(30, 30, 30, 0.95)
  );
}

.submit-btn:hover::before {
  left: 100%;
}

.btn-arrow {
  transition: transform 0.3s;
  font-size: 14px;
}

.submit-btn:hover .btn-arrow {
  transform: translateX(3px);
}

.signup-note {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(120, 120, 120, 0.5);
}

/* --- Success State --- */
.signup-success {
  text-align: center;
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(200, 200, 200, 0.2);
  border-radius: 50%;
  font-size: 20px;
  color: var(--chrome-white);
  margin-bottom: 16px;
  animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 200, 200, 0.1); }
  50% { box-shadow: 0 0 20px 4px rgba(200, 200, 200, 0.08); }
}

.success-text {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--chrome-light);
}

/* --- Social Links --- */
.socials {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
  display: flex;
  gap: 36px;
  align-items: center;
}

.social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  text-decoration: none;
  color: var(--chrome-dark);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link:hover {
  color: var(--chrome-white);
  transform: translateY(-3px);
}

.social-link:hover::before {
  border-color: rgba(200, 200, 200, 0.15);
  box-shadow: 0 0 24px rgba(200, 200, 200, 0.06);
}

.social-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: filter 0.4s;
}

.social-link:hover svg {
  filter: drop-shadow(0 0 8px rgba(200, 200, 200, 0.3));
}

/* --- Bottom Signature --- */
.bottom-sig {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  animation: fadeIn 1s ease 3s forwards;
}

.bottom-sig p {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(100, 100, 100, 0.5);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* --- Vignette Overlay --- */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* --- Scan Line Effect --- */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0.03;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 4px
  );
}

/* --- Top Horizon Glow --- */
.horizon-glow {
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(160, 160, 160, 0.04) 0%,
    transparent 70%
  );
  animation: horizonPulse 8s ease-in-out infinite;
}

@keyframes horizonPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* --- Edge Light Lines --- */
.edge-line-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 180, 180, 0.08),
    rgba(200, 200, 200, 0.15),
    rgba(180, 180, 180, 0.08),
    transparent
  );
}

.edge-line-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1px;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(150, 150, 150, 0.06),
    rgba(180, 180, 180, 0.1),
    rgba(150, 150, 150, 0.06),
    transparent
  );
}

/* ============================================
   888 GOAL REACHED — Info Board
   ============================================ */

/* Left column — preserves original vertical layout */
.splash-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Two-column layout when goal is reached */
.splash-container.goal-reached {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 40px 48px;
}

.splash-container.goal-reached .splash-left {
  flex-shrink: 0;
}

/* Disabled form */
.signup-form.disabled .email-input,
.signup-form.disabled .submit-btn {
  opacity: 0.25;
  pointer-events: none;
  cursor: not-allowed;
}

.signup-form.disabled .signup-note {
  color: var(--chrome-dark);
}

.waitlist-full-msg {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-top: 8px;
  animation: pulseGold 3s ease-in-out infinite;
}

@keyframes pulseGold {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Info Board Panel */
.info-board {
  position: relative;
  width: 440px;
  max-width: 90vw;
  min-height: 500px;
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(5, 5, 8, 0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow:
    0 0 80px rgba(201, 168, 76, 0.06),
    0 40px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(201, 168, 76, 0.1);
  flex-shrink: 0;
  animation: boardReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes boardReveal {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Contained canvases */
.info-board-hex,
.info-board-sparkle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.info-board-hex {
  z-index: 0;
  opacity: 0.4;
}

.info-board-sparkle {
  z-index: 1;
  opacity: 0.7;
}

.info-board-content {
  position: relative;
  z-index: 2;
  padding: 48px 36px;
  text-align: center;
}

/* Milestone header */
.info-board-milestone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.ib-divider-line {
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84c, transparent);
}

.ib-888 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, #c9a84c, #f5d680, #c9a84c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ib-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 28px;
}

/* ── Countdown Timer ── */
.countdown-container {
  margin: 28px 0;
  text-align: center;
}

.countdown-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.6);
  margin-bottom: 18px;
}

.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 14px 10px;
  background: rgba(201, 168, 76, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.03), inset 0 1px 0 rgba(201, 168, 76, 0.06);
  transition: border-color 0.4s, box-shadow 0.4s;
}

.countdown-block:hover {
  border-color: rgba(201, 168, 76, 0.25);
  box-shadow: 0 0 30px rgba(201, 168, 76, 0.08), inset 0 1px 0 rgba(201, 168, 76, 0.1);
}

.countdown-value {
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(201, 168, 76, 0.9);
  line-height: 1;
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
}

.countdown-unit {
  font-family: inherit;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(200, 200, 200, 0.35);
  margin-top: 6px;
}

.countdown-sep {
  font-size: 22px;
  font-weight: 300;
  color: rgba(201, 168, 76, 0.3);
  padding-bottom: 14px;
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.countdown-reached {
  margin-top: 10px;
}

.countdown-zero {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.95);
  text-shadow: 0 0 30px rgba(201, 168, 76, 0.5), 0 0 60px rgba(201, 168, 76, 0.2);
  animation: zeroGlow 2s ease-in-out infinite;
}

@keyframes zeroGlow {
  0%, 100% { text-shadow: 0 0 30px rgba(201, 168, 76, 0.5), 0 0 60px rgba(201, 168, 76, 0.2); }
  50% { text-shadow: 0 0 40px rgba(201, 168, 76, 0.8), 0 0 80px rgba(201, 168, 76, 0.4); }
}

/* Countdown responsive */
@media (max-width: 480px) {
  .countdown-block {
    min-width: 52px;
    padding: 10px 6px;
  }
  .countdown-value {
    font-size: 22px;
  }
  .countdown-sep {
    font-size: 18px;
  }
}

.ib-separator {
  width: 60px;
  height: 1px;
  margin: 24px auto;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.3), transparent);
}

.ib-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(200, 200, 200, 0.55);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.ib-text strong {
  color: rgba(201, 168, 76, 0.7);
  font-weight: 500;
}

.ib-highlight {
  color: rgba(200, 200, 200, 0.7);
  font-weight: 400;
}

/* Quote */
.ib-quote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 2px solid rgba(201, 168, 76, 0.25);
  text-align: left;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ib-quote p {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: rgba(245, 214, 128, 0.6);
  letter-spacing: 0.02em;
  margin: 0;
}

.ib-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.35);
}

/* Telegram button */
.ib-telegram-btn {
  display: block;
  width: 72px;
  height: 72px;
  margin: 24px auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(201, 168, 76, 0.3);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ib-telegram-btn:hover {
  border-color: #c9a84c;
  box-shadow: 0 0 30px rgba(201, 168, 76, 0.25);
  transform: scale(1.08);
}

.ib-telegram-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Telegram label */
.ib-telegram-wrap {
  text-align: center;
  margin: 24px 0 20px;
}

.ib-telegram-btn {
  margin: 0 auto 10px;
}

.ib-telegram-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  animation: pulseGold 3s ease-in-out infinite;
}

/* Socials inside info board */
.ib-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 16px;
}

.ib-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.2);
  transition: all 0.3s;
}

.ib-social-link:hover {
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.08);
  transform: scale(1.1);
}

.ib-social-link svg {
  width: 16px;
  height: 16px;
  fill: rgba(201, 168, 76, 0.5);
  transition: fill 0.3s;
}

.ib-social-link:hover svg {
  fill: #c9a84c;
}

/* Hide default socials when goal reached */
.splash-container.goal-reached #socials-default {
  display: none;
}

.ib-welcome {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  margin-top: 4px;
}

/* ============================================
   COUNTDOWN ZERO - FULL SCREEN CINEMATIC
   ============================================ */

/* The entire body shaking class */
/* The entire body shaking class - Ultra Violent Shake */
body {
  transform-style: preserve-3d;
  perspective: 1000px;
}

body.cinematic-shake {
  animation: bgRumbleViolent 0.08s linear infinite;
}
@keyframes bgRumbleViolent {
  0% { transform: perspective(1000px) translate3d(0, 0, 0) scale(1) rotateZ(0); }
  25% { transform: perspective(1000px) translate3d(-10px, 12px, 15px) scale(1.02) rotateZ(1deg); }
  50% { transform: perspective(1000px) translate3d(8px, -15px, -10px) scale(0.98) rotateZ(-1deg); }
  75% { transform: perspective(1000px) translate3d(-12px, -8px, 12px) scale(1.03) rotateZ(0.5deg); }
  100% { transform: perspective(1000px) translate3d(15px, 10px, -15px) scale(0.99) rotateZ(-0.5deg); }
}

body.cinematic-shake-intense {
  animation: bgRumbleIntenseViolent 0.05s linear infinite;
}
@keyframes bgRumbleIntenseViolent {
  0% { transform: perspective(1000px) translate3d(0, 0, 0) scale(1); }
  25% { transform: perspective(1000px) translate3d(-20px, 25px, 30px) scale(1.05) rotateZ(-2deg); }
  50% { transform: perspective(1000px) translate3d(22px, -20px, -25px) scale(0.95) rotateZ(2deg); }
  75% { transform: perspective(1000px) translate3d(-25px, -22px, 20px) scale(1.08) rotateZ(-3deg); }
  100% { transform: perspective(1000px) translate3d(20px, 22px, -30px) scale(0.97) rotateZ(2deg); }
}

/* --- Premium Cinematic FX Layers --- */
.god-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(200, 160, 50, 0.15) 0%, rgba(200, 160, 50, 0.05) 30%, transparent 60%);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.god-rays.active {
  animation: slowRays 6s ease-in-out forwards;
}
@keyframes slowRays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(0deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
}

/* --- Hollywood FX Layers --- */


.embers-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* Dimming the existing UI */
.bg-video-overlay.dimmed, .bottom-sig.dimmed, .particles-canvas.dimmed {
  transition: opacity 1s, filter 1s;
  opacity: 0.05 !important;
  filter: blur(5px) grayscale(100%);
  pointer-events: none;
}
.splash-container.dimmed {
  transition: filter 1s;
  filter: brightness(0.6) blur(1px);
}

/* Shatter Shards */
.shatter-shard {
  position: absolute;
  transform-origin: center;
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.shatter-shard.explode {
  animation: shardExplodeSmooth 4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes shardExplodeSmooth {
  0% { transform: translate(0, 0) scale(1) rotate(0deg) rotateX(0deg); opacity: 1; filter: brightness(1) drop-shadow(0 0 0px transparent) blur(0px); }
  15% { opacity: 1; filter: brightness(2) drop-shadow(0 0 30px rgba(255, 200, 100, 0.6)) blur(1px); transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)) scale(1.05) rotate(calc(var(--rot) * 0.2)) rotateX(10deg); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.8) rotate(var(--rot)) rotateX(60deg) rotateY(30deg); opacity: 0; filter: brightness(0.5) blur(10px); }
}

/* 1. Cinematic Overlay container */
.cinematic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000; /* above everything */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Initially none */
  overflow: hidden;
}

.cinematic-overlay.active {
  pointer-events: auto;
  background: radial-gradient(circle at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.95) 100%);
}

/* 2. Immersive Text Elements - Premium Elegant Fades */
.cinematic-text {
  position: absolute;
  font-family: var(--font-primary);
  font-size: clamp(30px, 5vw, 80px);
  font-weight: 600; /* Bolder to catch the gradient */
  letter-spacing: 0.1em;
  color: var(--chrome-white);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  z-index: 10;
  
  /* Silver Shine */
  background: linear-gradient(105deg, #8a8a8a 0%, #d4d4d4 20%, #ffffff 45%, #d4d4d4 70%, #8a8a8a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cinematic-text.show {
  animation: premiumFade 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, counterGoldShine 3s ease-in-out infinite;
}

.cinematic-text.show-hold {
  animation: premiumFadeHold 6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, counterGoldShine 3s ease-in-out infinite;
}

@keyframes premiumFade {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(10px); }
  30% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
  70% { opacity: 1; transform: translateY(-5px) scale(1.02); filter: blur(0px); }
  100% { opacity: 0; transform: translateY(-15px) scale(1.05); filter: blur(10px); text-shadow: 0 0 60px rgba(255, 255, 255, 0); }
}

@keyframes premiumFadeHold {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(10px); }
  20% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); }
  100% { opacity: 1; transform: translateY(-10px) scale(1.1); filter: blur(0px); }
}

.cinematic-fade-out {
  animation: finalCrossfade 4s ease-out forwards !important;
}

@keyframes finalCrossfade {
  0% { opacity: 1; filter: blur(0px); }
  100% { opacity: 0; filter: blur(15px); }
}

/* 3. Intricate Seizure-Safe Native Glass Web */
.fs-crack-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 6;
  pointer-events: none;
}

.fs-crack-line {
  fill: none;
  stroke: url(#crack-glow);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px #4da6ff) drop-shadow(0 0 20px #0066cc);
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  opacity: 0;
}

.fs-crack-line.core { stroke-width: 8; }
.fs-crack-line.branch { stroke-width: 4; filter: drop-shadow(0 0 5px #4da6ff); }
.fs-crack-line.web { stroke-width: 2; opacity: 0.5; filter: drop-shadow(0 0 2px #ccffff); }

.fs-crack-overlay.crack-stage-1 .fs-crack-line.core {
  animation: svgCrackDrawSlow 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.fs-crack-overlay.crack-stage-1 .fs-crack-line.branch {
  animation: svgCrackDrawSlow 4s cubic-bezier(0.2, 0.8, 0.2, 1) 1s forwards;
}

.fs-crack-overlay.crack-stage-2 .fs-crack-line.web {
  animation: svgCrackDrawFast 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes svgCrackDrawSlow {
  0% { stroke-dashoffset: 4000; opacity: 0; }
  10% { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.8; }
}

@keyframes svgCrackDrawFast {
  0% { stroke-dashoffset: 4000; opacity: 0; }
  20% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 15px #4da6ff) drop-shadow(0 0 30px #ccffff); }
}

/* Light Array FX */
.crack-light-array {
  position: absolute;
  top: 50%; left: 50%;
  width: 200vw; height: 200vh;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg 40deg, rgba(77, 166, 255, 0.15) 45deg 50deg, transparent 55deg 130deg, rgba(77, 166, 255, 0.15) 135deg 140deg, transparent 145deg 220deg, rgba(77, 166, 255, 0.15) 225deg 230deg, transparent 235deg 310deg, rgba(77, 166, 255, 0.15) 315deg 320deg, transparent 325deg 360deg);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

.crack-light-array.active {
  animation: arraySpin 15s linear infinite, arrayFadeIn 2s ease-out forwards 1s;
}

@keyframes arraySpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes arrayFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Massive Light Beams */
.cinematic-beams {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150vw;
  height: 150vh;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(150, 200, 255, 0.5) 30%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.cinematic-beams.radiating {
  animation: beamPulse 1s ease-in forwards;
}

@keyframes beamPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
}



/* 5. The Portal Reveal */
.portal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}

.portal-container.revealed {
  display: flex !important;
  pointer-events: auto;
  animation: portalReveal 4s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}

@keyframes portalReveal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) translateY(30px); filter: blur(20px); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) translateY(-5px); filter: blur(0px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); filter: blur(0px); }
}

.portal-glow {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(201,168,76,0.3) 0%, rgba(200,30,30,0.1) 40%, transparent 70%);
  animation: portalPulse 4s infinite alternate;
  pointer-events: none;
}

@keyframes portalPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 1; }
}

.portal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 60px;
  background: linear-gradient(135deg, rgba(15,15,15,0.9), rgba(5,5,5,0.95));
  border: 1px solid rgba(201,168,76,0.8);
  border-radius: 4px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(201,168,76,0.2), inset 0 0 30px rgba(201,168,76,0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(201,168,76,0.4) 90deg, transparent 180deg);
  animation: spin 6s linear infinite;
}

.portal-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: 2px;
}

.portal-btn-text, .portal-btn-arrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--chrome-white);
  text-transform: uppercase;
  background: linear-gradient(105deg, #b8922e, #e8d080, #fffbe6, #e8d080, #b8922e);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: counterGoldShine 3s ease-in-out infinite;
}

.portal-btn-arrow {
  font-size: 24px;
  transition: transform 0.3s;
}

.portal-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 120px rgba(201,168,76,0.5), inset 0 0 40px rgba(201,168,76,0.25);
  border-color: rgba(201,168,76,1);
}

.portal-btn:hover .portal-btn-arrow {
  transform: translateX(12px);
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .splash-container.goal-reached {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
  }

  .info-board {
    width: 100%;
    max-width: 440px;
  }
}

@media (max-width: 600px) {
  .logo-img {
    width: clamp(140px, 40vw, 220px);
  }

  .input-group {
    flex-direction: column;
  }

  .submit-btn {
    border-left: none;
    border-top: 1px solid var(--dark-border);
    justify-content: center;
  }

  .socials {
    gap: 28px;
  }

  .signup-wrapper {
    padding: 0 10px;
  }

  .vip-badge {
    display: block;
    margin-top: 6px;
    margin-left: 0;
  }

  .splash-container.goal-reached {
    min-height: auto;
    padding: 30px 16px;
    gap: 30px;
  }

  .info-board {
    min-height: auto;
    max-width: 100%;
  }

  .info-board-content {
    padding: 32px 20px;
  }
}