/* Püron intro — foam + yellow cloth wipe */
.puron-intro {
  --wipe: 0%;
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: all;
  background: #f4fbff;
  font-family: "Syne", "Figtree", sans-serif;
}

.puron-intro.is-done { pointer-events: none; }

.puron-intro__stage {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--wipe));
  will-change: clip-path;
}

.puron-intro__foam {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, #ffffff 0%, #f2faff 40%, #d9f0ff 100%);
  overflow: hidden;
}

/* Dense soap foam texture */
.puron-intro__foam-layer {
  position: absolute;
  inset: -15%;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,1) 0 22px, transparent 23px),
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.98) 0 38px, transparent 40px),
    radial-gradient(circle at 45% 15%, rgba(240,250,255,.95) 0 48px, transparent 50px),
    radial-gradient(circle at 65% 28%, rgba(255,255,255,1) 0 30px, transparent 32px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.96) 0 42px, transparent 44px),
    radial-gradient(circle at 90% 40%, rgba(230,246,255,.95) 0 55px, transparent 57px),
    radial-gradient(circle at 15% 55%, rgba(255,255,255,1) 0 36px, transparent 38px),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,.97) 0 50px, transparent 52px),
    radial-gradient(circle at 55% 50%, rgba(245,252,255,.98) 0 60px, transparent 62px),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,1) 0 34px, transparent 36px),
    radial-gradient(circle at 5% 80%, rgba(255,255,255,.95) 0 45px, transparent 47px),
    radial-gradient(circle at 30% 88%, rgba(236,248,255,.96) 0 58px, transparent 60px),
    radial-gradient(circle at 60% 82%, rgba(255,255,255,1) 0 40px, transparent 42px),
    radial-gradient(circle at 85% 78%, rgba(255,255,255,.97) 0 52px, transparent 54px),
    radial-gradient(circle at 50% 5%, rgba(255,255,255,.9) 0 28px, transparent 30px);
  filter: blur(0.5px);
  animation: foamDrift 3.8s ease-in-out infinite alternate;
}

.puron-intro__foam-layer.alt {
  animation-duration: 5s;
  animation-direction: alternate-reverse;
  opacity: .75;
  transform: scale(1.08) rotate(3deg);
  filter: blur(1.5px);
}

@keyframes foamDrift {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to { transform: translate3d(3%, -3%, 0) scale(1.06); }
}

.puron-intro__bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.puron-intro__bubble {
  position: absolute;
  bottom: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.98), rgba(170,225,255,.4) 42%, rgba(0,180,255,.2) 68%, rgba(255,255,255,.55) 100%);
  box-shadow:
    inset -3px -4px 8px rgba(0,102,204,.14),
    inset 3px 3px 6px rgba(255,255,255,.9),
    0 0 0 1px rgba(255,255,255,.45);
  animation: bubbleRise linear infinite;
  will-change: transform, opacity;
}

@keyframes bubbleRise {
  0% { transform: translate3d(0,0,0) scale(.65); opacity: 0; }
  12% { opacity: .95; }
  75% { opacity: .8; }
  100% { transform: translate3d(var(--dx), -115vh, 0) scale(1.2); opacity: 0; }
}

.puron-intro__brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.puron-intro__brand-mark {
  font-size: clamp(3.2rem, 13vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .95;
  color: #0a2d5c;
  text-shadow: 0 10px 40px rgba(10,45,92,.16);
  opacity: 0;
  transform: translateY(22px) scale(.94);
  animation: brandPop 1s .3s cubic-bezier(.2,.85,.2,1) forwards;
}

.puron-intro__brand-sub {
  margin-top: .85rem;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: clamp(.82rem, 2.1vw, 1.05rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0066cc;
  opacity: 0;
  animation: brandPop .9s .5s cubic-bezier(.2,.85,.2,1) forwards;
}

@keyframes brandPop {
  to { opacity: 1; transform: none; }
}

/* Wet wipe trail behind cloth */
.puron-intro__trail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 70%, rgba(0,212,255,.12) 100%);
  mix-blend-mode: soft-light;
}

.puron-intro__cloth-wrap {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: min(48vw, 390px);
  z-index: 5;
  transform: translate3d(-130%, 0, 0) rotate(-10deg);
  filter: drop-shadow(8px 22px 30px rgba(6,26,56,.35));
  will-change: transform;
}

.puron-intro__cloth {
  position: absolute;
  inset: 0;
  border-radius: 32px 48px 40px 28px / 40px 52px 36px 44px;
  background:
    linear-gradient(118deg,
      #fff3a1 0%,
      #ffe566 14%,
      #ffd400 34%,
      #f0c000 52%,
      #ffcc22 72%,
      #ffe98a 100%);
  overflow: hidden;
  transform: skewY(-3deg);
}

/* fabric weave */
.puron-intro__cloth::before {
  content: "";
  position: absolute;
  inset: 6% 10%;
  border-radius: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(0deg, rgba(180,120,0,.08) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 35%, rgba(160,100,0,.14));
}

/* gloss streak */
.puron-intro__cloth::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 38%;
  height: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: rotate(-20deg);
  animation: clothShine .9s linear infinite;
}

@keyframes clothShine {
  from { transform: translateX(-40%) rotate(-20deg); opacity: .15; }
  to { transform: translateX(40%) rotate(-20deg); opacity: .8; }
}

.puron-intro__cloth-fold {
  position: absolute;
  left: 18%;
  top: 8%;
  bottom: 8%;
  width: 16%;
  background: linear-gradient(90deg, rgba(160,100,0,.18), transparent 60%);
  border-radius: 40%;
  pointer-events: none;
}

.puron-intro__cloth-hand {
  position: absolute;
  right: -4%;
  top: 48%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 32%, #ffd9b5, #e39b6a 55%, #b86a3d);
  box-shadow: inset -5px -5px 10px rgba(0,0,0,.18), 2px 4px 8px rgba(0,0,0,.12);
}

.puron-intro__spark,
.puron-intro__suds {
  position: absolute;
  z-index: 6;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.puron-intro__spark {
  width: 9px;
  height: 9px;
  background: #00d4ff;
  box-shadow: 0 0 14px rgba(0,212,255,.75);
}

.puron-intro__suds {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(190,230,255,.65));
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}

.puron-intro.is-wiping .puron-intro__spark { animation: sparkFly .65s ease-out forwards; }
.puron-intro.is-wiping .puron-intro__suds { animation: sudsPop .75s ease-out forwards; }

@keyframes sparkFly {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.25); }
}
@keyframes sudsPop {
  0% { opacity: 0; transform: scale(.25); }
  30% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.5); }
}

html.puron-intro-active,
html.puron-intro-active body { overflow: hidden; }

@media (max-width: 700px) {
  .puron-intro__cloth-wrap { width: 58vw; }
}

@media (prefers-reduced-motion: reduce) {
  .puron-intro, .puron-intro * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}