/* ============================================================
   media.css — imaginile de produs, interactiunea cu cursorul si
   flickerul discret de pe elementele de accent.

   Totul de aici e decorativ. Sub prefers-reduced-motion se opreste
   complet: raman imaginile si cadrele, dispar miscarea si palpairea.
   ============================================================ */

/* ---------- Cadrul unei capturi de produs ---------- */
.shot{ margin:0; }

.shot__frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-panel);
  overflow:hidden;
  /* variabilele astea sunt scrise de visuals.js pe miscarea mouse-ului */
  --tx:0deg; --ty:0deg; --mx:50%; --my:50%;
  transform:perspective(1400px) rotateX(var(--tx)) rotateY(var(--ty));
  transition:transform .5s var(--ease-out), border-color .4s var(--ease);
  will-change:transform;
}
.shot__frame:hover{ border-color:var(--line-strong); }

.shot__frame img{
  width:100%; height:auto; display:block;
  /* la repaus imaginea sta putin retrasa, ca sa nu concureze cu textul */
  filter:saturate(.82) brightness(.86) contrast(1.04);
  transform:scale(1.006);
  transition:filter .55s var(--ease), transform .9s var(--ease-out);
}
.shot__frame:hover img{
  filter:saturate(1) brightness(1) contrast(1);
  transform:scale(1.022);
}

/* halou care urmareste cursorul peste imagine */
.shot__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx) var(--my),
             rgba(var(--uv-rgb),.16), transparent 68%);
  opacity:0; transition:opacity .45s var(--ease);
  mix-blend-mode:screen;
}
.shot__frame:hover .shot__glow{ opacity:1; }

/* vinieta care tine privirea in centru */
.shot__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.42) 100%);
}

/* dunga de scanare: trece rar, ca un reflex pe sticla */
.shot__scan{
  position:absolute; left:0; right:0; top:0; height:38%;
  pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.05) 55%, transparent);
}
.shot__frame.is-scan .shot__scan{ animation:shot-scan 1.5s var(--ease-out) 1; }

@keyframes shot-scan{
  0%   { opacity:0; transform:translateY(-120%); }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0; transform:translateY(320%); }
}

.shot__cap{
  margin-top:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-4);
  display:flex; align-items:center; gap:10px;
}
.shot__cap::before{ content:""; width:18px; height:1px; background:var(--uv); opacity:.7; }

/* ---------- Banda cu imagine pe doua coloane ---------- */
.band{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; }
.band--rev .band__copy{ order:2; }
.band__copy .h3{ margin-bottom:16px; }
.band__copy .lead{ max-width:44ch; }

.band__list{ list-style:none; margin:26px 0 0; padding:0; }
.band__list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-top:1px solid var(--line-soft);
  font-size:.93rem; color:var(--text-2);
}
.band__list li:last-child{ border-bottom:1px solid var(--line-soft); }
.band__list svg{ width:14px; height:14px; flex:none; margin-top:4px; color:var(--uv); }

@media (max-width:900px){
  .band{ grid-template-columns:1fr; }
  .band--rev .band__copy{ order:0; }
}

/* ---------- Butoane magnetice ---------- */
/* JS scrie --dx/--dy cu o fractiune din distanta pana la cursor */
[data-magnet]{
  --dx:0px; --dy:0px;
  transform:translate(var(--dx), var(--dy));
  transition:transform .35s var(--ease-out), background .18s ease, border-color .18s ease;
}

/* ---------- Flicker ---------- */
/* Palpaire scurta si rara, ca un neon care se aseaza. Se declanseaza din JS
   la intervale aleatoare, ca sa nu bata toate elementele in acelasi ritm. */
@keyframes flick{
  0%,100% { opacity:1; }
  8%      { opacity:.28; }
  14%     { opacity:1; }
  22%     { opacity:.42; }
  30%     { opacity:1; }
  38%     { opacity:.62; }
  46%     { opacity:1; }
}
.is-flick{ animation:flick .5s steps(1,end) 1; }

/* punctul din marca, cand palpaie, pierde si haloul */
.brand__mark i.is-flick{ animation:flick .42s steps(1,end) 1; }

@media (prefers-reduced-motion: reduce){
  .shot__frame{ transform:none !important; transition:none; }
  .shot__frame img{ filter:none; transform:none; transition:none; }
  .shot__glow,.shot__scan{ display:none; }
  [data-magnet]{ transform:none !important; }
  .is-flick{ animation:none !important; }
}

/* Alpine nu ruleaza pe tema noua, dar regula ramane pentru orice bloc
   care ar folosi x-cloak, ca sa nu clipeasca inainte de initializare */
[x-cloak]{ display:none !important; }