/* ==================== LANDING PAGE STYLES ==================== */

/* PAGE FADE OVERLAY */
#page-fade{
  position:fixed;
  inset:0;
  background:#0b0f14;
  opacity:0;
  pointer-events:none;
  transition:opacity 250ms ease;
  z-index:999;
}

#page-fade.fade-out{
  opacity:1;
  pointer-events:all;
}

/* LOGO BREATHING */
@keyframes logo-breath {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(95, 208, 255, 0.42))
      drop-shadow(0 0 14px rgba(95, 208, 255, 0.16));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(95, 208, 255, 0.62))
      drop-shadow(0 0 20px rgba(95, 208, 255, 0.28))
      drop-shadow(0 0 32px rgba(95, 208, 255, 0.10));
  }
}

#logo-container svg.logo-breathing path{
  animation: logo-breath 5s ease-in-out infinite;
}

body{
  margin:0;
  font-family:system-ui;
  background:
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}


.wrapper{
  width:1200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

/* LOGO */
.logo-wrap{
  width:1200px;
}

#logo-container svg{
  width:100%;
}

#logo-container svg path.logo-glow-active{
  filter:
    drop-shadow(0 0 6px rgba(95, 208, 255, 0.45))
    drop-shadow(0 0 14px rgba(95, 208, 255, 0.18));
}

/* Logo glow animation - bright flash then settle (per-path) */
#logo-container svg path.box-morphing{
  filter:
    drop-shadow(0 0 10px rgba(127, 227, 255, 0.9))
    drop-shadow(0 0 20px rgba(95, 208, 255, 0.6))
    drop-shadow(0 0 30px rgba(95, 208, 255, 0.3)) !important;
  transition: filter 150ms ease-out;
}

#logo-container svg path.box-ready{
  filter:
    drop-shadow(0 0 8px rgba(95, 208, 255, 0.6))
    drop-shadow(0 0 16px rgba(95, 208, 255, 0.3)) !important;
  transition: filter 350ms ease-out;
}

/* SVG-level glow (not used for per-letter, but keep for reference) */
#logo-container svg.box-morphing{
  filter:
    drop-shadow(0 0 12px rgba(127, 227, 255, 0.8))
    drop-shadow(0 0 24px rgba(95, 208, 255, 0.5))
    drop-shadow(0 0 36px rgba(95, 208, 255, 0.25)) !important;
  transition: filter 150ms ease-out;
  /* Override common.css box-morphing border/box-shadow */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#logo-container svg.box-ready{
  filter:
    drop-shadow(0 0 6px rgba(95, 208, 255, 0.45))
    drop-shadow(0 0 14px rgba(95, 208, 255, 0.18)) !important;
  transition: filter 350ms ease-out;
  /* Override common.css box-ready border */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
  width:100%;
}

/* CARD */
.card{
  position:relative;
  border-radius:14px;
  background:transparent;
  overflow:visible;
  text-decoration:none;
  color:inherit;
  min-width:0;

  border: 1px solid transparent;

  backdrop-filter: blur(2px) saturate(1.2);
  -webkit-backdrop-filter: blur(2px) saturate(1.2);

  transform:translateY(20px);
  opacity:0;
}

.card.loaded{
  transform:translateY(0);
  opacity:1;
  transition:transform .6s ease, opacity .6s ease;
}

.card.card-complete {
  border-color: #5fd0ff;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(150, 215, 255, 0.06) 0%,
      rgba(110, 185, 235, 0.032) 60%,
      rgba(80, 150, 210, 0.018) 100%) !important;
}

/* INNER */
.card-inner{
  position:relative;
  padding:22px 26px;
  min-height:100px;
  height:100px;
  overflow:hidden;
  border-radius:13px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  /* energy glow transition */
  transition:filter .25s ease;
}

/* HOVER: energy bloom instead of scale */
.card:hover .card-inner{
  filter:
    drop-shadow(0 0 14px rgba(95,208,255,0.35))
    drop-shadow(0 0 40px rgba(95,208,255,0.18));
}

/* SVG BORDER — retired, border now handled via CSS on .card */

/* TEXT */
h2{
  margin:0 0 10px;
  position: relative;
  top: 6px;
  font-family: 'Orbitron', system-ui;
  font-size:26px;
  color: #0e1620;
  -webkit-text-stroke: 1.2px #5fd0ff;
  paint-order: stroke fill;
  white-space:nowrap;
  opacity:0;
  position: relative;

  transform:translateZ(0);
  backface-visibility:hidden;

  transition:color .2s ease, opacity .25s ease;
}

h2.title-flash svg path{
  stroke:#9ee8ff !important;
}

.card:hover h2{
  color:#0e1620;
}

span{
  font-family: 'Orbitron', system-ui;
  color: rgba(95,208,255,0.55);
  font-size:12px;
  letter-spacing: 0.04em;
  white-space:nowrap;
  opacity:0;

  text-shadow:0 0 4px rgba(95,208,255,0.08);

  transform:translateZ(0);
  backface-visibility:hidden;

  transition: opacity .35s ease, text-shadow .25s ease;
}

.card:hover span{
  text-shadow:
    0 0 6px rgba(95,208,255,0.30)
    0 0 12px rgba(95,208,255,0.12);
}

.card-text-visible h2,
.card-text-visible span{
  opacity:1;
}

/* Card title SVG (static Orbitron) */
.card h2 svg{
  max-width:100%;
  height:auto;
  display:block;
}

.card h2 svg path{
  transition: stroke .2s ease, filter .25s ease;
}

.card:hover h2 svg{
  filter:
    drop-shadow(0 0 6px rgba(95,208,255,0.55))
    drop-shadow(0 0 14px rgba(95,208,255,0.25));
}

.card:hover h2 svg path{
  stroke:#7ddeff;
}

.card h2.title-flash svg path{
  stroke:#9ee8ff;
}


/* ==================== MOBILE RESPONSIVE (≤768px) ==================== */
@media (max-width: 768px) {
  /* Apply background to html element to cover iOS overscroll/rubber-band areas */
  html {
    background: var(--bg2);
  }

  body {
    min-height: 100svh;
    height: auto;
  }

  .wrapper {
    width: 100%;
    max-width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
  }

  .logo-wrap {
    width: 100%;
    max-width: 100%;
  }

  #logo-container svg {
    max-width: 100%;
    height: auto;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    touch-action: manipulation;
  }
}


/* ==================== SMALL MOBILE (≤480px) ==================== */
@media (max-width: 480px) {
  .wrapper {
    padding: 16px 16px;
  }

  .card-inner {
    padding: 20px 16px;
  }
}