/* ============================================================
   Heg.ai — effects: true film grain + glass helpers.
   Utility classes for non-React surfaces (cards, kits). React
   components (Photo, GlassPanel) carry the same recipe inline.
   ============================================================ */

:root {
  /* Monochrome grain (NO color). Coarser, clearly-visible film grain. */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* @kind other */
  /* Dappled SUNLIGHT through foliage. Two gobos: a warm LIGHT gobo (brightens
     the gaps where sun comes through — screen blend) and a soft shadow gobo
     (gentle depth). Light is the hero; shadow is subtle. */
  --leaf-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='lt'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.014' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.8 1.5 1.5 1.5 0 -1.45'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lt)'/%3E%3C/svg%3E"); /* @kind other */
  --leaf-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='sh'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.012' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.20 0 0 0 0 0.14 0 0 0 0 0.05 1.0 1.0 1.0 0 -0.92'/%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sh)'/%3E%3C/svg%3E"); /* @kind other */
  /* green-tinted light dapples — for the ivory variant (green spots of sun) */
  --leaf-light-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='ltg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.014' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18 0 0 0 0 0.40 0 0 0 0 0.28 1.5 1.5 1.5 0 -1.45'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ltg)'/%3E%3C/svg%3E"); /* @kind other */
}

/* ---- Dappled sunlight «солнце сквозь листву» — sanctioned ambient background.
   The LIGHT brightens the gaps (screen); a soft shadow adds gentle depth; the
   beige base is a touch deeper than pure ivory so the sun reads. Drifts in from
   the top-left corner and trails down. Content sits in a layer above (z ≥ 1).
   `.heg-dappled` = on beige · `.heg-dappled--green` = sun on the green field. */
.heg-dappled { position: relative; background-color: #F1E9D2; overflow: hidden; }
/* soft shadow — gentle depth, never dark spots */
.heg-dappled::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--leaf-soft); background-size: 760px 760px;
  mix-blend-mode: multiply; opacity: 0.16;
  -webkit-mask-image: radial-gradient(120% 155% at -6% -12%, #000 12%, rgba(0,0,0,0.45) 46%, transparent 80%);
  mask-image: radial-gradient(120% 155% at -6% -12%, #000 12%, rgba(0,0,0,0.45) 46%, transparent 80%);
}
/* the dappled patches — GREEN, darker than the beige (multiply) */
.heg-dappled::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--leaf-light-green); background-size: 720px 720px;
  mix-blend-mode: multiply; opacity: 0.55;
  -webkit-mask-image: radial-gradient(120% 155% at -6% -12%, #000 14%, rgba(0,0,0,0.5) 46%, transparent 82%);
  mask-image: radial-gradient(120% 155% at -6% -12%, #000 14%, rgba(0,0,0,0.5) 46%, transparent 82%);
}
.heg-dappled > * { position: relative; z-index: 1; }

/* sun on the green field — same warm light, deep-green base (ivory text) */
.heg-dappled--green { background-color: var(--green); }
.heg-dappled--green::before { mix-blend-mode: multiply; opacity: 0.34; }
.heg-dappled--green::after { background-image: var(--leaf-light); mix-blend-mode: screen; opacity: 0.62; }

/* ---- Film photo: light, airy, faint warm filmic curve + grain ---- */
.heg-film {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ivory-300);
}
.heg-film > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* filmic, NOT a color cast: lift exposure, soften contrast a touch */
  filter: brightness(1.04) contrast(0.96) saturate(0.9);
}
/* the grain itself — monochrome, soft-light so it reads as film. Applied to
   EVERY photo via this class (Photo component / .heg-film). Clearly visible. */
.heg-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* grain sits on the PHOTO only — overlaid UI
                                 (children with z-index ≥ 2) stays clean */
  background-image: var(--grain-url);
  background-size: 280px 280px;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.heg-film.heg-film--strong::after { opacity: 0.5; }
.heg-film.heg-film--light::after  { opacity: 0.25; }

/* ---- Standalone grain overlay (drop over any block) ---- */
.heg-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---- Glass helper (when a React component isn't in play) ----
   ONLY two materials: white (default, Ink text) and green (Ivory text). */
.heg-glass {
  position: relative;
  background: var(--glass-white);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-rim);
  border: none;
}
.heg-glass--green { background: var(--glass-green); color: var(--ivory); box-shadow: var(--glass-shadow), var(--glass-rim-dark); }

/* ---- Float-in motion for glass plates ---- */
@keyframes heg-float-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.heg-float-in { animation: heg-float-in var(--dur-slow) var(--ease-soft) both; }