/* ============================================
   SPACED OUT - Modern Cinematic Experience
   ============================================ */

:root {
  --void-black: #000000;
  --glow-blue: #3399ff;
  --glow-blue-bright: #66b3ff;
  --white: #ffffff;
  --transition-fast: 0.3s;
  --transition-medium: 1s;
  --transition-slow: 2s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--void-black);
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--void-black);
  font-family: 'Source Code Pro', monospace;
  overflow: hidden;
  overflow-x: hidden;
  width: 100%;
  min-width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   WELCOME LAYER (isolates form so map/video load cannot shift it)
   ============================================ */

.welcome-layer {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.welcome-layer > #form {
  pointer-events: auto;
}
.welcome-layer:has(#form.fade-out) {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   VOID STATE: Search Interface
   ============================================ */

#form {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  transition: none;
}
body.form-transitions-ready #form {
  transition: opacity var(--transition-medium) ease-out,
              transform var(--transition-medium) ease-out;
}

#form.void-state {
  opacity: 1;
}

#form.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -60%);
}

.form-intro {
  text-align: left;
  margin: 0 0 16px 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Source Code Pro', monospace;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity var(--transition-medium) ease-out;
}

#form.place-selected .form-intro {
  opacity: 0;
}

.input-wrap {
  position: relative;
  display: inline-block;
}

#location {
  width: 480px;
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid var(--white);
  background-color: var(--void-black);
  color: var(--white);
  font-family: 'Source Code Pro', monospace;
  outline: none;
  transition: border-color var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease;
}

#location:focus {
  border-color: var(--glow-blue);
  box-shadow: 0 0 10px rgba(51, 153, 255, 0.3);
}

/* Animated hint overlay (letter-by-letter + blinking cursor). Opaque background masks any ghost placeholder. */
.location-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'Source Code Pro', monospace;
  color: rgba(255, 255, 255, 0.5);
  background-color: var(--void-black);
  border: 2px solid var(--white);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.location-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.location-hint-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: rgba(255, 255, 255, 0.7);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

#space-out-btn {
  margin-left: 10px;
  padding: 12px 24px;
  font-size: 16px;
  background: var(--void-black);
  border: 2px solid var(--white);
  color: var(--white);
  cursor: pointer;
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  transition: border-color var(--transition-fast) ease,
              color var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease,
              transform var(--transition-fast) ease;
}

#space-out-btn:hover {
  border-color: var(--glow-blue);
  color: var(--glow-blue);
  box-shadow: 0 0 15px rgba(51, 153, 255, 0.4);
  transform: translateY(-2px);
}

#space-out-btn:active {
  transform: translateY(0);
}

/* ============================================
   MUTE BUTTON (top right, same style as main button)
   ============================================ */

.mute-btn {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 50;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void-black);
  border: 2px solid var(--white);
  color: var(--white);
  cursor: pointer;
  font-family: 'Source Code Pro', monospace;
  transition: border-color var(--transition-fast) ease,
              color var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease,
              transform var(--transition-fast) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mute-btn:hover {
  border-color: var(--glow-blue);
  color: var(--glow-blue);
  box-shadow: 0 0 12px rgba(51, 153, 255, 0.35);
  transform: translateY(-1px);
}

.mute-btn .icon {
  display: block;
}

.mute-btn .icon-off {
  display: none;
}

.mute-btn.muted .icon-on {
  display: none;
}

.mute-btn.muted .icon-off {
  display: block;
}

/* ============================================
   MAP: Full viewport; zoom via Maps API (throttled).
   ============================================ */

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-slow) ease-in;
  pointer-events: none;
}

#map.map-revealed {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#map.hidden-for-video {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1;
}

/* Mobile: map has zero size and is off-screen until revealed to prevent layout shift / flash */
@media (max-width: 768px) {
  #map:not(.map-revealed) {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    left: -100vw !important;
    top: -100vh !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #map.map-revealed {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
}

/* Return-to-earth finale: 2s after landing, map fades to black then intro line fades in */
.return-blackout {
  position: fixed;
  inset: 0;
  background: var(--void-black);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity var(--transition-medium) ease-out;
}
.return-blackout.visible {
  opacity: 1;
}
body.return-complete .form-intro {
  opacity: 0;
}
body.return-complete .input-wrap,
body.return-complete #space-out-btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.return-finale .form-intro {
  opacity: 1;
}
body.return-finale .input-wrap,
body.return-finale #space-out-btn {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   CLOUD LAYER (build up just before flash; hidden when flash starts)
   ============================================ */

#cloud-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 28;
  overflow: hidden;
  transition: none;
}

#cloud-layer.cloud-layer-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#cloud-layer .cloud {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background-color: transparent;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.35) 25%,
    rgba(255, 255, 255, 0.2) 45%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 85%
  );
  filter: blur(35px);
  animation: cloudFloat 20s infinite ease-in-out;
  will-change: transform;
  /* Clip blur to ellipse so it doesn’t render as a rectangular box */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

#cloud-layer .cloud::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -40%;
  width: 180%;
  height: 180%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 100% at 35% 35%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    transparent 70%
  );
  filter: blur(28px);
}

#cloud-layer .cloud::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 100% at 65% 55%,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 75%
  );
  filter: blur(25px);
}

@keyframes cloudFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(10px, -15px) scale(1.05); }
  50% { transform: translate(-5px, -25px) scale(0.95); }
  75% { transform: translate(-10px, -10px) scale(1.02); }
}

/* ============================================
   FLASH OVERLAY (TV-style map → video transition)
   ============================================ */

#flash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
}

#flash-overlay.flash {
  animation: tvFlash 0.5s ease-out forwards;
}

@keyframes tvFlash {
  0%   { opacity: 1; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   SPACE VIDEO
   ============================================ */

#space-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  opacity: 0;
  z-index: 20;
  transition: opacity 2.5s ease-in-out;
  pointer-events: none;
}

/* Hide native video play overlay on mobile */
#space-video::-webkit-media-controls-start-playback-button,
#space-video::-webkit-media-controls-play-button {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#space-video::-webkit-media-controls {
  display: none !important;
}

#space-video.video-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

#space-video.video-ended {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

/* ============================================
   END FRAME (after video ends: dark + stars, rotating)
   ============================================ */

.end-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: #000000;
  z-index: 25;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in;
  overflow: hidden;
}

.end-frame.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* When end frame is visible (after video ends), hide the intro form so only end-screen messaging shows (fixes mobile overlap) */
body.end-frame-visible #form {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.end-frame-starfield {
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  left: 50%;
  top: 50%;
  margin-left: -100vmax;
  margin-top: -100vmax;
  animation: endFrameRotate 180s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.end-frame .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0.9;
}

.end-frame .star.star--dim {
  width: 1px;
  height: 1px;
  opacity: 0.5;
}

@keyframes endFrameRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.end-frame-ui {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: 10;
}

.end-frame.visible .end-frame-ui.buttons-visible {
  opacity: 1;
}

.end-frame-buttons {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.end-frame-btn {
  padding: 12px 24px;
  font-size: 16px;
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  cursor: pointer;
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
  transition: background var(--transition-fast) ease,
              color var(--transition-fast) ease,
              border-color var(--transition-fast) ease;
}

.end-frame-btn:hover {
  background: var(--white);
  color: var(--void-black);
  border-color: var(--white);
}

.end-frame-share-feedback {
  white-space: nowrap;
  display: none;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Source Code Pro', monospace;
  align-self: center;
}

.end-frame-share-feedback.visible {
  display: block;
}

.end-frame-credit {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Source Code Pro', monospace;
}

.end-frame-soundtrack {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Source Code Pro', monospace;
}

.end-frame-credit a,
.end-frame-soundtrack a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

.end-frame-credit a:hover,
.end-frame-soundtrack a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE DESIGN (mobile: portrait + landscape)
   ============================================ */

@media (max-width: 768px), (orientation: portrait) and (max-height: 700px), (orientation: landscape) and (max-height: 500px) {
  #form {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 400px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    margin: 0;
    box-sizing: border-box;
  }

  .form-intro {
    white-space: normal;
    font-size: 15px;
    margin-bottom: 12px;
    max-width: 100%;
    text-align: center;
  }

  .input-wrap {
    display: block;
    width: 100%;
    position: relative;
  }

  #location {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 12px 14px;
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
  }

  .location-hint {
    font-size: 14px;
    padding: 12px 14px;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
  }

  #space-out-btn {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .end-frame-ui {
    width: calc(100% - 48px);
    max-width: 360px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    box-sizing: border-box;
    text-align: center;
  }

  .end-frame-buttons {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .end-frame-btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .end-frame-share-feedback {
    position: static;
    margin-left: 0;
    margin-bottom: 8px;
    transform: none;
    top: auto;
  }

  .end-frame-credit {
    font-size: 12px;
    line-height: 1.5;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #location {
    font-size: 14px;
    padding: 10px 14px;
  }

  #space-out-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Reduce cloud blur on small screens to avoid glitches */
@media (max-width: 768px), (max-height: 600px) {
  #cloud-layer .cloud {
    filter: blur(24px);
  }

  #cloud-layer .cloud::before {
    filter: blur(18px);
  }

  #cloud-layer .cloud::after {
    filter: blur(16px);
  }
}

/* Very small portrait (e.g. small phones) */
@media (max-width: 380px) {
  .form-intro {
    font-size: 14px;
  }

  .end-frame-btn {
    padding: 12px 16px;
    font-size: 15px;
  }
}