/* ==========================================================================
   BHIPPI GAMES - MINIMAL MONOCHROME SPLASH SCREEN
   Vector logo, water-fill loading, dark, 60fps GPU-accelerated
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bhippi-bg: #060606;
  --bhippi-white: #f4f4f2;
  --bhippi-text-white: rgba(244, 244, 242, 0.92);
  --bhippi-text-muted: rgba(244, 244, 242, 0.5);
  --bhippi-ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --bhippi-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Splash Container */
.bhippi-splash-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bhippi-bg);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  transition: opacity 0.85s var(--bhippi-ease-cinematic), visibility 0.85s;
  will-change: opacity, transform;
}

.bhippi-splash-overlay.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Subtle Film Grain Noise Texture */
.bhippi-splash-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.032;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* Very Subtle Radial Glow Behind the Mark */
.bhippi-splash-backdrop-glow {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 85vw);
  height: min(520px, 85vw);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(244, 244, 242, 0.07) 0%,
    rgba(244, 244, 242, 0.03) 40%,
    rgba(244, 244, 242, 0.0) 72%
  );
  filter: blur(45px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: bhippiGlowEntry 1.8s var(--bhippi-ease-cinematic) 0.15s forwards;
  will-change: opacity, transform;
}

/* Main Content Center Area */
.bhippi-splash-center {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo Wrapper */
.bhippi-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  filter: blur(8px);
  animation: bhippiLogoReveal 1.1s var(--bhippi-ease-cinematic) 0.5s forwards;
  will-change: transform, opacity, filter;
}

/* Subtle micro-breathe animation when resting.
   opacity/filter are pinned here because swapping the `animation` name
   away from bhippiLogoReveal drops that animation's forwards-filled
   values entirely — without this the wrapper would snap back to its
   pre-reveal opacity:0/blur(8px) base state the moment is-alive applies. */
.bhippi-logo-wrapper.is-alive {
  opacity: 1;
  filter: blur(0px);
  animation: bhippiLogoBreathe 4.5s ease-in-out infinite alternate;
}

/* Vector Logo SVG */
.bhippi-logo-svg {
  display: block;
  width: min(300px, 50vw);
  max-width: 340px;
  height: auto;
  max-height: min(340px, 42vh);
  aspect-ratio: 1 / 1;
  overflow: visible;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 34px rgba(244, 244, 242, 0.06));
}

/* Dim "empty vessel" fill, always present behind the water */
.bhippi-logo-ghost {
  fill: rgba(244, 244, 242, 0.08);
}

/* Crisp outline so the mark reads clearly even before any water rises */
.bhippi-logo-outline {
  fill: none;
  stroke: rgba(244, 244, 242, 0.34);
  stroke-width: 1.4px;
}

/* Water group — clip-path is set inline (per-instance id) in JS.
   Its transform (translateY) is driven every frame from real progress. */
.bhippi-water-rise {
  will-change: transform;
}

.bhippi-water-body,
.bhippi-water-wave {
  fill: var(--bhippi-white);
}

.bhippi-water-wave {
  filter: drop-shadow(0 0 5px rgba(244, 244, 242, 0.55));
}

.bhippi-water-scroll {
  animation: bhippiWaveScroll 2.6s linear infinite;
}

/* Credits Section */
.bhippi-credits {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  animation: bhippiCreditsFade 0.9s var(--bhippi-ease-cinematic) 1.8s forwards;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.bhippi-credit-primary {
  font-size: 11px;
  font-weight: 600;
  color: var(--bhippi-text-white);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.2;
}

.bhippi-credit-secondary {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--bhippi-text-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Completion Pulse State on the Mark */
.bhippi-splash-overlay.is-completing .bhippi-logo-svg {
  animation: bhippiMarkPulse 0.7s var(--bhippi-ease-cinematic) forwards;
}

.bhippi-splash-overlay.is-completing .bhippi-credits {
  animation: none;
  opacity: 0 !important;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ==========================================================================
   KEYFRAME ANIMATIONS (60 FPS GPU Optimized)
   ========================================================================== */

@keyframes bhippiGlowEntry {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes bhippiLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes bhippiLogoBreathe {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-2px) scale(1.012);
  }
}

@keyframes bhippiWaveScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-330px);
  }
}

@keyframes bhippiMarkPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0 rgba(244, 244, 242, 0));
  }
  45% {
    transform: scale(1.035);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 46px rgba(244, 244, 242, 0.55));
  }
  100% {
    transform: scale(1.015);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(244, 244, 242, 0.22));
  }
}

@keyframes bhippiCreditsFade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */

/* Landscape Mode on Mobile/Handhelds */
@media (max-height: 540px) and (orientation: landscape) {
  .bhippi-logo-svg {
    /* height (not max-height) must be the definite dimension here —
       aspect-ratio can't derive a size from max-height alone when
       width is also auto, which left this at a computed 0x0 before. */
    width: auto;
    height: min(44vh, 260px);
    max-height: none;
  }
  .bhippi-credits {
    margin-top: 14px;
    gap: 4px;
  }
  .bhippi-credit-primary {
    font-size: 9.5px;
  }
  .bhippi-credit-secondary {
    font-size: 8px;
  }
}

/* Portrait Mode on Mobile Phones */
@media (max-width: 480px) and (orientation: portrait) {
  .bhippi-logo-svg {
    width: clamp(180px, 50vw, 250px);
    max-height: 36vh;
  }
  .bhippi-credits {
    margin-top: 22px;
  }
  .bhippi-credit-primary {
    font-size: 10px;
  }
  .bhippi-credit-secondary {
    font-size: 8.5px;
  }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bhippi-splash-overlay * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bhippi-logo-wrapper,
  .bhippi-credits {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .bhippi-water-scroll {
    animation: none !important;
  }
  .bhippi-splash-backdrop-glow {
    opacity: 1;
  }
}