/* ФОТО-КОМПОНЕНТИ ЗА ПОКАНИТЕ
   .f-arch  · сводеста слика со бавен зум (Кен Барнс)
   .f-band  · лента преку цел екран со паралакс и златен отсјај
   .f-mos   · мозаик од слики со мек зум при допир

   Темата се менува преку променливи на самиот елемент (или на :root):
     --foto-bg    позадината на страницата (за преливот на лентата)
     --foto-line  бојата на тенката рамка
     --foto-cap   бојата на натписот врз лентата
   Паралаксот го врти /foto.js. Секој елемент може да носи ја класата за
   откривање при скрол што ја користи самата покана (на пр. .rv). */

/* ── сводеста слика ── */
.f-arch{
  position:relative;width:min(64vw,272px);aspect-ratio:3/4.1;margin:0 auto;
  border-radius:999px 999px 12px 12px;overflow:hidden;
  box-shadow:0 26px 52px -28px rgba(40,34,28,.5);
  animation:fArchIn 1.5s cubic-bezier(.22,.61,.36,1) .2s both;
}
.f-arch::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--foto-line,rgba(180,154,90,.6));
}
.f-arch img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:fKen 30s ease-in-out infinite alternate;will-change:transform;
}
@keyframes fKen{from{transform:scale(1.04)}to{transform:scale(1.17)}}
@keyframes fArchIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* ── лента преку цел екран ── */
.f-band{
  position:relative;overflow:hidden;
  height:clamp(16rem,54vw,26rem);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.f-band img{
  position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;
  will-change:transform;
}
.f-band::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,var(--foto-bg,#fff) 0%,transparent 20%,
    transparent 80%,var(--foto-bg,#fff) 100%);
}
.f-band::after{
  content:"";position:absolute;top:-40%;left:-60%;width:34%;height:190%;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,250,238,.3),transparent);
  transform:skewX(-9deg);animation:fGlint 9s ease-in-out infinite;
}
@keyframes fGlint{0%,64%{transform:translateX(0) skewX(-9deg)}100%{transform:translateX(440%) skewX(-9deg)}}
/* натписот носи своја мека подлога за да се чита и врз светли фотографии */
.f-band .f-cap{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:clamp(1.2rem,4.4vw,2.1rem);
  width:max-content;max-width:84%;padding:.52rem 1.25rem;border-radius:999px;
  background:rgba(26,22,18,.42);backdrop-filter:blur(4px);
  text-align:center;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--foto-cap,#fff);text-shadow:0 1px 10px rgba(20,16,12,.6);
}

/* ── мозаик ── */
.f-mos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,2.2vw,.9rem)}
.f-mos figure{position:relative;overflow:hidden;border-radius:12px;background:rgba(128,120,110,.12)}
.f-mos img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.35s cubic-bezier(.22,.61,.36,1)}
.f-mos figure:hover img,.f-mos figure:active img{transform:scale(1.07)}
.f-mos .tall{grid-row:span 2;aspect-ratio:3/4.55}
.f-mos .sq{aspect-ratio:1/1}

@media (prefers-reduced-motion:reduce){
  .f-arch,.f-arch img,.f-band::after{animation:none}
  .f-mos img{transition:none}
}