/* ============================================================
   trica. — teaser stranica
   ============================================================ */

:root {
  --yellow: #f2b312;
  --ink: #17150f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Quicksand', ui-rounded, 'Comfortaa', 'Trebuchet MS', sans-serif;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

.teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 7vh, 4.5rem);
}

/* ------- logo ------- */

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 3vh, 1.8rem);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logo__img {
  width: clamp(280px, 52vw, 520px);
  height: auto;
  display: block;
}

/* ------- naslov ------- */

.teaser__title {
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  animation: rise 0.9s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------- rotirajući naslov -------
   3 poruke × 2.5s = ciklus od 7.5s; svaka poruka je vidljiva trećinu
   ciklusa, sa fade + blagim pomakom od 5px (ulaz odozdo, izlaz gore). */

.rotator {
  position: relative;
  height: 1.5em;
  width: 100%;
}

.rotator span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: cycle 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.rotator span:nth-child(2) { animation-delay: 2.5s; }
.rotator span:nth-child(3) { animation-delay: 5s; }

@keyframes cycle {
  0%           { opacity: 0; transform: translateY(5px); }
  6%           { opacity: 1; transform: translateY(0); }
  27.3%        { opacity: 1; transform: translateY(0); }
  33.33%       { opacity: 0; transform: translateY(-5px); }
  33.34%, 100% { opacity: 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .teaser__title { animation: none; }
  .rotator span { animation: none; }
  .rotator span:first-child { opacity: 1; }
}