/* ─── Glass Effect ─── */
.glass {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      rgba(0, 0, 0, 0.06) 65%,
      rgba(255, 255, 255, 0.07) 100%);
  backdrop-filter: blur(6px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(6px) saturate(160%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-right-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    /* Outer ambient shadow */
    0 8px 40px -4px rgba(0, 0, 0, 0.55),
    0 2px 8px -2px rgba(0, 0, 0, 0.3),
    /* Inner top highlight (refraction) */
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    /* Inner bottom dark edge */
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    /* Inner left highlight */
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    /* Inner right dark */
    inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.glass-primary {
  background: rgba(244, 171, 37, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 171, 37, 0.3);
  box-shadow: 0 8px 32px 0 rgba(244, 171, 37, 0.1);
}

.organic-gradient {
  background: radial-gradient(circle at 50% 50%, rgba(244, 171, 37, 0.15) 0%, rgba(10, 9, 7, 0) 70%);
}

/* ─── Reveal Animation ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Thpace Canvas ─── */
#thpace-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: -10;
  pointer-events: none;
}

/* ─── Hide Scrollbar ─── */
/* Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Flaticon icon vertical alignment fix ─── */
.fi {
  display: block;
  line-height: 1;
}

/* Mobile: Disable zoom & text selection */
html,
body {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── Dynamic viewport height for iOS Safari ─── */
.h-screen {
  height: 100dvh !important;
}

.min-h-screen {
  min-height: 100dvh !important;
}

/* ─── Easter Egg: Logo Animations ─── */
#hero-logo {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

.logo-shake {
  animation: logo-shake 0.4s ease-in-out infinite;
}

@keyframes logo-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px) rotate(-1deg);
  }

  75% {
    transform: translateX(5px) rotate(1deg);
  }
}

.logo-flip {
  animation: logo-flip 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes logo-flip {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.logo-falling {
  position: fixed !important;
  z-index: 10000;
  bottom: 80px;
  top: auto !important;
  left: calc(50% - 96px) !important;
  width: 192px !important;
  height: 192px !important;
  pointer-events: none;
  animation: logo-fall-down 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.logo-landed {
  position: absolute !important;
  z-index: 10000;
  bottom: 80px !important;
  left: calc(50% - 96px) !important;
  width: 192px !important;
  height: 192px !important;
  transform: rotate(375deg) scale(1) !important;
  pointer-events: none;
}

@keyframes logo-fall-down {
  0% {
    bottom: 50dvh;
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

  40% {
    transform: rotate(180deg) scale(0.8);
    opacity: 1;
  }

  70% {
    bottom: 80px;
    transform: rotate(300deg) scale(1.1);
  }

  85% {
    bottom: 120px;
    transform: rotate(340deg) scale(1);
  }

  100% {
    bottom: 80px;
    transform: rotate(375deg) scale(1);
    opacity: 1;
  }
}

/* ─── Footer Overscroll Hack (Mobile Only) ─── */
.footer-overscroll {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.overscroll-easter-egg {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .footer-overscroll {
    padding-bottom: calc(50dvh + 1.5rem + env(safe-area-inset-bottom, 0px));
    margin-bottom: -50dvh;
  }

  .overscroll-easter-egg {
    display: block;
    bottom: calc(50dvh - 150px) !important;
  }
}