/* Bird Road Music — additive art layer. Purely decorative/interactive; safe to delete
   (remove the two <link>/<script> lines in index.html) with zero effect on the app. */

::selection{ background: rgba(201,123,14,.25); color:#1C1814; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .brm-reveal{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--brm-delay, 0s);
    will-change: opacity, transform;
  }
  .brm-reveal.brm-in{ opacity: 1; transform: translateY(0); }
}

/* ---------- fine film-grain overlay ---------- */
.brm-grain{
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce){ .brm-grain{ display: none; } }

/* ---------- content card lift + glow ---------- */
.brm-card{ transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease; }
.brm-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -14px rgba(201,123,14,.30), 0 4px 14px rgba(28,24,20,.08);
  border-color: rgba(201,123,14,.35) !important;
}

/* ---------- gallery / content image zoom ---------- */
.brm-zoom{ transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.brm-zoom:hover{ transform: scale(1.045); }

/* ---------- nav link underline ---------- */
.brm-nav-link{ position: relative; }
.brm-nav-link::after{
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 2px;
  background: linear-gradient(90deg,#C97B0E,#e0a13f);
  border-radius: 2px;
  transition: left .35s cubic-bezier(.22,.61,.36,1), right .35s cubic-bezier(.22,.61,.36,1);
}
.brm-nav-link:hover::after{ left: 0; right: 0; }

/* ---------- button shine sweep ---------- */
/* No `position` here on purpose: some buttons this gets applied to (e.g.
   the persistent floating "Запази час" button) are position:fixed, and a
   plain `.brm-shine{position:relative}` rule has the same CSS specificity
   as Tailwind's `.fixed` utility — whichever stylesheet loads later wins,
   which silently downgraded fixed to relative. effects.js sets `relative`
   inline instead, only on elements that are actually position:static. */
.brm-shine{ overflow: hidden; }
.brm-shine::after{
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
.brm-shine:hover::after{ left: 130%; }

/* ---------- hero equalizer bars ---------- */
@media (prefers-reduced-motion: no-preference){
  .brm-eq{
    animation: brm-eq-beat 1.6s ease-in-out infinite;
    animation-delay: var(--brm-eq-delay, 0s);
    transform-origin: bottom center;
  }
}
@keyframes brm-eq-beat{ 0%,100%{ transform: scaleY(.55); } 50%{ transform: scaleY(1.15); } }

/* ---------- floating hero notes ---------- */
.brm-note{
  position: absolute; pointer-events: none; z-index: 1;
  color: rgba(201,123,14,.24);
  font-size: var(--brm-note-size, 20px);
  filter: drop-shadow(0 2px 6px rgba(201,123,14,.15));
}
@media (prefers-reduced-motion: no-preference){
  .brm-note{ animation: brm-float 9s ease-in-out infinite; animation-delay: var(--brm-note-delay, 0s); }
}
@keyframes brm-float{
  0%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-24px) rotate(8deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* ---------- hero heading soft glow ---------- */
@media (prefers-reduced-motion: no-preference){
  .brm-glow-heading{ animation: brm-textglow 5s ease-in-out infinite; }
}
@keyframes brm-textglow{
  0%,100%{ text-shadow: 0 0 0 rgba(201,123,14,0); }
  50%{ text-shadow: 0 0 26px rgba(201,123,14,.18); }
}