/* KROMIA — pagina "coming soon"
   Concetto: si parte dal grigio, KROMÌ al centro salta, un'esplosione di vernice accende i colori,
   poi KROMÌ saluta e indica il fumetto. */

:root {
  --ink: #050506;          /* fondo: nero, con sfumature carbone (vedi body::before) */
  --grey: #3b3a42;         /* il "grigio" prima dell'esplosione */
  --paper: #fff7ec;        /* testo */
  --red: #f0262e;
  --yellow: #ffd21f;
  --orange: #ff7a1a;
  --blue: #1f5bff;
  --magenta: #ff2e93;
  --cyan: #19d3e6;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kromi-h: min(48svh, 470px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 1.2s ease;
}

body.is-grey { background: var(--ink); }  /* si parte già dal nero: solo KROMÌ è spento */

/* Fondo scuro a sfumature di nero: carbone al centro, nero pieno ai bordi, grana leggera.
   Sta su un livello a parte perché un gradiente non si può animare: compare in dissolvenza. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 34%, #26252b 0%, rgba(38, 37, 43, 0) 70%),
    radial-gradient(ellipse 45% 40% at 82% 88%, #1b1b1f 0%, rgba(27, 27, 31, 0) 70%),
    radial-gradient(ellipse 40% 45% at 10% 75%, #161619 0%, rgba(22, 22, 25, 0) 70%),
    linear-gradient(180deg, #0d0d0f 0%, #050506 60%, #000 100%);
  opacity: 1;
  transition: opacity 1.2s ease;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------- Tele ---------- */
.canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#base { z-index: 0; }
#paint { z-index: 0; }
#fx { z-index: 3; }

/* ---------- Palco ---------- */
.stage {
  position: relative;
  z-index: 2;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  cursor: crosshair;
}
/* Cursore: nell'attesa tutta la pagina è un pulsante (manina);
   dopo, sulla vernice c'è il mirino per lanciare colore, sui testi la freccia normale */
.is-grey .stage, .is-grey .stage * { cursor: pointer; }
.is-lit .hero { pointer-events: auto; cursor: default; }
.stage.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); }
  40%, 60% { transform: translate(7px, -3px); }
}

/* ---------- Centro: emblema e scritta ---------- */
.hero {
  position: absolute;
  inset: 0 0 auto 0;
  padding: clamp(28px, 7svh, 72px) 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  isolation: isolate;
}
/* Alone scuro dietro ai testi: la vernice resta viva, ma le parole si leggono sempre */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(900px, 120vw);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 46% at 50% 52%, rgba(5, 5, 6, .72), rgba(5, 5, 6, 0) 100%);
  opacity: 0;
  transition: opacity 1.2s ease .8s;
}
.is-lit .hero::before { opacity: 1; }

/* Logo: nell'attesa c'è già, spento in grigio; al tocco si accende con un "pop" e prende colore e alone */
.emblem {
  width: clamp(110px, 15vw, 220px);
  height: auto;
  opacity: .62;
  filter: grayscale(1) brightness(1.1) drop-shadow(0 0 40px rgba(255, 46, 147, 0)) drop-shadow(0 0 90px rgba(31, 91, 255, 0));
}
.is-lit .emblem {
  opacity: 1;
  filter: grayscale(0) brightness(1) drop-shadow(0 0 40px rgba(255, 46, 147, .35)) drop-shadow(0 0 90px rgba(31, 91, 255, .25));
  animation:
    emblem-light 1s cubic-bezier(.2, 1.6, .4, 1) forwards,
    emblem-float 6s ease-in-out 1.2s infinite;
}
@keyframes emblem-light {
  0% {
    transform: scale(1) rotate(0); opacity: .62;
    filter: grayscale(1) brightness(1.1) drop-shadow(0 0 40px rgba(255, 46, 147, 0)) drop-shadow(0 0 90px rgba(31, 91, 255, 0));
  }
  35% { transform: scale(1.22) rotate(-10deg); opacity: 1; }
  100% {
    transform: scale(1) rotate(0); opacity: 1;
    filter: grayscale(0) brightness(1) drop-shadow(0 0 40px rgba(255, 46, 147, .35)) drop-shadow(0 0 90px rgba(31, 91, 255, .25));
  }
}
@keyframes emblem-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}

.wordmark {
  margin: clamp(10px, 2svh, 22px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 6rem);
  line-height: .95;
  letter-spacing: .06em;
  display: flex;
  gap: .02em;
}
/* Scritta: grigia nell'attesa; al tocco ogni lettera fa un saltello e si accende, una dopo l'altra */
.wordmark span {
  display: inline-block;
  color: #8a8992;
  text-shadow: none;
}
.is-lit .wordmark span {
  color: var(--paper);
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .35);
  animation: letter-light .7s cubic-bezier(.25, 1.5, .5, 1) both;
}
.is-lit .wordmark span:nth-child(1) { animation-delay: .10s; }
.is-lit .wordmark span:nth-child(2) { animation-delay: .17s; }
.is-lit .wordmark span:nth-child(3) { animation-delay: .24s; }
.is-lit .wordmark span:nth-child(4) { animation-delay: .31s; }
.is-lit .wordmark span:nth-child(5) { animation-delay: .38s; }
.is-lit .wordmark span:nth-child(6) { animation-delay: .45s; }
@keyframes letter-light {
  0% { transform: translateY(0) rotate(0); color: #8a8992; text-shadow: none; }
  40% { transform: translateY(-.32em) rotate(-6deg); color: var(--paper); }
  100% { transform: translateY(0) rotate(0); color: var(--paper); text-shadow: 0 .06em 0 rgba(0, 0, 0, .35); }
}

.tagline {
  margin: clamp(10px, 2svh, 18px) 0 0;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  font-weight: 600;
  max-width: 30ch;
  opacity: .5; filter: grayscale(1);
}
.tagline-en {
  margin: 4px 0 0;
  font-size: .95rem;
  opacity: .3; filter: grayscale(1);
}
.is-lit .tagline { animation: light-up .8s ease .5s both; }
.is-lit .tagline-en { animation: light-up-soft .8s ease .6s both; }
/* Tutto ciò che nell'attesa è in bianco e nero si accende così, un pezzo dopo l'altro */
@keyframes light-up { from { opacity: .5; filter: grayscale(1); } to { opacity: 1; filter: grayscale(0); } }
@keyframes light-up-soft { from { opacity: .3; filter: grayscale(1); } to { opacity: .6; filter: grayscale(0); } }
@keyframes fade { to { opacity: 1; } }

/* Capitoli: un colore per album */
.chapters {
  list-style: none;
  margin: clamp(14px, 3svh, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  opacity: 1;
}
.chapter { opacity: .55; filter: grayscale(1); }
/* i capitoli si accendono uno alla volta, con un piccolo salto */
.is-lit .chapter { animation: chapter-light .6s cubic-bezier(.25, 1.5, .5, 1) both; }
.is-lit .chapter:nth-child(1) { animation-delay: .65s; }
.is-lit .chapter:nth-child(2) { animation-delay: .8s; }
.is-lit .chapter:nth-child(3) { animation-delay: .95s; }
.is-lit .chapter:nth-child(4) { animation-delay: 1.1s; }
@keyframes chapter-light {
  0% { opacity: .55; filter: grayscale(1); transform: scale(1); }
  45% { transform: scale(1.18) rotate(-4deg); }
  100% { opacity: 1; filter: grayscale(0); transform: scale(1); }
}
.chapter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  padding: .55em 1em .5em;
  border-radius: 999px 999px 999px 6px; /* goccia di vernice */
  color: var(--ink);
}
.chapter small {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  font-size: .85em;
  opacity: .75;
  margin-left: .3em;
}
.chapter--red { background: var(--red); color: var(--paper); }
.chapter--yellow { background: var(--yellow); }
.chapter--orange { background: var(--orange); }
.chapter--blue { background: var(--blue); color: var(--paper); }

/* ---------- KROMÌ: al centro, in basso ---------- */
.kromi {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: var(--kromi-h);
  width: calc(var(--kromi-h) * .75);    /* proporzioni della clip: il braccio teso esce a destra */
  transform: translateX(-34%);          /* così è il corpo, non il riquadro, a stare al centro */
  z-index: 4;
  cursor: pointer;
}
.kromi__body {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-origin: 50% 100%;
}
.kromi__body img,
.kromi__body video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55));
  transition: filter 1s ease;
}
.kromi__body [hidden] { display: none !important; }
.is-grey .kromi__body img,
.is-grey .kromi__body video { filter: grayscale(1) brightness(.85); }

.kromi__shadow {
  position: absolute;
  left: 10%;
  right: 46%;
  bottom: -6px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  z-index: -1;
}

/* Invito iniziale: "Tocca per dare colore" sopra la testa di KROMÌ grigio */
.ignite {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 34%;                      /* centro del corpo di KROMÌ nel riquadro */
  transform: translate(-50%, 8px);
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--paper);
  padding: .65em 1.3em;
  border: 2px solid rgba(255, 247, 236, .55);   /* in bianco e nero: il primo colore arriva con l'esplosione */
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
  z-index: 3;
}
.ignite.show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: ignitePulse 1.2s ease-in-out infinite;
}
.ignite.gone { opacity: 0; transition: opacity .2s ease; animation: none; }
@keyframes ignitePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .28); }
  50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .ignite { display: none; } }

/* Fumetto: proprio dove arriva il dito di KROMÌ (a destra, all'altezza della spalla). */
.bubble {
  position: absolute;
  bottom: 71%;
  left: calc(100% - 2px);    /* vicino al dito, ma la mano resta tutta visibile */
  width: max-content;
  max-width: min(280px, 40vw);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  line-height: 1.3;
  padding: .8em 1.1em;
  border-radius: 22px 22px 22px 4px;
  box-shadow: -6px 6px 0 var(--accent, var(--magenta));
  transform-origin: 0 100%;
  transform: scale(0);
  pointer-events: none;
}
.bubble__rest { visibility: hidden; }   /* testo non ancora "detto": occupa spazio, così il fumetto non cambia misura */

/* Lancio del fumetto: una goccia di vernice parte dal dito, vola e si apre nel fumetto */
.bubble-drop {
  position: absolute;
  bottom: 71%;
  left: calc(100% - 2px);
  width: 16px;
  height: 16px;
  margin: 0 0 -8px -8px;
  border-radius: 50% 50% 50% 12%;
  background: var(--accent, var(--magenta));
  opacity: 0;
  pointer-events: none;
}
.bubble-drop.fly { animation: dropFly .26s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes dropFly {
  0%   { transform: translate(-30px, 12px) scale(.35); opacity: 1; }
  80%  { transform: translate(0, 0) scale(1.1); opacity: 1; }
  100% { transform: translate(0, 0) scale(1.9); opacity: 0; }
}
.bubble.show { animation: bubbleOpen .5s cubic-bezier(.2, .8, .3, 1) .2s both; }
.bubble.hide { animation: bubbleClose .25s ease-in both; }
@keyframes bubbleOpen {
  0%   { transform: scale(0) rotate(-10deg); }
  55%  { transform: scale(1.12) rotate(2deg); }
  78%  { transform: scale(.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bubbleClose {
  from { transform: scale(1); }
  to   { transform: scale(0) rotate(6deg); }
}
/* Tutti i fumetti (anche il primo) stanno nello stesso punto */
.bubble .wave {
  display: inline-block;
  transform-origin: 70% 80%;
  animation: wave 1.6s ease-in-out infinite;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-10deg); }
}

/* ---------- Pulsante musica (in alto a destra) ---------- */
.sound {
  position: absolute;
  top: clamp(14px, 2.5svh, 24px);
  right: clamp(16px, 3vw, 36px);
  z-index: 5;
  padding: .7em .95em;
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .08em;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  opacity: .55; filter: grayscale(1);
  transition: background .2s ease, box-shadow .2s ease;
}
.sound[hidden] { display: none; }
.is-lit .sound { animation: light-up .8s ease 1.2s both; }
.sound:hover { background: var(--magenta); box-shadow: none; }
.sound:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sound__inner { display: inline-flex; align-items: center; gap: .55em; }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--red); }
.sound__bars i:nth-child(2) { background: var(--yellow); }
.sound__bars i:nth-child(3) { background: var(--orange); }
.sound__bars i:nth-child(4) { background: var(--blue); }
.sound.is-on .sound__bars i { animation: eq .8s ease-in-out infinite alternate; }
.sound.is-on .sound__bars i:nth-child(2) { animation-duration: .55s; animation-delay: -.2s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-duration: .7s; animation-delay: -.4s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-duration: .6s; animation-delay: -.1s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
/* quando KROMÌ dice "Alza il volume", il pulsante si fa notare */
.sound.nudge .sound__inner { animation: nudge .8s ease 2; }
@keyframes nudge {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-9deg) scale(1.18); }
  45% { transform: rotate(7deg) scale(1.1); }
  70% { transform: rotate(-3deg) scale(1.04); }
}

/* ---------- Barra in basso: Instagram a sinistra, suggerimento a destra ---------- */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(16px, 3vw, 36px) clamp(14px, 3svh, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  opacity: .5; filter: grayscale(1);
  pointer-events: none;
}
.is-lit .bar { animation: light-up .8s ease 1.2s both; }

.social {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  transition: background .2s ease, box-shadow .2s ease;
}
.social:hover { background: var(--magenta); box-shadow: none; }
.social__short { display: none; }
.social:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.hint {
  margin: 0;
  font-size: .9rem;
  opacity: .6;
  text-align: right;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --kromi-h: min(52svh, 440px); }
  .hero { padding-top: 22px; }
  .emblem { width: clamp(96px, 28vw, 140px); }
  .chapter { font-size: .7rem; }
  /* KROMÌ un po' a sinistra, così il fumetto ha spazio a destra */
  .kromi { left: 30%; bottom: 52px; }
  .bubble { left: 58%; bottom: 82%; max-width: min(180px, 44vw); font-size: .88rem; }
  .bubble-drop { left: 58%; bottom: 82%; }
  /* su mobile sopra la testa non c'è posto (i capitoli vanno su due righe):
     l'invito sta a destra di KROMÌ, su due righe, dove poi comparirà il fumetto */
  .ignite { left: 56%; bottom: 52%; transform: translate(0, 8px); white-space: normal; max-width: 10.5em; text-align: center; line-height: 1.25; }
  .ignite.show { transform: translate(0, 0); }
  .bar { padding-bottom: 12px; justify-content: center; }
  .social { font-size: .85rem; padding: .6em .9em; }
  .social__long { display: none; }
  .social__short { display: inline; }
  .hint { display: none; }
}

/* Schermi bassi (portatili piccoli in orizzontale) */
@media (max-height: 640px) and (min-width: 721px) {
  :root { --kromi-h: 44svh; }
  .emblem { width: 96px; }
  .wordmark { font-size: 3rem; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .emblem, .wordmark span, .tagline, .tagline-en, .chapters, .chapter, .bar, .sound {
    animation: none !important;
    transform: none !important;
  }
  .is-lit .emblem, .is-lit .tagline, .is-lit .chapter, .is-lit .bar, .is-lit .sound { opacity: 1 !important; filter: none !important; }
  .is-lit .tagline-en { opacity: .6 !important; filter: none !important; }
  .stage.shake { animation: none; }
  .bubble .wave { animation: none; }
  .bubble.show { animation: none; transform: scale(1); }
  .bubble.hide { animation: none; transform: scale(0); }
  .bubble-drop.fly, .sound.nudge .sound__inner, .sound.is-on .sound__bars i { animation: none; }
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }