/* ============================================================================
   Eagles Photography — VISUAL UPGRADE LAYER (visuals.css)
   Pairs with visuals.js. Self-contained; reuses styles.css :root tokens.
   Covers: cursor trail (#5), parallax (#4), seasonal skin (#8),
           hover zoom + caption (#11), before/after slider (#10),
           animated counters, Tamil toggle (#54).
   ============================================================================ */

/* ---- Gold cursor trail (#5) — desktop / fine-pointer only ---- */
@media (pointer:fine){
  .trail-dot{position:fixed;top:0;left:0;z-index:9998;width:9px;height:9px;border-radius:50%;
    background:radial-gradient(circle,#ffe39a 0%,#e8b53f 40%,rgba(232,181,63,0) 75%);pointer-events:none;
    transform:translate(-50%,-50%);opacity:.9;will-change:transform,opacity;filter:drop-shadow(0 0 4px rgba(232,181,63,.6))}
}
@media (prefers-reduced-motion:reduce){ .trail-dot{display:none!important} }

/* ---- Parallax (#4) — handled in JS via translateY; just a perf hint ---- */
[data-parallax]{will-change:transform}

/* ---- Portfolio hover zoom + caption (#11) ---- */
.gal{position:relative}
.gal img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s}
.gal:hover img{transform:scale(1.06)}
.gal .gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 18px 16px;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(8,9,12,.82),transparent);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.gal:hover .gal-cap{opacity:1;transform:none}
.gal .gal-cap b{color:var(--gold-bright);font-weight:600}

/* ---- Animated counters ---- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---- Before / After slider (#10) ---- */
.before-after{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--line);
  user-select:none;touch-action:none;cursor:ew-resize}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.before-after .ba-after{clip-path:inset(0 0 0 50%)}
.before-after .ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-bright);
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 14px rgba(232,181,63,.7)}
.before-after .ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:rgba(12,13,17,.85);border:1px solid var(--gold);
  display:grid;place-items:center;color:var(--gold-bright);pointer-events:none}
.before-after .ba-grip::before{content:"\\2194"}
.before-after .ba-tag{position:absolute;bottom:12px;z-index:4;font-family:var(--sans);font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(8,9,12,.6);padding:5px 10px;border-radius:4px;pointer-events:none}
.before-after .ba-tag.l{left:12px}
.before-after .ba-tag.r{right:12px}

/* ---- Seasonal skin (#8) — subtle festive accents ---- */
.season-pill{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:47;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 18px;border-radius:40px;background:rgba(12,13,17,.7);backdrop-filter:blur(10px);
  border:1px solid var(--gold);color:var(--gold-bright);opacity:0;animation:seasonIn .8s ease .6s forwards}
@keyframes seasonIn{to{opacity:1}}
.season-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.season-fx span{position:absolute;top:-30px;color:var(--gold-bright);opacity:.0;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-30px) rotate(0);opacity:0}
  10%{opacity:.8}100%{transform:translateY(110vh) rotate(360deg);opacity:0}}
body.season-christmas .season-fx span{color:#cfe8ff}
@media (prefers-reduced-motion:reduce){ .season-fx{display:none} }


/* ---- Always-on ambient floating particles (background detail) ---- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;bottom:-12px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,205,99,.9),rgba(232,181,63,0) 70%);
  animation:drift linear infinite;opacity:0}
@keyframes drift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.5}
  88%{opacity:.5}
  100%{transform:translateY(-112vh) translateX(24px);opacity:0}}
@media(prefers-reduced-motion:reduce){.ambient{display:none}}