/* ==========================================================
   Capa de profundidad compartida: grano fotográfico, viñeta,
   luces ambientales, brillo en tarjetas y barra de progreso.
   Los colores vienen de --acc / --acc2 (los pone js/depth.js).
   ========================================================== */
:root{--acc:#c99a3e;--acc2:#ffffff;--grain:.075;--vig:.22}

/* Grano fotográfico animado (quita la sensación de "plano digital") */
.fx-grain{position:fixed;inset:-60%;z-index:96;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}

/* Viñeta: oscurece suavemente las orillas y centra la mirada */
.fx-vignette{position:fixed;inset:0;z-index:95;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,var(--vig)) 100%)}

/* Luces ambientales que se mueven lento detrás del contenido */
.fx-light{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:soft-light}
.fx-light i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(30px);opacity:.55}
.fx-light i:nth-child(1){left:-25vmax;top:-20vmax;background:radial-gradient(circle,var(--acc),transparent 62%);animation:luz1 22s ease-in-out infinite alternate}
.fx-light i:nth-child(2){right:-30vmax;bottom:-25vmax;background:radial-gradient(circle,var(--acc2),transparent 62%);animation:luz2 26s ease-in-out infinite alternate}
@keyframes luz1{to{transform:translate(18vmax,22vmax) scale(1.15)}}
@keyframes luz2{to{transform:translate(-20vmax,-16vmax) scale(1.2)}}

/* Barra de progreso de lectura */
.fx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:115;pointer-events:none;transform-origin:0 50%;
  transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px var(--acc)}

/* Brillo de cristal en tarjetas: luz superior + reflejo que sigue al dedo */
.fx-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;overflow:hidden;
  background:
    radial-gradient(260px circle at var(--hx,50%) var(--hy,-20%),rgba(255,255,255,.22),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%);
  mix-blend-mode:soft-light;opacity:.9;transition:opacity .3s}
.fx-sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08)}
.fx-lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}

/* Imágenes con marco de luz interior */
.pic.fx-pic{isolation:isolate}
.pic.fx-pic::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -40px 60px -30px rgba(0,0,0,.35)}

/* Títulos: entran con profundidad (giran desde atrás) mientras se hace scroll */
.fx-tilt-in{transform-origin:50% 100%;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .fx-grain{animation:none}
  .fx-light i{animation:none}
}