/*
 * Styles for Maaya Underground scroll‑driven landing page.
 *
 * The design features three phases: hero (title + countdown + big 22),
 * unlock (keypad hint), and invite (form + track). As you scroll,
 * elements fade and move to guide the user toward the secret unlock.
 */

/* Local fonts */
@font-face {
  font-family: 'DSDigi';
  src: url('DS-DIGII.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AkiraExpanded';
  src: url('akira-expanded.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Theme variables */
:root {
  --bg: #0a0a0f;
  --fg: #ffffff;
  --muted: #9aa3b2;
  --soft: #141824;
  --accent: #2b3354;
  --border-radius: 12px;
}

/* Utility class to hide elements */
.hidden {
  display: none !important;
}

/* Global resets */
html, body {
  margin: 0;
  padding: 0;
  /* Use min-height instead of height so content taller than viewport can scroll */
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'AkiraExpanded', system-ui, sans-serif;
  touch-action: manipulation;
  overflow-x: hidden;
}

/* Stage container spanning multiple viewport heights */
#stage {
  /* The stage height defines how far the user must scroll to transition from
     the hero to the unlock section. A shorter height improves discoverability
     on desktop while still allowing smooth scroll animations. */
  height: 200vh;
  position: relative;
}

/* Sticky sections fill the viewport */
section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0 20px;
}

/* Header logo (appears when big 22 moves upward) */
#headerLogo {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* Size for the logo in the fixed header */
#headerLogo img {
  width: 48px;
  height: auto;
  display: block;
}

/* Title styling */
.title .maaya {
  display: block;
  font-size: clamp(48px, 9vw, 120px);
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.title .underground {
  display: block;
  font-size: clamp(18px, 4vw, 36px);
  letter-spacing: 0.38em;
  margin-top: 6px;
}

/* Countdown container and segments */
.countdown {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 18px 0 36px;
  opacity: 0;
}
.segment {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.number {
  font-family: 'DSDigi', monospace;
  font-size: clamp(42px, 9vw, 120px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--fg);
  /* very slight glow – reduced further per user feedback */
  text-shadow: 0 0 2px rgba(255,255,255,0.03);
}
.label {
  font-family: 'AkiraExpanded', sans-serif;
  text-transform: uppercase;
  font-size: clamp(10px, 2vw, 12px);
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-top: 6px;
}

/* Container for the big 22 logo that moves upward */
.logo22-large {
  /* center the logo image */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
  margin-top: 30px;
}
/* Big 22 logo image sizing */
.logo22-large img {
  width: clamp(80px, 20vw, 160px);
  height: auto;
}

/* Scroll-down indicator */
.scroll-down {
  margin-top: 24px;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
  animation: bounce 2s infinite;
}
.scroll-down:hover {
  color: var(--fg);
}
.scroll-down .arrow {
  display: inline-block;
  line-height: 1;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}

/* Unlock section layout */
#unlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity .6s ease;
}

/* 3-col grid for 1–6; 0 is centered on its own row */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-auto-rows: 64px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  animation: keypadFade .6s ease forwards;
}

@keyframes keypadFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Center the 0 key on the third row */
.keypad .zero {
  grid-column: 2; /* puts it in the middle column */
}

/* Grey button styling */
.keypad .key {
  background: #3b3b3b;             /* medium grey */
  color: #ffffff;
  border: 1px solid #4a4a4a;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 700;
  touch-action: manipulation;       /* helps prevent double-tap zoom */
  outline: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}

.keypad .key:hover {
  background: #4a4a4a;             /* slightly lighter on hover */
  border-color: #5a5a5a;
}

.keypad .key:active {
  transform: translateY(1px) scale(0.99);
}

/* Smaller keys on small screens */
@media (max-width: 600px) {
  .keypad {
    grid-template-columns: repeat(3, 56px);
    grid-auto-rows: 56px;
    gap: 10px;
  }
  .keypad .key {
    border-radius: 12px;
    font-size: 20px;
  }
}

/* Riddle pinned visually at the bottom of the unlock block */
.riddle {
  margin: 4px 0 0 0;
  color: #9aa3b2;             /* muted grey */
  font-size: 12px;
  letter-spacing: .12em;
  text-align: center;
  max-width: 84vw;
}

/* Welcome overlay */
.welcome-message {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  color: var(--fg);
  font-family: 'DSDigi', monospace;
  font-size: clamp(34px, 9vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Invite panel hidden until unlocked */
.panel.hidden {
  display: none;
}
#invitePanel {
  background: linear-gradient(180deg, rgba(12,16,28,0.8), rgba(10,12,20,0.96));
  padding: 26px 18px 90px;
  box-sizing: border-box;
  /* Start hidden and fade in when unlocked */
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Countdown displayed at bottom of invite and songs pages */
.countdown-bottom {
  opacity: 1 !important;
  margin-top: 24px;
}
.invite-form {
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-form .lead {
  color: var(--muted);
  line-height: 1.5;
}
#igHandle {
  background: var(--soft);
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'AkiraExpanded';
}
.btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--fg);
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'AkiraExpanded';
  transition: background 0.2s;
}
.btn:hover {
  background: #131b32;
}
.btn.ghost {
  background: transparent;
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.vault {
  width: min(520px, 92vw);
  margin-top: 18px;
  border: 1px solid #20305f;
  padding: 14px;
  border-radius: 14px;
  background: #0b1022;
}
.vault-lead {
  color: var(--muted);
  margin: 0 0 8px;
  font-style: italic;
}
.logo22-bottom {
  margin-top: 28px;
  text-align: center;
}
/* bottom 22 logo image */
.logo22-bottom img {
  width: 40px;
  height: auto;
  display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  /* Responsive adjustments for the keypad are defined above with grid layout */
}