/**
 * IMAGE-EFFECTS.CSS (Global)
 * Versão v46 - "SEM CONFLITO / NÃO SOME"
 * - Film Grain usa ::before (grão + riscos + vinheta) e anima forte
 * - Noir/Sepia/Cool Fade usam ::after (overlay antigo) e não brigam com film grain
 * - Remove calc() em opacity (evita zerar em alguns browsers)
 * - Anti-sleep: camadas compostas + transform 3D + will-change + contain
 */

/* =========================================================
   0) Defaults
   ========================================================= */

:root {
  --img-filter: none;
  --img-hover-filter: none;

  /* Film grain (controle fino aqui) */
  --grain-opacity: 0.62;   /* grão */
  --scratch-opacity: 0.55; /* riscos */
  --grain-size: 160px 160px;
  --scratch-size: 720px 720px;

  /* Blend (fallback) */
  --grain-blend: hard-light;
  --scratch-blend: hard-light;

  /* Overlay antigo (Noir/Sepia/Cool) */
  --img-overlay: none;
  --img-overlay-opacity: 0;
  --img-overlay-blend: normal;
  --img-overlay-size: 200px 200px;
  --img-overlay-repeat: repeat;

  /* Vinheta film grain */
  --vignette: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20),
    transparent 20%,
    transparent 80%,
    rgba(0,0,0,0.25)
  );

  /* SVG Noise (grão) - OPACIDADE AUMENTADA (0.55 -> 0.95) */
  --noise-svg-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.95'/%3E%3C/svg%3E");

  /* SVG Riscos sutis - OPACIDADE AUMENTADA (Riscos brancos/pretos mais fortes) */
  --scratch-subtle: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.20'/%3E%3Cpath d='M120,0 Q135,260 110,520' fill='none' stroke='white' stroke-width='1' opacity='0.8'/%3E%3Cpath d='M405,0 Q390,240 420,520' fill='none' stroke='black' stroke-width='1' opacity='0.7'/%3E%3Cpath d='M250,130 Q270,170 235,220' fill='none' stroke='black' stroke-width='0.8' opacity='0.7'/%3E%3Cpath d='M40,60 Q55,140 25,210' fill='none' stroke='white' stroke-width='0.8' opacity='0.6'/%3E%3C/svg%3E");
  /* SVG Film Burn (Mancha de Queimado) */
  /* Um blob com gradiente quente e bordas irregulares */
  --film-burn: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='b'%3E%3Cstop offset='20%25' stop-color='%23fff8e7'/%3E%3Cstop offset='50%25' stop-color='%23ffbf00'/%3E%3Cstop offset='85%25' stop-color='%23500a00'/%3E%3Cstop offset='100%25' stop-color='transparent' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='d'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='30'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='100' fill='url(%23b)' filter='url(%23d)' opacity='0.85'/%3E%3C/svg%3E");
}

/* Se o browser suporta blend overlay, usa. Senão fica no normal. */
@supports (mix-blend-mode: overlay) {
  :root {
    --grain-blend: hard-light; 
    --scratch-blend: hard-light;
  }
}

/* =========================================================
   1) Containers
   ========================================================= */

.article-hero__image,
.article-card__thumbnail,
.feature__image,
.carousel-item__image {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   2) FILM GRAIN (usa ::before — não briga com outros efeitos)
   ========================================================= */

html[data-image-effect="film_grain"] {
  --img-filter: sepia(0.20) contrast(1.10) brightness(0.98) saturate(0.95);
  --img-hover-filter: sepia(0.12) contrast(1.14) brightness(1.03) saturate(1.02);
}

/* Film grain completo: grão + riscos + vinheta + MANCHA */
html[data-image-effect="film_grain"] .article-hero__image::before,
html[data-image-effect="film_grain"] .article-card__thumbnail::before,
html[data-image-effect="film_grain"] .feature__image::before,
html[data-image-effect="film_grain"] .carousel-item__image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;

  /* 4 Camadas: Grão, Mancha, Riscos, Vinheta */
  background-image: var(--noise-svg-1), var(--film-burn), var(--scratch-subtle), var(--vignette);
  
  /* Mancha (2ª camada) começa GIGANTE e fora da tela */
  background-repeat: repeat, no-repeat, repeat, no-repeat;
  background-size: var(--grain-size), 400px 400px, var(--scratch-size), 100% 100%;
  background-position: 0 0, 9999px 9999px, 0 0, 0 0;

  mix-blend-mode: var(--grain-blend);
  opacity: 1;

  /* Anti-sleep */
  will-change: background-position, transform, opacity, filter;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: paint;

  /* Três animações: Jitter (grão), Flicker (luz), e Flash (mancha) */
  animation:
    fg-jitter-v46 0.67s steps(9) infinite,
    fg-flicker-v46 1.11s steps(11) infinite,
    burn-flash-v48 13.7s steps(1) infinite; /* Tempo primo longo (13.7s) para ser raro */
}

/* Truque: filter opacity */
html[data-image-effect="film_grain"] .article-hero__image::before,
html[data-image-effect="film_grain"] .article-card__thumbnail::before,
html[data-image-effect="film_grain"] .feature__image::before,
html[data-image-effect="film_grain"] .carousel-item__image::before {
  filter: opacity(1);
}

/* =========================================================
   3) NOIR / SEPIA_PRINT / COOL_FADE / CLEAN_POP (overlay antigo)
      Usa ::after sempre, independente do film grain.
   ========================================================= */

/* NOIR */
/* ...restante do arquivo mantido... */
html[data-image-effect="noir"] {
  --img-filter: grayscale(100%) contrast(1.5) brightness(0.85);
  --img-hover-filter: grayscale(100%) contrast(1.4) brightness(1.0);
  --img-overlay: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
  --img-overlay-opacity: 0.30;
  --img-overlay-blend: overlay;
  --img-overlay-size: 200px 200px;
  --img-overlay-repeat: repeat;
}

/* SEPIA PRINT */
html[data-image-effect="sepia_print"] {
  --img-filter: sepia(0.6) contrast(1.1) brightness(0.95) saturate(0.8);
  --img-hover-filter: sepia(0.5) contrast(1.2) brightness(1.05) saturate(1.0);
  --img-overlay: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='1'/%3E%3C/svg%3E");
  --img-overlay-opacity: 0.20;
  --img-overlay-blend: multiply;
  --img-overlay-size: 240px 240px;
  --img-overlay-repeat: repeat;
}

/* COOL FADE */
html[data-image-effect="cool_fade"] {
  --img-filter: brightness(0.9) contrast(1.1) saturate(0.8) hue-rotate(10deg);
  --img-hover-filter: brightness(1.0) contrast(1.15) saturate(1.0) hue-rotate(0deg);
  --img-overlay: linear-gradient(to bottom right, rgba(0,25,50,0.30), rgba(0,0,0,0));
  --img-overlay-opacity: 0.50;
  --img-overlay-blend: soft-light;
  --img-overlay-size: 100% 100%;
  --img-overlay-repeat: no-repeat;
}

/* CLEAN POP */
html[data-image-effect="clean_pop"] {
  --img-filter: contrast(1.05) saturate(1.1) brightness(1.02);
  --img-hover-filter: contrast(1.05) saturate(1.2) brightness(1.05);
  --img-overlay: none;
  --img-overlay-opacity: 0;
}

/* Overlay antigo aplicado em ::after (sempre o mesmo mecanismo) */
html[data-image-effect="noir"] .article-hero__image::after,
html[data-image-effect="noir"] .article-card__thumbnail::after,
html[data-image-effect="noir"] .feature__image::after,
html[data-image-effect="noir"] .carousel-item__image::after,
html[data-image-effect="sepia_print"] .article-hero__image::after,
html[data-image-effect="sepia_print"] .article-card__thumbnail::after,
html[data-image-effect="sepia_print"] .feature__image::after,
html[data-image-effect="sepia_print"] .carousel-item__image::after,
html[data-image-effect="cool_fade"] .article-hero__image::after,
html[data-image-effect="cool_fade"] .article-card__thumbnail::after,
html[data-image-effect="cool_fade"] .feature__image::after,
html[data-image-effect="cool_fade"] .carousel-item__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  background-image: var(--img-overlay);
  background-repeat: var(--img-overlay-repeat);
  background-size: var(--img-overlay-size);

  opacity: var(--img-overlay-opacity);
  mix-blend-mode: var(--img-overlay-blend);

  will-change: opacity, transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: paint;
}

/* =========================================================
   4) Animations (v46) — sem calc()
   ========================================================= */

@keyframes fg-jitter-v46 {
  0%   { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0) scale(1.00) rotate(0.001deg); }
  10%  { background-position: -19px 11px, 30px -10px, 0 0; transform: translate3d(1px,-1px,0) scale(1.01) rotate(-0.001deg); }
  22%  { background-position: 24px -21px, -40px 18px, 0 0; transform: translate3d(-1px,1px,0) scale(1.00) rotate(0.001deg); }
  35%  { background-position: -12px -28px, 10px 35px, 0 0; transform: translate3d(1px,0,0) scale(1.02) rotate(0.001deg); }
  48%  { background-position: 36px 15px, -22px -30px, 0 0; transform: translate3d(0,1px,0) scale(1.00) rotate(-0.001deg); }
  63%  { background-position: -31px 20px, 44px 6px, 0 0; transform: translate3d(-1px,0,0) scale(1.01) rotate(0.001deg); }
  79%  { background-position: 14px -33px, -15px 42px, 0 0; transform: translate3d(0,-1px,0) scale(1.02) rotate(-0.001deg); }
  100% { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0) scale(1.01) rotate(0.001deg); }
}

@keyframes fg-flicker-v46 {
  0%   { opacity: 0.92; }
  12%  { opacity: 1.00; }
  28%  { opacity: 0.86; }
  44%  { opacity: 1.00; }
  63%  { opacity: 0.84; }
  79%  { opacity: 0.98; }
  100% { opacity: 0.94; }
}

/* Animação da MANCHA (Burn): Fica fora da tela 90% do tempo */
@keyframes burn-flash-v48 {
  0%   { background-position: 0 0, 9999px 9999px, 0 0, 0 0; }
  
  /* Flash 1 (Rápido na esquerda) */
  14%  { background-position: -20px 10px, 9999px 9999px, 30px -10px, 0 0; }
  15%  { background-position: -20px 10px, 10% 20%, 30px -10px, 0 0; } 
  16%  { background-position: -20px 10px, 9999px 9999px, 30px -10px, 0 0; }

  /* Molho... */
  
  /* Flash 2 (Centro-Direita) */
  45%  { background-position: 10px -30px, 9999px 9999px, -20px 40px, 0 0; }
  45.5%{ background-position: 10px -30px, 70% 60%, -20px 40px, 0 0; }
  46%  { background-position: 10px -30px, 9999px 9999px, -20px 40px, 0 0; }

  /* Flash 3 (Canto inferior) */
  88%  { background-position: -5px 5px, 9999px 9999px, 40px -20px, 0 0; }
  88.2%{ background-position: -5px 5px, 20% 80%, 40px -20px, 0 0; }
  88.5%{ background-position: -5px 5px, 9999px 9999px, 40px -20px, 0 0; }

  100% { background-position: 0 0, 9999px 9999px, 0 0, 0 0; }
}

/* =========================================================
   5) Image filters (Common)
   ========================================================= */

html[data-image-effect] .article-hero__image img,
html[data-image-effect] .article-card__thumbnail img,
html[data-image-effect] .feature__image img,
html[data-image-effect] .carousel-item__image img {
  filter: var(--img-filter) !important;
  transition: filter 300ms ease;
  z-index: 1;
  position: relative;
}

html[data-image-effect] .article-hero__image:hover img,
html[data-image-effect] .article-card__thumbnail:hover img,
html[data-image-effect] .feature__image:hover img,
html[data-image-effect] .carousel-item__link:hover .carousel-item__image img {
  filter: var(--img-hover-filter, var(--img-filter)) !important;
}

/* =========================================================
   6) Cleanup (CLEAN POP - Remove tudo)
   ========================================================= */

html[data-image-effect="clean_pop"] .article-hero__image::before,
html[data-image-effect="clean_pop"] .article-card__thumbnail::before,
html[data-image-effect="clean_pop"] .feature__image::before,
html[data-image-effect="clean_pop"] .carousel-item__image::before,
html[data-image-effect="clean_pop"] .article-hero__image::after,
html[data-image-effect="clean_pop"] .article-card__thumbnail::after,
html[data-image-effect="clean_pop"] .feature__image::after,
html[data-image-effect="clean_pop"] .carousel-item__image::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-image-effect] *::after,
  html[data-image-effect] *::before {
    animation: none !important;
  }
}