/* Matière Claude conservée. Photo validée et masque associé au même format natif. */
@property --myjak-mx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --myjak-my { syntax: '<percentage>'; inherits: true; initial-value: 40%; }

.myjak-calima-page { background: #14100e; }

.myjak-calima {
  --ink: .90;
  --tinsel: 0;
  --shine: .50;
  --photo-brightness: 1;
  --speed: 34s;
  --t1: #3a2116;
  --t2: #7a4b2c;
  --t3: #4b2c1d;
  --myjak-mx: 30%;
  --myjak-my: 40%;
  --glint: 255,255,255;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 5406 / 3041;
  overflow: hidden;
  background: #2a1b14;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.myjak-calima > .myjak-calima__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: fill;
  object-position: center;
  filter: brightness(var(--photo-brightness));
  pointer-events: none;
}

.myjak-calima__mark {
  position: absolute;
  left: var(--logo-left, 26.15804661%);
  top: var(--logo-top, 16.09700756%);
  width: var(--logo-width, 31.58623751%);
  aspect-ratio: 2.9927;
  -webkit-mask: url(logo.svg) 0 0 / 100% 100% no-repeat;
  mask: url(logo.svg) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--ink);
  --tA: calc(var(--tinsel) * .50);
  --tB: calc(var(--tinsel) * .34);
  --sweepA: calc(var(--shine) * .55);
  --sparkA: calc(var(--shine) * .50);
  background-image:
    radial-gradient(130% 260% at var(--myjak-mx) var(--myjak-my),
      rgba(var(--glint),var(--sparkA)) 0%, rgba(var(--glint),0) 52%),
    linear-gradient(104deg,
      rgba(var(--glint),0) 36%, rgba(var(--glint),var(--sweepA)) 50%, rgba(var(--glint),0) 64%),
    repeating-linear-gradient(101deg,
      rgba(var(--glint),0) 0 24%, rgba(var(--glint),var(--tA)) 50%, rgba(var(--glint),0) 76% 100%),
    repeating-linear-gradient(94deg,
      rgba(var(--glint),0) 0 20%, rgba(var(--glint),var(--tB)) 50%, rgba(var(--glint),0) 80% 100%),
    linear-gradient(104deg,var(--t1) 0%,var(--t2) 38%,var(--t3) 62%,var(--t2) 86%,var(--t1) 100%);
  background-size: 100% 100%, 240% 100%, .58% 150%, 1.07% 150%, 100% 100%;
  background-repeat: no-repeat,no-repeat,repeat,repeat,no-repeat;
  background-position: 0 0, -150% 0, 0 0, 0 0, 0 0;
  animation: myjak-calima-reflet var(--speed) linear infinite;
  transition: --myjak-mx .18s linear, --myjak-my .18s linear;
}

@keyframes myjak-calima-reflet {
  0% { background-position: 0 0, -150% 0, 0 0, 0 0, 0 0; }
  56% { background-position: 0 0, -150% 0, 56% 0, -56% 0, 0 0; }
  100% { background-position: 0 0, 250% 0, 100% 0, -100% 0, 0 0; }
}

.myjak-calima__rock {
  -webkit-mask: url(rock-mask-crete.png) 0 0 / 100% 100% no-repeat;
  mask: url(rock-mask-crete.png) 0 0 / 100% 100% no-repeat;
}

.myjak-calima[data-motion-paused] .myjak-calima__mark { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .myjak-calima { --myjak-mx: 34%; --myjak-my: 38%; }
  .myjak-calima__mark { animation: none; transition: none; }
}