:root {
  --c-yellow: #fbe0a8;
  --c-purple: #7b6aae;
  --c-blue:   #8ec8ec;
  --c-track:  #f2f2f4;
  --c-text:   #111;
  --c-side:   #b9bdc5;
  --cycle:    4.5s;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  color: var(--c-text);
  font-family: "Open Sans", Arial, sans-serif;
}

body {
  overflow: hidden;
}

/* ---------- Scritte laterali verticali ---------- */
:root {
  /* altezza = schermo meno margini; limitata dalla larghezza su mobile (rapporto immagine 209:3000) */
  --side-h: min(calc(100vh - 16px), 120vw);
  --side-w: calc(var(--side-h) * 209 / 3000);
}
.side {
  position: fixed;
  top: 50%;
  height: var(--side-h);
  width: auto;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
}
.side--left  { left:  8px; }
.side--right { right: 8px; }

/* ---------- Contenuto centrale ---------- */
.hero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem calc(var(--side-w) + 8px + 1.25rem);
}

.logo {
  margin: 0 0 clamp(2rem, 7vh, 4.5rem);
  line-height: 0;
}
.logo-img {
  display: block;
  width: min(305px, 62vw);
  height: auto;
}

.claim {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(.7rem, 1.5vw, .85rem);
}
.claim--top {
  letter-spacing: .08em;
}
.claim--bottom {
  letter-spacing: .25em;
  line-height: 1.8;
}

/* ---------- Loader ---------- */
.loader {
  display: flex;
  gap: clamp(.6rem, 2.2vw, 1.6rem);
  width: min(640px, 100%);
  margin: clamp(1.4rem, 4vh, 2rem) 0;
}

.bar {
  position: relative;
  flex: 1 1 0;
  height: clamp(7px, 1.4vh, 11px);
  background: var(--c-track);
  overflow: hidden;
}
.bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fill);
  transform: scaleX(0);
  transform-origin: left center;
  animation: var(--anim) var(--cycle) ease-in-out infinite;
}

.bar--yellow { --fill: var(--c-yellow); }
.bar--purple { --fill: var(--c-purple); }
.bar--blue   { --fill: var(--c-blue); }

.bar:nth-child(1) { --anim: fill-1; }
.bar:nth-child(2) { --anim: fill-2; }
.bar:nth-child(3) { --anim: fill-3; }
.bar:nth-child(4) { --anim: fill-4; }
.bar:nth-child(5) { --anim: fill-5; }
.bar:nth-child(6) { --anim: fill-6; }

/* Ogni barra si riempie in sequenza, poi si svuotano tutte insieme e il ciclo riparte */
@keyframes fill-1 { 0%{transform:scaleX(0)} 12%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes fill-2 { 0%,13%{transform:scaleX(0)} 25%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes fill-3 { 0%,26%{transform:scaleX(0)} 38%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes fill-4 { 0%,39%{transform:scaleX(0)} 51%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes fill-5 { 0%,52%{transform:scaleX(0)} 64%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes fill-6 { 0%,65%{transform:scaleX(0)} 77%,88%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .claim--bottom { letter-spacing: .18em; }
}

@media (max-height: 420px) and (orientation: landscape) {
  body { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bar::after { animation: none; transform: scaleX(1); }
}