/* Teaser page: one screen, three states (set on <html data-state>). */

html[data-state="mystery"] [data-show]:not([data-show~="mystery"]),
html[data-state="revealed"] [data-show]:not([data-show~="revealed"]),
html[data-state="open"] [data-show]:not([data-show~="open"]) {
  display: none !important;
}

body { min-height: 100svh; overflow-x: hidden; }

/* Backgrounds */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.bg-fog { background: var(--abyss) url("/assets/video/countdown-poster.webp") center / cover no-repeat; }
.fog-video { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bg-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(6, 34, 46, 0.05), rgba(6, 34, 46, 0.45));
}

.bg-tank { display: none; background: var(--tank); }
html:not([data-state="mystery"]) .bg-tank { display: block; }
html:not([data-state="mystery"]) .bg-fog { display: none; }
.bg-tank::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(6, 34, 46, 0.55), rgba(6, 34, 46, 0) 70%),
    linear-gradient(rgba(6, 34, 46, 0.1), rgba(6, 34, 46, 0.35)),
    url("/assets/img/tank-lights-on-sm.webp") 50% 100% / cover no-repeat;
}
@media (min-width: 900px) {
  .bg-tank::before {
    background:
      radial-gradient(ellipse 45% 45% at 50% 52%, rgba(6, 34, 46, 0.55), rgba(6, 34, 46, 0) 70%),
      linear-gradient(rgba(6, 34, 46, 0.1), rgba(6, 34, 46, 0.35)),
      url("/assets/img/tank-lights-on.webp") 50% 100% / cover no-repeat;
  }
}

/* The swarm: the one place the page spends its motion */
.swarm { position: absolute; inset: 0; }

.shrimp {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--w);
  height: var(--w);
  opacity: var(--o, 1);
  animation: swim-right var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.shrimp.to-left { animation-name: swim-left; }
.shrimp i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/assets/img/swarm.webp") 0 0 / 300% 100% no-repeat;
  transform: scaleX(var(--flip, 1));
  animation:
    kick var(--kick, 0.45s) steps(3) infinite,
    bob var(--bob, 3.2s) ease-in-out infinite alternate;
}
.shrimp.still { animation: none; transform: translateX(var(--x)); }
.shrimp.still i { animation: none; }

@keyframes swim-right { from { transform: translateX(-25vw); } to { transform: translateX(110vw); } }
@keyframes swim-left  { from { transform: translateX(110vw); } to { transform: translateX(-25vw); } }
@keyframes kick { to { background-position: 150% 0; } }
@keyframes bob {
  from { transform: scaleX(var(--flip, 1)) translateY(-6px) rotate(-3deg); }
  to   { transform: scaleX(var(--flip, 1)) translateY(6px) rotate(3deg); }
}

.bubble {
  position: absolute;
  bottom: -24px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border: 2px solid var(--glow);
  border-radius: 50%;
  opacity: 0.55;
  animation: rise var(--dur) linear var(--delay) infinite;
}
@keyframes rise {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10px, -55vh); }
  100% { transform: translate(-4px, -110vh); }
}

/* Centre column */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: max(2.5rem, env(safe-area-inset-top)) 16px max(4.5rem, calc(env(safe-area-inset-bottom) + 4rem));
  text-align: center;
}
.stage > * { margin: 0; }

.pearl {
  width: clamp(76px, 22vw, 116px);
  height: auto;
  border-radius: 50%;
  margin-bottom: 0.6rem;
  animation: pearl-pulse 4.5s ease-in-out infinite alternate;
}
@keyframes pearl-pulse {
  from { transform: scale(0.97); filter: drop-shadow(0 0 10px rgba(241, 235, 255, 0.35)) drop-shadow(0 0 28px rgba(217, 245, 242, 0.15)); }
  to   { transform: scale(1.03); filter: drop-shadow(0 0 18px rgba(241, 235, 255, 0.7)) drop-shadow(0 0 56px rgba(255, 228, 238, 0.35)); }
}

.logo img { width: min(62vw, 300px); height: auto; filter: drop-shadow(4px 4px 0 var(--deep)); }

.count-label {
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: -0.6rem !important;
}

.countdown {
  font-family: var(--display);
  font-weight: 400;
  color: var(--buoy);
  font-size: clamp(2.6rem, 12.5vw, 6.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 3px 3px 0 var(--deep);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  gap: 0.22em;
}
.cd-part { display: inline-flex; align-items: baseline; }
.countdown .n {
  display: inline-block;
  min-width: calc(var(--dg, 2) * 1ch);
  text-align: center;
}
.countdown .u { font-size: 0.48em; margin-left: 0.03em; }
html[data-state="mystery"] .countdown { font-size: clamp(2.6rem, 12.5vw, 6rem); }
.countdown.done .cd-part { display: none; }

.line {
  max-width: 32ch;
  text-wrap: balance;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  line-height: 1.45;
}
html[data-state="mystery"] .line { opacity: 0.7; }
html:not([data-state="mystery"]) .line { font-weight: 500; text-shadow: 0 1px 12px rgba(6, 34, 46, 0.9); }

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  width: min(100%, 20rem);
  margin-top: 0.4rem !important;
}
@media (min-width: 560px) {
  .actions { flex-direction: row; width: auto; }
}

.claimed { font-size: 0.95rem; margin-top: 0.3rem !important; text-shadow: 0 1px 10px rgba(6, 34, 46, 0.9); }
.claimed[hidden] { display: none; }
.claimed .num {
  font-family: var(--display);
  color: var(--buoy);
  font-size: 1.35em;
  margin-right: 0.12em;
  text-shadow: 2px 2px 0 var(--deep);
}

.safety { margin-top: 1.6rem !important; max-width: 21rem; }
.safety .receipt { margin: 0; font-size: 0.95rem; line-height: 1.4; text-align: left; }
.safety .receipt-num { font-size: 1.6em; margin-right: 0.15em; vertical-align: -0.06em; }

.x-corner {
  position: fixed;
  z-index: 2;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--foam);
  opacity: 0.75;
}
.x-corner:hover { color: var(--foam); opacity: 1; }
.x-corner svg { width: 20px; height: 20px; }

/* ?net=testnet marker */
.net-badge {
  position: fixed;
  z-index: 2;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 92px);
  padding: 6px 12px;
  border: var(--outline) solid var(--deep);
  border-radius: 999px;
  background: var(--buoy);
  color: var(--abyss);
  font: 700 13px/1.2 var(--body);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: var(--shadow);
}