/* ===========================
   FONT FAMILY
   =========================== */
    @font-face {
      font-family: 'Satoshi';
      font-weight: 300;
      font-style: normal;
      src: url('/fonts/Satoshi-Light.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 300;
      font-style: italic;
      src: url('/fonts/Satoshi-LightItalic.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 400;
      font-style: normal;
      src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 400;
      font-style: italic;
      src: url('/fonts/Satoshi-Italic.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 500;
      font-style: normal;
      src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 500;
      font-style: italic;
      src: url('/fonts/Satoshi-MediumItalic.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 700;
      font-style: normal;
      src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 700;
      font-style: italic;
      src: url('/fonts/Satoshi-BoldItalic.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 900;
      font-style: normal;
      src: url('/fonts/Satoshi-Black.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Satoshi';
      font-weight: 900;
      font-style: italic;
      src: url('/fonts/Satoshi-BlackItalic.woff2') format('woff2');
      font-display: swap;
    }	
/* ===========================
   GLOBAL Z-INDEX / DEPTH CONFIG
   =========================== */
:root {
  /* Main layers (higher = closer to viewer) */
  --z-fade-overlay: 9999;
  --z-footer: 8;
  --z-social-links: 6;
  --z-content-area: 5;
  --z-tunnel-rings: 1;
  --z-static-rings: 2;
  --z-glow: 4;
  --z-logo: 10;

  /* Logo & Glow */
  --logo-width: clamp(120px, 20vw, 240px);
  --logo-pulse-duration: 9s;
  --logo-drop-shadow: 0 0 24px rgba(244, 223, 191, 0.6);

  --glow-size: clamp(140px, 23vw, 280px);
  --glow-pulse-duration: 6s;
  --glow-gradient-inner: rgba(244, 223, 191, 0.25);
  --glow-gradient-outer-opacity: 0.25;

  /* Tunnel & Static Rings */
  --tunnel-base-size: clamp(120px, 30vw, 300px);
  --tunnel-animation-duration: 9s;
  --tunnel-stagger-step: 1.285s;
  --tunnel-stroke-color: #f4dfbf;
  --tunnel-stroke-width: 0.4;
  --tunnel-opacity-min: 0.0;
  --tunnel-opacity-max: 0.5;
  --tunnel-rotate: 18deg;
  --tunnel-scale-start: 0.8;
  --tunnel-scale-end: 1.8;

  --static-ring-1-size: clamp(160px, 27vw, 320px);
  --static-ring-2-size: clamp(130px, 22vw, 260px);
  --static-ring-border-1: rgba(244, 223, 191, 0.4);
  --static-ring-border-2: rgba(244, 223, 191, 0.3);
  --static-ring-rotate: 18deg;

  /* Social Links Styling - ELONGATED DECAGON SHAPE */
  --social-item-width: clamp(80px, 14vw, 120px);
  --social-item-height: clamp(20px, 3.5vw, 28px);
  --social-decagon-clip: polygon(
    15% 0%, 85% 0%,
    92% 15%, 95% 50%, 92% 85%,
    85% 100%, 15% 100%,
    8% 85%, 5% 50%, 8% 15%
  );
  --social-decagon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 28'%3E%3Cpath d='M 21,1 L 119,1 L 128,4 L 132,14 L 128,24 L 119,27 L 21,27 L 12,24 L 8,14 L 12,4 Z' fill='none' stroke='%23f4dfbf' stroke-width='1.4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  /* Social Links Appearance */
  --social-stroke-color: #f4dfbf;
  --social-stroke-width: 1;
  --social-fill-opacity: 0.18;
  --social-fill-hover-opacity: 0.3;
  --social-text-color: #f4dfbf;
  --social-text-hover-color: #fff0d1;
  --social-text-shadow: 0 0 12px rgba(244, 223, 191, 0.6);
  --social-font-size: clamp(12px, 2.5vw, 14px);

  /* Transitions */
  --social-transition-duration: 0.45s;
  --fade-overlay-transition: 1.8s;
}

/* ===========================
   BASE STYLES
   =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000b33 !important;
  min-height: 100vh;
  overflow: auto;
  color: #f4dfbf;
  font-family: 'Satoshi Light', sans-serif;
}

/* --- Footer Fix: Make layout use flex column --- */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
  padding-bottom: 60px; /* adjust if footer height changes */
}

.site-footer {
  position: relative;
  flex-shrink: 0;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===========================
   TUNNEL RINGS ANIMATION
   =========================== */
.tunnel-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--tunnel-rotate));
  animation: zoomOut var(--tunnel-animation-duration) cubic-bezier(0.3, 0, 0.7, 1) infinite;
  opacity: 0;
  width: var(--tunnel-base-size);
  height: var(--tunnel-base-size);
}

.tunnel-ring:nth-of-type(1) { animation-delay: 0.0s; }
.tunnel-ring:nth-of-type(2) { animation-delay: var(--tunnel-stagger-step); }
.tunnel-ring:nth-of-type(3) { animation-delay: calc(var(--tunnel-stagger-step) * 2); }
.tunnel-ring:nth-of-type(4) { animation-delay: calc(var(--tunnel-stagger-step) * 3); }
.tunnel-ring:nth-of-type(5) { animation-delay: calc(var(--tunnel-stagger-step) * 4); }
.tunnel-ring:nth-of-type(6) { animation-delay: calc(var(--tunnel-stagger-step) * 5); }
.tunnel-ring:nth-of-type(7) { animation-delay: calc(var(--tunnel-stagger-step) * 6); }

/* ===========================
   STATIC RINGS
   =========================== */
.static-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--static-ring-rotate));
  width: var(--static-ring-1-size);
  height: var(--static-ring-1-size);
  border: 1.5px solid var(--static-ring-border-1);
  clip-path: polygon(
    50% 0%, 76.94% 9.55%, 95.11% 30.9%, 95.11% 69.1%,
    76.94% 90.45%, 50% 100%, 23.06% 90.45%, 4.89% 69.1%,
    4.89% 30.9%, 23.06% 9.55%
  );
}

.static-ring.second {
  width: var(--static-ring-2-size);
  height: var(--static-ring-2-size);
  border-color: var(--static-ring-border-2);
}

/* ===========================
   GLOW EFFECTS
   =========================== */
.glow {
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-gradient-inner), transparent 70%);
  animation: glowPulse var(--glow-pulse-duration) cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* ===========================
   LOGO ANIMATIONS
   =========================== */
.logo {
  width: var(--logo-width);
  height: auto;
  animation: logoBreathe var(--logo-pulse-duration) infinite;
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  filter: drop-shadow(var(--logo-drop-shadow));
  pointer-events: none;
}

/* ===========================
   KEYFRAME ANIMATIONS
   =========================== */
@keyframes logoBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.20);
  }
}

@keyframes zoomOut {
  0% {
    transform: translate(-50%, -50%) rotate(var(--tunnel-rotate)) scale(var(--tunnel-scale-start));
    opacity: var(--tunnel-opacity-min);
  }
  20% {
    opacity: calc(var(--tunnel-opacity-min) + (var(--tunnel-opacity-max) - var(--tunnel-opacity-min)) * 0.39);
  }
  50% {
    opacity: var(--tunnel-opacity-max);
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--tunnel-rotate)) scale(var(--tunnel-scale-end));
    opacity: var(--tunnel-opacity-min);
  }
}

@keyframes glowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: var(--glow-gradient-outer-opacity);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: calc(var(--glow-gradient-outer-opacity) * 2);
  }
}

/* ===========================
   FADE OVERLAY
   =========================== */
.fade-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-fade-overlay);
  opacity: 1;
  transition: opacity var(--fade-overlay-transition) ease-in-out;
  pointer-events: none;
}

.fade-overlay.fade-out {
  opacity: 0;
}

/* ===========================
   CONTENT AREA (Below Logo)
   =========================== */
.content-area {
  position: relative;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  z-index: var(--z-content-area);
  margin-top: calc(50vh + var(--logo-width) / 2 + 60px);
  margin-bottom: 60px;
}

.content-area h1 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 36px);
  color: #f4dfbf;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.content-area h2 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 3.5vw, 22px);
  color: rgba(244, 223, 191, 0.8);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.content-area p {
  font-family: 'Satoshi Light', sans-serif;
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.8;
  color: rgba(244, 223, 191, 0.9);
  margin-bottom: 16px;
}

/* ===========================
   SOCIAL MEDIA LINKS
   =========================== */
.social-links {
  position: relative;
  width: 100%;
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  z-index: var(--z-social-links);
  padding: 40px 20px;
  padding-top: 160px;
}

.social-item {
  position: relative;
  width: var(--social-item-width);
  height: var(--social-item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--social-text-color);
  font-family: 'Satoshi Light', sans-serif;
  font-size: var(--social-font-size);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all var(--social-transition-duration) cubic-bezier(0.4, 0, 0.6, 1);
}

/* DECAGON SOCIAL ITEM STYLES */
.social-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: var(--social-item-height);
  background-image: var(--social-decagon-svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -2;
}

.social-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: var(--social-item-height);
  clip-path: var(--social-decagon-clip);
  background: rgba(238, 239, 240, var(--social-fill-opacity));
  z-index: -1;
  transition: background 0.3s ease;
}

.social-item:hover {
  color: var(--social-text-hover-color);
  text-shadow: var(--social-text-shadow);
}

.social-item:hover::after {
  background: rgba(238, 239, 240, var(--social-fill-hover-opacity));
}

.social-item:active {
  transform: scale(0.95);
}

/* ===========================
   FOOTER
   =========================== */
.site-footer {
  position: fixed;              /* was: relative */
  bottom: 0;                    /* new */
  left: 0;                      /* new */
  width: 100%;
  padding: 24px 20px;
  text-align: center;
  background: rgba(0, 5, 20, 0.65);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(244, 223, 191, 0.15);
  z-index: var(--z-footer);
  /* margin-top: auto;          REMOVE this */
}

.site-footer p {
  font-family: 'Satoshi Light', sans-serif;
  font-size: clamp(11px, 2vw, 13px);
  color: rgba(244, 223, 191, 0.7);
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.site-footer strong {
  font-weight: 500;
  color: rgba(244, 223, 191, 0.9);
}

/* ===========================
   MOBILE STYLES
   =========================== */
@media (max-width: 768px) {
  :root {
    /* Larger elements on mobile */
    --logo-width: clamp(200px, 45vw, 300px);
    --tunnel-base-size: clamp(200px, 60vw, 300px);
    --glow-size: clamp(180px, 45vw, 360px);
    
    /* Mobile social links */
    --social-item-width: clamp(78px, 22vw, 116px);
    --social-item-height: clamp(22px, 4vw, 30px);
    --social-font-size: clamp(12px, 3vw, 16px);
  }

  body {
    overflow-y: auto;
    padding-bottom: 0;
  }

  .content-area {
    margin-top: calc(50vh + var(--logo-width) / 2 + 40px);
    margin-bottom: 40px;
  }

  .social-links {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 10px 20px;
	padding-top: 80px;
  }

  .social-item::before,
  .social-item::after {
    width: calc(var(--social-item-width) + 20px);
  }

  .body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent sideways scroll from fixed elements */
} {
    padding: 20px 16px;
  }

  .site-footer p {
    font-size: clamp(10px, 2.2vw, 12px);
  }
}

/* KILL DEFAULT LINK COLORS */
.content-area a,
.content-area a:link,
.content-area a:visited,
.content-area a:hover,
.content-area a:active,
.content-area a:focus {
  color: #e6d0a8 !important;
  text-decoration: none !important;
}

/* Add hover effect */
.content-area a:hover {
  color: #fff0d1 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 240, 209, 0.5) !important;
}