/*!
 * Be Better – hologram logotip (v1.1, usklađen s paletom sajta)
 * Djeluje samo na logo u zaglavlju (.header .logo). Footer i ostatak stranice ostaju netaknuti.
 * Ugradnja u <head>, ISPOD styles.css:  <link rel="stylesheet" href="bebetter-holo.css?v=1.1">
 * Uklanjanje: obrišite taj jedan red.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .header .logo {
    position: relative;
    isolation: isolate;
    filter: drop-shadow(0 0 .28em rgba(95, 143, 140, .35));
    animation: bbHoloFlicker 7s steps(1, end) infinite;
    transition: filter .3s ease;
  }
  .header .logo:hover,
  .header .logo:focus-visible {
    filter: drop-shadow(0 0 .45em rgba(95, 143, 140, .6)) drop-shadow(0 0 .12em rgba(176, 141, 87, .55));
  }
  .header .logo .logo-mark,
  .header .logo .logo-text {
    background-image:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .38) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
      linear-gradient(100deg, #343A3B 0%, #7D7C67 22%, #B08D57 42%, #5F8F8C 60%, #555B5E 80%, #343A3B 100%);
    background-size: 100% 3px, 300% 100%;
    background-position: 0 0, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bbHoloShift 8s ease-in-out infinite alternate;
  }
  /* tanka svjetlosna "projekcija" ispod logotipa */
  .header .logo::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(95, 143, 140, .75), rgba(176, 141, 87, .75), transparent);
    filter: blur(1px);
    opacity: .65;
    pointer-events: none;
    animation: bbHoloBase 3.2s ease-in-out infinite;
  }
}

@keyframes bbHoloShift {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 48px, 100% 50%; }
}
@keyframes bbHoloBase {
  0%, 100% { opacity: .35; transform: scaleX(.85); }
  50%      { opacity: .8;  transform: scaleX(1); }
}
/* rijetko, kratko "treperenje" kao kod projekcije */
@keyframes bbHoloFlicker {
  0%, 91%, 93.5%, 100% { opacity: 1; transform: none; }
  92%   { opacity: .72; transform: translateX(1px) skewX(-4deg); }
  93%   { opacity: .9;  transform: translateX(-1px); }
}

/* Posjetioci koji su isključili animacije vide mirnu verziju */
@media (prefers-reduced-motion: reduce) {
  .header .logo,
  .header .logo .logo-mark,
  .header .logo .logo-text,
  .header .logo::after { animation: none !important; }
  .header .logo .logo-mark,
  .header .logo .logo-text { background-position: 0 0, 35% 50%; }
}