/* Sky Duo — Coming soon. Colors taken from the app's splash video. */
:root {
  --navy: #04123a;
  --navy-deep: #020a2a;
  --cyan: #58fafd;
  --ink: #ffffff;
  --ink-soft: #cfe8ff;
  --ink-muted: #a9c6f0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy);
  color: var(--ink);
  font-family: 'Outfit', system-ui, 'Noto Sans', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #9fe9ff; }
a:hover { color: #ffffff; }

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vmin, 64px) max(16px, env(safe-area-inset-right)) clamp(24px, 5vmin, 64px) max(16px, env(safe-area-inset-left));
}

.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 58%,
    rgba(3, 12, 44, 0.78) 0%, rgba(3, 12, 44, 0.45) 55%, rgba(2, 8, 30, 0.2) 100%);
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.6vmin, 26px);
  text-align: center;
}

.icon-wrap {
  position: relative;
  width: clamp(84px, 22vmin, 200px);
  height: clamp(84px, 22vmin, 200px);
}
.ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 2px solid rgba(88, 250, 253, 0.75);
  box-shadow: 0 0 28px rgba(88, 250, 253, 0.55), inset 0 0 22px rgba(88, 250, 253, 0.35);
  animation: pulse 4.5s ease-in-out infinite;
}
.icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22.5%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(34, 211, 230, 0.35);
  animation: float 6s ease-in-out infinite;
}

.title {
  margin: 0;
  font-size: clamp(36px, 8.5vmin, 76px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.subtitle {
  margin: 0;
  font-size: clamp(15px, 2.4vmin, 21px);
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* All lines share one grid cell, so the block keeps the height of the tallest
   and nothing below it jumps as the language changes. */
.stack { width: 100%; display: grid; }
.stack > * { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.stack > .is-active { opacity: 1; transform: none; }
.stack-text { margin-top: clamp(4px, 1.6vmin, 16px); }
.line {
  align-self: center;
  font-size: clamp(22px, 4.6vmin, 42px);
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 2px 18px rgba(4, 18, 58, 0.9);
  transform: translateY(14px);
}
.line.is-before { transform: translateY(-14px); }
.name {
  font-size: clamp(12px, 1.7vmin, 14px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.controls[hidden] { display: none; }
.dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(207, 232, 255, 0.35);
  transition: width .4s ease, background .4s ease;
}
.dot.is-active { width: 18px; background: var(--cyan); }

.toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(88, 250, 253, 0.55);
  background: rgba(4, 18, 58, 0.55);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.toggle:hover { background: rgba(88, 250, 253, 0.16); }
.toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.toggle .ico-play { display: none; }
.toggle[aria-pressed="true"] .ico-play { display: block; }
.toggle[aria-pressed="true"] .ico-pause { display: none; }

.footer {
  position: relative;
  z-index: 1;
  margin: clamp(20px, 5vmin, 56px) 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

.band { animation: drift 14s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: .45; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 12px); } }

@media (prefers-reduced-motion: reduce) {
  .ring, .icon, .band { animation: none; }
  .stack > * { transition: none; }
}