/* Nanegate.TNG – 3D-Wappen (Heißfolie Gold Relief fürs Web)
   Markup: <div class="crest3d" data-src="assets/brand/" role="img" aria-label="…"></div>
   Ohne JS: Folien-SVG als CSS-Hintergrund (Pfad relativ zu DIESER Datei, daher crest3d.css
   neben dem Ordner assets/ ablegen). crest3d.js setzt .is-live und baut den Ebenenstapel.
   Größe: --crest-size (Breite). Bewegung/Glanz steuert crest3d.js per transform. */
.crest3d {
  --crest-size: min(320px, 70vw);
  --crest-depth: calc(var(--crest-size) * 0.075); /* Relieftiefe */
  position: relative;
  width: var(--crest-size);
  aspect-ratio: 104 / 124;
  perspective: calc(var(--crest-size) * 3.2);
  background: url(assets/brand/nanegate-wappen-folie.svg) center / contain no-repeat;
}
.crest3d.is-live { background: none; }
.crest3d > *, .crest3d-rig > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Atmosphäre: goldener Glow dahinter, grün getönter Bodenschatten */
.crest3d-glow {
  inset: -30%; width: auto; height: auto;
  background: radial-gradient(closest-side, rgba(232, 205, 133, .30), rgba(201, 162, 75, .12) 45%, transparent 75%);
}
.crest3d-shadow {
  inset: auto 8% -12% 8%; width: auto; height: 14%;
  background: radial-gradient(closest-side, rgba(3, 22, 14, .75), rgba(6, 30, 20, .35) 55%, transparent);
}

/* 3D-Stapel */
.crest3d-rig { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; }
.crest3d-rig > img { transform: translateZ(calc(var(--z) * var(--crest-depth))); }
.crest3d-rig > img:not(:last-of-type) { filter: brightness(var(--b)) saturate(1.5) hue-rotate(-7deg); }
.crest3d-shine {
  overflow: hidden;
  transform: translateZ(1px);
  -webkit-mask: center / 100% 100% no-repeat; /* Bild setzt crest3d.js (Logoform) */
  mask: center / 100% 100% no-repeat;
}
/* Folie: gespiegeltes Umfeld, wandert langsam; Streifen: harter Glanz, wandert schnell */
.crest3d-foil, .crest3d-streak { position: absolute; inset: -20% -100%; will-change: transform; }
.crest3d-foil {
  --p: calc(var(--crest-size) * .62); /* Periode der Spiegelbänder */
  background: repeating-linear-gradient(112deg, #6e521c 0, #9a772a calc(var(--p) * .12), #e8cd85 calc(var(--p) * .23),
    #fff6d8 calc(var(--p) * .28), #f4e0a2 calc(var(--p) * .32), #b8913a calc(var(--p) * .42), #7d5f22 calc(var(--p) * .55),
    #c9a24b calc(var(--p) * .68), #f4e0a2 calc(var(--p) * .77), #b8913a calc(var(--p) * .86), #6e521c var(--p));
}
.crest3d-streak {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 216, .25) 45.5%, #fff6d8 49%, #fffdf4 50%,
    rgba(255, 246, 216, .25) 53.5%, transparent 58%, rgba(255, 240, 200, .3) 63%, transparent 65%);
  mix-blend-mode: screen;
}