/* Calypso HTML main menu — ported from design/main-menu (Calypso Main Menu v2.dc.html).
   Vanilla CSS recreation of the design-composer prototype. Behaviour in menu.js.
   Background is our looping clip (menu-bg-loop.mp4); the CSS water-bubbles from the
   prototype are intentionally dropped (the bubbles live in the video). */

:root { --acc: #74ffb0; }

#main-menu {
  position: fixed; inset: 0; z-index: 9000;
  overflow: hidden;
  background: #03090d;        /* always-opaque dark backdrop — covers canvas from page load */
  color: #cfe9e0;
  font-family: 'Chakra Petch', sans-serif;
  pointer-events: none;       /* non-interactive until .visible */
}
/* Fade visual content in/out independently; audio elements are unaffected. */
#main-menu > *:not(audio) { opacity: 0; transition: opacity 0.6s ease; }
#main-menu.visible { pointer-events: auto; }
#main-menu.visible > *:not(audio) { opacity: 1; }
/* When fully dismissed (game running), remove from layout so canvas is fully accessible. */
#main-menu[hidden] { display: none !important; }

/* ---- background video (replaces the prototype's gradient placeholder + badge) ---- */
#menu-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #03090d;
}

/* ---- atmospheric FX overlays (kept from the design), layered over the video ---- */
.cax-fx { position: absolute; pointer-events: none; }
.cax-drift1   { inset: -22%; background: radial-gradient(42% 42% at 28% 34%, rgba(58,205,150,0.18), transparent 70%); filter: blur(46px); animation: cax-drift1 24s ease-in-out infinite; }
.cax-drift2   { inset: -22%; background: radial-gradient(46% 46% at 72% 64%, rgba(46,150,205,0.14), transparent 70%); filter: blur(54px); animation: cax-drift2 30s ease-in-out infinite; }
.cax-stripes  { inset: 0; background: repeating-linear-gradient(45deg, rgba(116,255,176,0.035) 0 2px, transparent 2px 28px); }
.cax-vignette { inset: 0; background: radial-gradient(120% 100% at 42% 46%, transparent 38%, rgba(2,7,10,0.9) 100%); animation: cax-breathe 9s ease-in-out infinite; }
.cax-scanlines{ inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: .45; }
.cax-scan     { left: 0; right: 0; height: 140px; background: linear-gradient(180deg, transparent, rgba(116,255,176,0.05), transparent); animation: cax-scan 11s linear infinite; }

@keyframes cax-drift1 { 0%{transform:translate(-6%,-4%) scale(1.25)} 50%{transform:translate(6%,4%) scale(1.4)}  100%{transform:translate(-6%,-4%) scale(1.25)} }
@keyframes cax-drift2 { 0%{transform:translate(5%,3%) scale(1.3)}   50%{transform:translate(-5%,-3%) scale(1.45)} 100%{transform:translate(5%,3%) scale(1.3)} }
@keyframes cax-breathe{ 0%,100%{opacity:.74} 50%{opacity:.94} }
@keyframes cax-scan   { 0%{transform:translateY(-100%)} 100%{transform:translateY(1100px)} }

/* ---- HUD corner brackets ---- */
.cax-corner { position: absolute; width: 34px; height: 34px; }
.cax-corner.tl { top: 38px; left: 38px;  border-left: 2px solid rgba(116,255,176,0.5); border-top: 2px solid rgba(116,255,176,0.5); }
.cax-corner.tr { top: 38px; right: 38px; border-right:2px solid rgba(116,255,176,0.5); border-top: 2px solid rgba(116,255,176,0.5); }
.cax-corner.bl { bottom: 38px; left: 38px;  border-left: 2px solid rgba(116,255,176,0.5); border-bottom: 2px solid rgba(116,255,176,0.5); }
.cax-corner.br { bottom: 38px; right: 38px; border-right:2px solid rgba(116,255,176,0.5); border-bottom: 2px solid rgba(116,255,176,0.5); }

/* ---- logo + tagline ---- */
.cax-logo-wrap { position: absolute; top: 13vh; left: 6.5vw; }
.cax-logo {
  font-family: 'Saira Condensed', sans-serif; font-weight: 700;
  font-size: clamp(72px, 8.5vw, 150px); letter-spacing: .04em; line-height: .8;
  color: #e8fff5; text-transform: uppercase;
  text-shadow: 0 0 32px rgba(116,255,176,0.4), 0 0 7px rgba(116,255,176,0.55);
}
.cax-tag-row  { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.cax-tag-line { height: 1px; width: 58px; background: var(--acc, #74ffb0); opacity: .75; }
.cax-tag {
  font-family: 'Chakra Petch', sans-serif; font-weight: 500;
  font-size: clamp(14px, 1.25vw, 21px); letter-spacing: .46em;
  text-transform: uppercase; color: var(--acc, #74ffb0); padding-left: .46em;
}

/* ---- menu list ---- */
.cax-menu { position: absolute; left: 6.5vw; bottom: 11vh; display: flex; flex-direction: column; gap: 9px; width: min(480px, 34vw); }
.cax-item {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 11px 20px;
  cursor: pointer; color: #cfe9e0;
  border: 1px solid rgba(116,255,176,0.12); border-left: 3px solid rgba(116,255,176,0.4);
  background: linear-gradient(90deg, rgba(10,28,32,0.5), rgba(8,20,26,0.08)); backdrop-filter: blur(2px);
  transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
}
.cax-item:hover, .cax-item:focus-visible {
  transform: translateX(14px); outline: none;
  border-left-color: var(--acc, #74ffb0); border-color: rgba(116,255,176,0.45);
  background: linear-gradient(90deg, rgba(20,56,47,0.9), rgba(10,28,32,0.15));
  box-shadow: 0 0 30px rgba(116,255,176,0.18), inset 0 0 26px rgba(116,255,176,0.06);
  color: #eafff6;
}
.cax-item-n     { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--acc, #74ffb0); opacity: .85; min-width: 22px; }
.cax-item-text  { display: flex; flex-direction: column; gap: 2px; }
.cax-item-label { font-family: 'Saira Condensed', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: inherit; }
.cax-item-sub   { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: .12em; color: #6f8a84; text-transform: uppercase; }
.cax-item-chev  { margin-left: auto; color: var(--acc, #74ffb0); opacity: .55; font-size: 20px; font-family: 'Saira Condensed', sans-serif; }

/* ---- right depth ticks ---- */
.cax-depth { position: absolute; right: 84px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 13px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: rgba(116,255,176,0.4); letter-spacing: .1em; }
.cax-depth > span { display: flex; align-items: center; gap: 10px; }
.cax-depth .cur   { color: var(--acc, #74ffb0); }
.cax-depth .abyss { color: #5b756e; }
.cax-tick       { width: 18px; height: 1px; background: rgba(116,255,176,0.4); }
.cax-tick.w-cur { width: 34px; height: 2px; background: var(--acc, #74ffb0); }
.cax-tick.w-aby { width: 34px; background: rgba(116,255,176,0.25); }

/* ---- version ---- */
.cax-version { position: absolute; left: 6.5vw; bottom: 56px; font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: .18em; color: #5b756e; }

/* ---- sound toggle (item 5) ---- */
#cax-sound-btn {
  position: absolute; bottom: 28px; right: 6.5vw;
  background: transparent;
  border: 1px solid rgba(116,255,176,0.2);
  color: #5b756e;
  font-family: 'Share Tech Mono', monospace; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
#cax-sound-btn:hover { color: var(--acc, #74ffb0); border-color: rgba(116,255,176,0.45); }

/* ---- intro launch gate button (item 2) ---- */
#intro-launch-btn {
  display: none;        /* revealed by inline script; hidden in harness mode */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 18px 52px;
  background: linear-gradient(90deg, rgba(10,28,32,0.88), rgba(8,20,26,0.5));
  border: 1px solid rgba(116,255,176,0.3);
  border-left: 3px solid rgba(116,255,176,0.65);
  color: #e8fff5;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600;
  font-size: clamp(16px, 2.2vw, 26px); letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s, opacity 0.4s ease;
}
#intro-launch-btn:hover {
  border-left-color: #74ffb0; border-color: rgba(116,255,176,0.55);
  box-shadow: 0 0 50px rgba(116,255,176,0.22), inset 0 0 20px rgba(116,255,176,0.07);
  transform: translate(-50%, -50%) translateX(8px);
}
/* Click → the button dissolves first, then the intro video fades up (index.html). */
#intro-launch-btn.leaving { opacity: 0; pointer-events: none; }