/* ============================================================
   HONICIAN — pre-launch landing page
   Plain CSS. No frameworks, no external fonts, no CDN.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #050B1F;
  overflow-x: hidden;            /* creatures travel to 130vw */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #DCE6FF;
  /* IMPORTANT: no transform / filter / opacity / will-change here,
     otherwise the fixed creature layer would be trapped. */
}

/* Visually-hidden but readable by machines */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- STAGES ---------- */
main { display: block; }

.stage {
  position: relative;
  isolation: isolate;            /* each stage is its OWN stacking context */
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;              /* clip creatures cleanly to the stage edges */
}

.stage .bg {
  display: block;                /* kills inline baseline gap */
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* ---------- SECTION 1 : MASCOT ---------- */
.mascot {
  position: absolute;
  left: 49.6%;
  top: 46%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: auto;
  z-index: 3;                    /* above the creature layer */
  pointer-events: none;
  /* mascot_v2 has a real alpha channel: no mask, no frame, no panel, no filter,
     and NO mix-blend-mode (screen blend was making the dark eyes see-through). */
}

/* Dome / phone occlusion by CLIPPING the creature layer (not by covering it).
   The tank is clipped so its central region — where the glass dome (hero) and
   the gameplay phone (moment) sit — is cut out. Fish pixels there are simply
   never rasterised, so NO z-index/GPU-compositing quirk can ever make a fish
   appear in front of the dome, the octopus or the gameplay burst. The polygon
   uses the "seam" technique (opposite windings) to punch a rectangular hole. */
/* Il buco nel layer delle creature NON ha piu' lo spigolo vivo. Col clip-path
   il pesce veniva TAGLIATO da una riga dritta invisibile appena entrava nella
   zona della cupola (segnalato da Ivan, 27/07). Ora e' una MASCHERA sfumata:
   il pesce si dissolve entrando dietro la cupola e riappare dall'altro lato.
   Due gradienti in UNIONE (`add`): nascosto solo dove ENTRAMBI sono
   trasparenti, cioe' il rettangolo centrale. Le percentuali di fine sfumatura
   sono centrate sui bordi MISURATI dell'arte: cupola x 30%/70%, y 19%/92%
   (montanti neon misurati a pixel su bg_hero.jpg); telefono x 54%/74%, y 8%/80%. */
.tank-hero {
  -webkit-mask-image:
    linear-gradient(to right,  #000 0 26%, transparent 34% 66%, #000 74% 100%),
    linear-gradient(to bottom, #000 0 15%, transparent 23% 88%, #000 96% 100%);
  mask-image:
    linear-gradient(to right,  #000 0 26%, transparent 34% 66%, #000 74% 100%),
    linear-gradient(to bottom, #000 0 15%, transparent 23% 88%, #000 96% 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.tank-moment {
  -webkit-mask-image:
    linear-gradient(to right,  #000 0 50%, transparent 58% 70%, #000 78% 100%),
    linear-gradient(to bottom, #000 0 4%,  transparent 12% 76%, #000 84% 100%);
  mask-image:
    linear-gradient(to right,  #000 0 50%, transparent 58% 70%, #000 78% 100%),
    linear-gradient(to bottom, #000 0 4%,  transparent 12% 76%, #000 84% 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* ---------- SECTION 2 : GAMEPLAY VIDEO ON PODIUM ---------- */
.demo-frame {
  position: absolute;
  left: 70.8%;
  top: 72%;
  transform: translate(-50%, -100%);   /* bottom edge sits on the podium at 72% */
  height: 60%;
  aspect-ratio: 720 / 1568;
  z-index: 2;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  /* soft neon rim so it reads as a lit screen */
  box-shadow:
    0 0 0 1.5px rgba(120, 220, 255, 0.35),
    0 0 22px rgba(46, 196, 255, 0.45),
    0 0 60px rgba(46, 196, 255, 0.20);
}
.demo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* show the portrait clip whole, never crop */
}

/* ---------- TANK : per-section creature layer (inside each stage) ----------
   Because it lives inside the stage's isolated stacking context, the paint
   order background(0) < creatures(1) < dome-glass(2) < mascot/demo(3) is
   guaranteed by the browser and cannot be broken by GPU layer promotion. */
.tank {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.trav {
  position: absolute;
  left: 0;
  top: var(--top, 40%);
  will-change: transform;
}
.trav .creature {
  display: block;
  width: var(--size, 120px);
  height: auto;
  opacity: var(--op, 0.75);
  will-change: transform;
}
.no-alpha video.creature { mix-blend-mode: screen; }

/* Fish: wrapper crosses horizontally, video bobs */
.trav.fish {
  animation-name: cross;
  animation-duration: var(--dur, 30s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay, 0s);
}
.trav.fish .creature {
  animation-name: bob;
  animation-duration: var(--bobdur, 4s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes cross {
  from { transform: translateX(var(--from, -30vw)); }
  to   { transform: translateX(var(--to, 130vw)); }
}
@keyframes bob {
  0%, 100% { transform: translateY(calc(var(--bob, 14px) * -1)) scaleX(var(--flip, 1)); }
  50%      { transform: translateY(var(--bob, 14px)) scaleX(var(--flip, 1)); }
}

/* Jellyfish: wrapper rises, video sways + pulses */
.trav.jelly {
  animation-name: rise;
  animation-duration: var(--dur, 36s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay, 0s);
}
.trav.jelly .creature {
  animation-name: sway;
  animation-duration: var(--bobdur, 7s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes rise {
  from { transform: translateY(115vh); }
  to   { transform: translateY(-25vh); }
}
@keyframes sway {
  0%, 100% { transform: translateX(calc(var(--amp, 28px) * -1)) scale(0.96); }
  50%      { transform: translateX(var(--amp, 28px)) scale(1.04); }
}

/* ---------- SOUND TOGGLE ---------- */
.sound-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(120, 220, 255, 0.45);
  background: rgba(6, 14, 34, 0.66);
  backdrop-filter: blur(8px);
  color: #DCE6FF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(46, 196, 255, 0.28);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.sound-toggle:hover { background: rgba(10, 22, 50, 0.85); box-shadow: 0 0 22px rgba(46, 196, 255, 0.5); }
.sound-toggle:active { transform: scale(0.96); }
.sound-toggle:focus-visible { outline: 2px solid #6fe3ff; outline-offset: 3px; }

.sound-toggle .spk { color: #6fe3ff; }
.spk-body { fill: currentColor; }
.spk-waves path, .spk-mute line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.spk-mute { display: none; }

/* muted state */
.sound-toggle.is-off { border-color: rgba(150, 170, 210, 0.35); box-shadow: none; }
.sound-toggle.is-off .spk { color: #8fa2c9; }
.sound-toggle.is-off .spk-waves { display: none; }
.sound-toggle.is-off .spk-mute { display: block; }

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #050B1F;
  color: #DCE6FF;
  font-size: 14px;
}
.footer a {
  color: #DCE6FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 230, 255, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer a:hover { color: #6fe3ff; border-color: #6fe3ff; }
.footer .dot, .footer .handle { opacity: 0.85; }
.foot-right { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- MOBILE (<700px) ---------- */
@media (max-width: 699px) {
  .sound-toggle { padding: 10px; gap: 0; }
  .sound-toggle .sound-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .tank { display: none; }
  .trav.fish, .trav.jelly, .trav .creature { animation: none !important; }
}

/* ---------- CTA HERO --------------------------------------------------------
   Pill REALE in HTML sopra quella DIPINTA dentro bg_hero.jpg.
   VERIFICATO il 28/07/2026 rimisurando l'immagine reale (bg_hero.jpg, 1920x1080,
   header JPEG SOF letto dal file):
     pill dipinta   x 715..1211   y 857..924
     testo bianco   x 755..1165   y 885..896
   I valori qui sotto la coprono con ~4 px di margine per lato:
     left 37.0% -> x 710.4   right 63.3% -> x 1215.4
     top  78.9% -> y 852.1   bottom 86.1% -> y 929.9
   Le percentuali valgono a OGNI risoluzione: .stage e' aspect-ratio 16/9 (r.41)
   e bg_hero.jpg e' 16:9, quindi object-fit:cover (r.49) non ritaglia nulla.
   Il fondo e' QUASI OPACO perche' deve COPRIRE il testo "COMING SOON" dipinto sotto.
   Font: stack di sistema del sito (r.16), NON Poppins (quello era solo il mockup).
   Il 15 agosto basta cambiare il testo dentro <span> in PLAY NOW ON GOOGLE PLAY.
   -------------------------------------------------------------------------- */
.cta-play {
  position: absolute;
  left: 37.0%; width: 26.3%;
  top: 78.9%;  height: 7.2%;
  z-index: 4;                      /* sopra mascotte (z 3), tank e bg */
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(5,17,36,.99);
  border: 2px solid rgba(94,236,255,.94);
  box-shadow: 0 0 22px 3px rgba(94,236,255,.35);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cta-play span {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #fff; font-weight: 700; letter-spacing: .14em;
  font-size: clamp(9px, 1.10vw, 21px); white-space: nowrap;
}
.cta-play:focus-visible { outline: 3px solid #6ff; outline-offset: 3px; }
@media (hover:hover){ .cta-play:hover{ box-shadow: 0 0 30px 6px rgba(94,236,255,.55); } }

/* CTA HERO - schermi stretti.
   VERIFICATO il 28/07/2026 con rendering reale (Chromium headless, viewport 390x844):
   con i soli valori proporzionali la pill misurava 102,6 x 15,8 px e il testo
   "PRE-REGISTER ON GOOGLE PLAY" ne misurava 185,2 px, cioe' il 180,6%: DEBORDAVA.
   Misure a 1920x1080 (OK): pill 505,0 x 77,8 px, testo 432,2 px = 85,6%.
   Sotto ~860px la pill viene allargata e continua a COPRIRE per intero quella
   dipinta (dipinta: x 37,2%-63,1%, y 79,3%-85,6% - rimisurata su bg_hero.jpg il 28/07).
   top/height NON si alzano oltre il 78%: VERIFICATO a 390x844 che con top 73%
   la pill copriva la riga dipinta "Now you're thinking.". */
@media (max-width: 860px) {
  .cta-play      { left: 21%; width: 58%; top: 78%; height: 12%; }
  .cta-play span { font-size: clamp(9px, 2.2vw, 18px); letter-spacing: .10em; }
}