/* ============================================
   RAVALICO — Landing Animations Layer
   Učitava se NAKON styles.css. Sve je suptilno,
   uklopljeno u postojeći "luxury" stil i sigurno
   za prefers-reduced-motion.
   ============================================ */

/* --------------------------------------------
   1. SCROLL REVEAL (ponovno aktiviran)
   Skriveno stanje vrijedi SAMO kad je JS aktivan
   (html.js). Bez JS-a sadržaj ostaje vidljiv.
   -------------------------------------------- */
html.js .reveal-up,
html.js .reveal-left,
html.js .reveal-right {
  opacity: 0 !important;
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out) !important;
  will-change: opacity, transform;
}

html.js .reveal-up   { transform: translateY(36px) !important; }
html.js .reveal-left { transform: translateX(-46px) !important; }
html.js .reveal-right{ transform: translateX(46px) !important; }

html.js .reveal-up.is-visible,
html.js .reveal-left.is-visible,
html.js .reveal-right.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* --------------------------------------------
   2. HERO — sekvencijalni ulaz + naglasak
   -------------------------------------------- */

/* Naslov i tagline ulaze s blagim "focus-in" (blur -> oštro) */
html.js .hero-content h1.reveal-up:not(.is-visible),
html.js .hero-content .tagline.reveal-up:not(.is-visible) {
  filter: blur(8px) !important;
  transform: translateY(44px) !important;
}

/* Badge "Tradicija od 1903." — meki ulaz odozgo */
html.js .hero-badge.reveal-up:not(.is-visible) {
  transform: translateY(-14px) scale(0.96) !important;
}

/* --------------------------------------------
   3. SECTION LABEL — linije se "izvlače"
   -------------------------------------------- */
html.js .section-label.reveal-up .label-line {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.8s var(--ease-out) 0.15s, opacity 0.6s ease 0.15s;
}
html.js .section-label.reveal-up .label-line:first-child  { transform-origin: right center; }
html.js .section-label.reveal-up .label-line:last-child   { transform-origin: left center; }

html.js .section-label.reveal-up.is-visible .label-line {
  transform: scaleX(1);
  opacity: 1;
}

/* Tekst labele blago zasvijetli pri ulasku */
html.js .section-label.reveal-up.is-visible span:not(.label-line) {
  animation: ravLabelFade 0.9s ease both;
}
@keyframes ravLabelFade {
  from { letter-spacing: 0.05em; opacity: 0.2; }
  to   { letter-spacing: inherit; opacity: 1; }
}

/* --------------------------------------------
   4. SECTION TITLE — fokus-in
   -------------------------------------------- */
html.js .section-title.reveal-up:not(.is-visible) {
  filter: blur(6px) !important;
  transform: translateY(40px) !important;
}

/* --------------------------------------------
   5. MICRO-INTERAKCIJE — gumbi
   -------------------------------------------- */
.btn {
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.3s ease;
}
.btn svg {
  transition: transform 0.4s var(--ease-out);
}
.btn:hover {
  transform: translateY(-3px);
}
.btn:hover svg {
  transform: translateX(5px);
}
.btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* --------------------------------------------
   6. KARTICE VINA — meki lift + zoom slike
   (samo homepage; /vina ima vlastiti JS tilt efekt)
   -------------------------------------------- */
body.home .wine-card,
body.home .wine-card img {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease, border-color 0.4s ease;
}
body.home .wine-card:hover {
  transform: translateY(-8px);
}
body.home .wine-card:hover img {
  transform: scale(1.06);
}

/* Signature 1903 boce — lagano "dišu" pri hoveru */
.signature-piece img {
  transition: transform 0.6s var(--ease-out), filter 0.6s ease;
}
.signature-piece:hover img {
  transform: translateY(-10px) scale(1.04);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.signature-piece .signature-cta svg {
  transition: transform 0.4s var(--ease-out);
}
.signature-piece:hover .signature-cta svg {
  transform: translateX(5px);
}

/* --------------------------------------------
   7. NAGRADE — lift + animirana ikona
   -------------------------------------------- */
.award-card {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease;
}
.award-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
}
.award-icon {
  transition: transform 0.55s var(--ease-out), color 0.4s ease;
}
.award-card:hover .award-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* --------------------------------------------
   8. SLIKE U OKVIRIMA — suptilan zoom na hover
   -------------------------------------------- */
.story-image-wrap img,
.terroir-media-frame img {
  transition: transform 0.8s var(--ease-out);
}
.story-image-wrap:hover img,
.terroir-media-frame:hover img {
  transform: scale(1.05);
}

/* Boca u "posjetite" sekciji lagano lebdi */
.experience-bottle-backdrop img {
  animation: ravBottleFloat 9s ease-in-out infinite alternate;
}
@keyframes ravBottleFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* --------------------------------------------
   9. STATISTIKE — brojevi blago "naskoče"
   -------------------------------------------- */
html.js .stats-row.reveal-up.is-visible .stat {
  animation: ravStatPop 0.7s var(--ease-out) both;
}
html.js .stats-row.reveal-up.is-visible .stat:nth-child(3) { animation-delay: 0.1s; }
html.js .stats-row.reveal-up.is-visible .stat:nth-child(5) { animation-delay: 0.2s; }
html.js .stats-row.reveal-up.is-visible .stat:nth-child(7) { animation-delay: 0.3s; }
@keyframes ravStatPop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------
   REDUCED MOTION — sve mirno
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-up,
  html.js .reveal-left,
  html.js .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: opacity 0.2s ease !important;
  }
  .hero-accent,
  .experience-bottle-backdrop img {
    animation: none !important;
  }
  .btn:hover,
  .wine-card:hover,
  .wine-card:hover img,
  .signature-piece:hover img,
  .award-card:hover,
  .award-card:hover .award-icon,
  .story-image-wrap:hover img,
  .terroir-media-frame:hover img {
    transform: none !important;
  }
}