/* Katheeb motifs — pairs with assets/js/dunes.js and dunes-solid.js */

kt-dunes, kt-dunes-solid {
  display: block;
  position: absolute;
  inset: auto 0 0 0;
  height: var(--dunes-height, 46%);
  pointer-events: none;
  overflow: hidden;
}
kt-dunes canvas, kt-dunes-solid canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Dune-shaped reveal: the image rises behind a dune silhouette with the
   logo's sharp crest — a long windward slope up to the peak, a steeper lee. */
.kt-wipe {
  overflow: hidden;
  --wipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cpath d='M0 94 Q20 78 46 72 Q58 86 100 90 L100 200 L0 200 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--wipe);
          mask-image: var(--wipe);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transition: -webkit-mask-position 1.6s var(--ease-settle, cubic-bezier(.16,.84,.34,1)),
              mask-position 1.6s var(--ease-settle, cubic-bezier(.16,.84,.34,1));
}
/* Source photos carry rounded film corners; frames always overscale slightly. */
.kt-wipe img { transform: scale(1.14); transition: transform 2.4s var(--ease-settle, cubic-bezier(.16,.84,.34,1)); }
.kt-wipe.is-in { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.kt-wipe.is-in img { transform: scale(1.05); }
.kt-photo { overflow: hidden; }
.kt-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }

[data-kt-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease-settle, cubic-bezier(.16,.84,.34,1)),
              transform .9s var(--ease-settle, cubic-bezier(.16,.84,.34,1));
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-kt-reveal].is-in { opacity: 1; transform: none; }

/* Film grain for dark cinematic surfaces. */
.kt-grain { position: relative; isolation: isolate; }
.kt-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--grain-opacity, .14);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .kt-wipe, .kt-wipe img, [data-kt-reveal] { transition: none; }
  [data-kt-reveal] { opacity: 1; transform: none; }
}