/* ============================================================
   Tuzlafarm — 3D logo animacija
   Boje i brzinu mijenjaš u :root ispod.
   ============================================================ */
* { box-sizing: border-box; }

:root {
  /* --- brand --- */
  --teal:        #10A898;
  --teal-bright: #39ffe6;
  --gray:        #A8A8A8;

  /* --- pozadina --- */
  --bg-0: #02100d;
  --bg-1: #0a1c18;

  /* --- logo --- */
  --logo-width: 560px;     /* maksimalna širina loga  */
  --spin-duration: 5s;     /* brzina okretanja zrna   */

  /* položaj zrna unutar loga (izračunato iz originala — ne diraj) */
  --mark-left: 52.33%;
  --mark-top:  46.67%;
  --mark-size: 70%;        /* % visine loga */
}

html, body { height: 100%; margin: 0; background: transparent; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 7vmin;
  background: transparent;
  font-family: 'Archivo', 'Arial Black', Arial, sans-serif;
}

/* ---------- LOGO ---------- */
.logo3d {
  position: relative;
  width: min(var(--logo-width), 92vw);
  aspect-ratio: 600 / 120;
  animation: tf-rise .8s .05s both cubic-bezier(.2,.7,.2,1);
}

.logo-base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
}

/* ---------- ZRNO (3D) ---------- */
.mark3d {
  position: absolute;
  left: var(--mark-left);
  top:  var(--mark-top);
  height: var(--mark-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 620px;            /* dubina za rotaciju */
}

/* meki teal sjaj iza zrna */
.mark3d .halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      rgba(57,255,230,.42) 0%,
      rgba(16,168,152,.30) 34%,
      transparent 68%);
  filter: blur(7px);
  animation: tf-halo 3.4s ease-in-out infinite;
}

/* sjena na podlozi koja se "spljošti" kad je zrno bočno */
.mark3d .shadow {
  position: absolute;
  left: 50%;
  bottom: -15%;
  width: 84%;
  height: 13%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,.6), transparent 72%);
  filter: blur(3px);
  animation: tf-shadow var(--spin-duration) linear infinite;
}

/* rotirajući element */
.spinner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: tf-spin var(--spin-duration) linear infinite;
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); }   /* prava zadnja strana, ne ogledalo */
.face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* klizeći stakleni odsjaj — samo preko oblika zrna (mask) */
.gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 40%,
      rgba(255,255,255,.6) 50%,
      transparent 60%);
  background-size: 280% 100%;
  -webkit-mask: url(assets/tuzlafarm-mark.png) center / contain no-repeat;
          mask: url(assets/tuzlafarm-mark.png) center / contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: tf-gloss var(--spin-duration) linear infinite;
}

/* ---------- CAPTION (opcionalno, slobodno obriši) ---------- */
.caption {
  margin: 0;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #3c5651;
  animation: tf-rise .8s .3s both cubic-bezier(.2,.7,.2,1);
}

/* ---------- pauza na hover ---------- */
.logo3d:hover .spinner,
.logo3d:hover .gloss,
.logo3d:hover .shadow,
.logo3d:hover .halo { animation-play-state: paused; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes tf-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes tf-gloss {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}
@keyframes tf-halo {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.12); opacity: 1;  }
}
@keyframes tf-shadow {
  0%, 50%, 100% { transform: translateX(-50%) scaleX(1);   opacity: .5;  }
  25%, 75%      { transform: translateX(-50%) scaleX(.12); opacity: .22; }
}
@keyframes tf-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- poštuj "smanji pokret" ---------- */
@media (prefers-reduced-motion: reduce) {
  .spinner, .gloss, .shadow, .halo, .logo3d, .caption { animation: none; }
  .spinner { transform: rotateY(0deg); }
}