/*
 * Natural Kiss — Custom CSS
 * Only what Tailwind CDN cannot express:
 * @keyframes, clip-path, organic blobs, pseudo-elements,
 * complex multi-stop gradients, CSS variables.
 * ─────────────────────────────────────────────────────
 */

/* ── CSS custom properties (referenced in SVG fills + JS) ── */
:root {
  --cream:  #f7efe4;
  --violet: #241246;
  --orange: #ef4a32;
  --rust:   #c94a32;
  --soil:   #0a0604;
  --muted:  #8c8396;
}

/* ── Global text size boost ── */
html { font-size: 17.5px; }

/* Body paragraphs — readable minimum */
p, li {
  font-size: clamp(1rem, 1.05vw, 1.2rem);
}

/* Force minimum on very small clamp values used inline */
[class*="text-[clamp(.8"],
[class*="text-[clamp(.76"],
[class*="text-[clamp(.82"],
[class*="text-[clamp(.84"],
[class*="text-[clamp(.85"] {
  font-size: clamp(.98rem, 1vw, 1.1rem) !important;
}

.nk-lady-signature {
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(36,18,70,.14));
}

.nk-lady-signature--light {
  opacity: .12;
  mix-blend-mode: multiply;
}

.nk-lady-signature--dark {
  opacity: .16;
  filter: brightness(0) invert(1) drop-shadow(0 20px 36px rgba(0,0,0,.22));
}

.nk-soft-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,81,53,.65), transparent);
}

/* ── Keyframes ── */
@keyframes pulse-hint {
  0%,100% { opacity: .36; }
  50%      { opacity: .90; }
}

@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════
   HERO — video overlay + pseudo
════════════════════════════════════ */
.video-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,5,2,.72) 0%, rgba(10,5,2,.48) 22%,
      rgba(10,5,2,.10) 48%, transparent 68%),
    linear-gradient(180deg, rgba(10,5,2,.18) 0%, transparent 14%),
    linear-gradient(160deg, transparent 42%, rgba(200,120,30,.08) 100%);
}

.stamp-circle::before {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  border: .7px solid rgba(255,210,140,.24);
}

.hero-lady-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 18;
  width: clamp(160px, 18vw, 280px);
  opacity: .22;
  filter: brightness(0) invert(1) drop-shadow(0 22px 38px rgba(0,0,0,.24));
}

/* Scroll-hint trailing line */
.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(20px, 3svh, 36px);
  background: linear-gradient(180deg, rgba(255,248,237,.38), transparent);
  animation: pulse-hint 1.8s ease-in-out infinite;
}

/* ════════════════════════════════════
   EDITORIAL — paper texture + borders
════════════════════════════════════ */
.paper-texture {
  background-image:
    radial-gradient(circle at 6% 18%, rgba(239,74,50,.05), transparent 20rem),
    repeating-linear-gradient(92deg, rgba(91,65,36,.022) 0 1px, transparent 1px 22px);
}

.editorial-top-border::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, rgba(239,74,50,.28) 55%, transparent 100%);
  z-index: 10;
}

.ed-lady-line::before {
  content: "";
  position: absolute; left: -18px; top: 15%; bottom: 8%;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--orange) 15%, var(--orange) 85%, transparent 100%);
  opacity: .6;
}

/* ════════════════════════════════════
   SECTION SEPARATORS
════════════════════════════════════ */

/* Cream ↔ cream badge separator */
.nk-sep {
  position: relative;
  background: #f7efe4;
  display: flex;
  align-items: center;
  padding: 0 clamp(2rem, 6vw, 6rem);
  gap: 14px;
  z-index: 5;
  height: 36px;
}
.nk-sep__rule {
  flex: 1;
  height: 1px;
}
.nk-sep__rule--l { background: linear-gradient(90deg, transparent, rgba(231,81,53,.38)); }
.nk-sep__rule--r { background: linear-gradient(90deg, rgba(231,81,53,.38), transparent); }
.nk-sep__badge {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(231,81,53,.32);
  color: #e75135;
  font-size: .7rem;
  background: #f7efe4;
  box-shadow: 0 2px 10px rgba(231,81,53,.1);
}

/* Diagonal SVG wave divider wrapper */
.nk-wave {
  display: block;
  line-height: 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.nk-wave svg { display: block; width: 100%; }

/* ════════════════════════════════════
   MARQUEE — diagonal clip-path
════════════════════════════════════ */
.marquee-clip {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
  margin: -3.2vh 0;
  padding: 5.5vh 0 6.5vh;
}

.marquee-clip::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,248,237,.03) 0 1px, transparent 1px 32px);
  pointer-events: none;
}

.marquee-track {
  animation: marquee-run 36s linear infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }

/* ════════════════════════════════════
   STATS BELT — wave separator
════════════════════════════════════ */
.ssb-texture {
  background-image: repeating-linear-gradient(92deg, rgba(91,65,36,.016) 0 1px, transparent 1px 22px);
}

.ssb-ornament {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  background: var(--cream);
  border-radius: 50%;
  padding: 4px;
}

/* ════════════════════════════════════
   SOULS — collage organic blobs
════════════════════════════════════ */
.sv3-collage-texture {
  background-image: repeating-linear-gradient(92deg, rgba(91,65,36,.016) 0 1px, transparent 1px 22px);
}

/* Organic blob border-radius */
.blob-main  { border-radius: 22px 22px 14px 58px / 16px 16px 52px 24px; }
.blob-field { border-radius: 22px 22px 56px 10px / 16px 16px 44px 12px; }

/* Photo hover */
.sv3-ph img {
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
  filter: saturate(.92);
}
.sv3-ph:hover img { transform: scale(1.04); filter: saturate(1); }

/* Handwritten arrows via pseudo */
.hw-arrow-down::after {
  content: "↙";
  display: block;
  font-size: 1.4em;
  margin-top: .1em;
  opacity: .55;
  line-height: 1;
}

.hw-arrow-up::before {
  content: "↙";
  display: block;
  font-size: 1.3em;
  opacity: .55;
  line-height: 1;
  margin-bottom: .15em;
}

/* ════════════════════════════════════
   TEXTURES — Terre Noire & Pierre
   Demande client v1.1 : textures plus perceptibles
   S'applique via background-image sur les sections
   (background-color Tailwind reste intact)
════════════════════════════════════ */

/* Pierre — sections claires bg-[#f7efe4] */
.texture-stone {
  background-image:
    repeating-linear-gradient(132deg, rgba(91,55,20,.14)  0 1px, transparent 1px 62px),
    repeating-linear-gradient( 44deg, rgba(120,75,30,.12) 0 1px, transparent 1px 44px),
    repeating-linear-gradient( 89deg, rgba(160,110,50,.09) 0 1px, transparent 1px 20px),
    radial-gradient(ellipse at 10% 50%, rgba(155,110,55,.20) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 20%, rgba(185,140,75,.16) 0%, transparent 24%),
    radial-gradient(ellipse at 50% 88%, rgba(125,90,40,.18) 0%, transparent 20%),
    radial-gradient(ellipse at 70% 55%, rgba(200,160,90,.12) 0%, transparent 18%),
    radial-gradient(ellipse at 30% 15%, rgba(140,100,50,.10) 0%, transparent 22%),
    repeating-linear-gradient(4deg, rgba(91,55,20,.06) 0 1px, transparent 1px 9px);
}

/* Terre noire — sections sombres bg-nk-soil / bg-[#1b0d2a] / bg-[#241246] */
.texture-soil {
  background-image:
    radial-gradient(ellipse at  8% 28%, rgba(190,110,35,.28) 0%, transparent 28%),
    radial-gradient(ellipse at 90% 70%, rgba(160, 85,22,.22) 0%, transparent 24%),
    radial-gradient(ellipse at 50%  5%, rgba(210,140,55,.20) 0%, transparent 36%),
    radial-gradient(ellipse at 28% 92%, rgba(140, 70,18,.24) 0%, transparent 26%),
    radial-gradient(ellipse at 72% 40%, rgba(175,100,30,.18) 0%, transparent 20%),
    radial-gradient(ellipse at 15% 65%, rgba(200,120,40,.16) 0%, transparent 22%),
    repeating-linear-gradient( 48deg, rgba(230,160,65,.08) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(131deg, rgba(190,115,35,.06) 0 1px, transparent 1px 16px),
    repeating-linear-gradient( 92deg, rgba(255,205,110,.04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(  3deg, rgba(230,175, 85,.035) 0 1px, transparent 1px 7px);
}

/* ── SLIDESHOWS CSS ── */
@keyframes nk-souls-fade {
  0%    { opacity: 1; }
  18%   { opacity: 1; }
  22%   { opacity: 0; }
  98%   { opacity: 0; }
  100%  { opacity: 1; }
}
.nk-souls-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: nk-souls-fade 30s infinite;
}
.nk-souls-slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.nk-souls-slide:nth-child(2) { animation-delay: 6s; }
.nk-souls-slide:nth-child(3) { animation-delay: 12s; }
.nk-souls-slide:nth-child(4) { animation-delay: 18s; }
.nk-souls-slide:nth-child(5) { animation-delay: 24s; }

@keyframes nk-vision-fade {
  0%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; }
  98%  { opacity: 0; }
  100% { opacity: 1; }
}
.nk-vision-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: nk-vision-fade 20s infinite;
}
.nk-vision-slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.nk-vision-slide:nth-child(2) { animation-delay: 5s; }
.nk-vision-slide:nth-child(3) { animation-delay: 10s; }
.nk-vision-slide:nth-child(4) { animation-delay: 15s; }

@media (max-width: 767px) {
  .hero-lady-mark {
    right: 1.25rem;
    bottom: 5.5rem;
    width: 78px;
    opacity: .18;
  }

  .nk-lady-signature--light,
  .nk-lady-signature--dark {
    opacity: .08;
  }
}