/* ═══════════════════════════════════════════════════
   EXTRA — REVEAL WIPE SECTION
   Prefix: dm-rw-*   Scope: .demo-rw-revealwipe
═══════════════════════════════════════════════════ */

.demo-rw-revealwipe {
  background: #0b0b0d;
  color: #f4f4f5;
  padding: 0;
}

/* ───── INTRO ───── */
.demo-rw-revealwipe .dm-rw-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 32px 64px;
  text-align: center;
}
.demo-rw-revealwipe .dm-rw-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a1a1aa;
  background: rgba(255, 255, 255, .06);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.demo-rw-revealwipe .dm-rw-intro h2 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.demo-rw-revealwipe .dm-rw-intro p {
  font-size: 17px;
  line-height: 1.6;
  color: #d4d4d8;
  margin: 0 0 14px;
}
.demo-rw-revealwipe .dm-rw-intro code {
  background: rgba(255, 255, 255, .08);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 14px;
  color: #fde68a;
}
.demo-rw-revealwipe .dm-rw-intro-hint {
  font-size: 14px;
  color: #71717a;
  margin-top: 28px;
}

/* ───── SECTION SHELL ───── */
.demo-rw-revealwipe .dm-rw-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 64px 32px;
}
.demo-rw-revealwipe .dm-rw-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: clip-path;
  transition: clip-path 1.2s cubic-bezier(.7, 0, .3, 1);
}
.demo-rw-revealwipe .dm-rw-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .1));
  pointer-events: none;
  z-index: 1;
}
.demo-rw-revealwipe .dm-rw-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease .35s, transform .9s ease .35s;
}
.demo-rw-revealwipe .dm-rw-section.dm-rw-active .dm-rw-content {
  opacity: 1;
  transform: translateY(0);
}
.demo-rw-revealwipe .dm-rw-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
}
.demo-rw-revealwipe .dm-rw-content h3 {
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.demo-rw-revealwipe .dm-rw-content p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 10px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.demo-rw-revealwipe .dm-rw-content p:first-of-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: rgba(253, 230, 138, .95);
  margin-bottom: 18px;
}

/* ───── 1. HORIZONTAL WIPE ───── */
.demo-rw-revealwipe .dm-rw-horizontal .dm-rw-bg {
  clip-path: inset(0 100% 0 0);
}
.demo-rw-revealwipe .dm-rw-horizontal.dm-rw-active .dm-rw-bg {
  clip-path: inset(0 0 0 0);
}

/* ───── 2. VERTICAL WIPE (bottom → top) ───── */
.demo-rw-revealwipe .dm-rw-vertical .dm-rw-bg {
  clip-path: inset(100% 0 0 0);
}
.demo-rw-revealwipe .dm-rw-vertical.dm-rw-active .dm-rw-bg {
  clip-path: inset(0 0 0 0);
}

/* ───── 3. DIAGONAL POLYGON WIPE ───── */
.demo-rw-revealwipe .dm-rw-diagonal .dm-rw-bg {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.demo-rw-revealwipe .dm-rw-diagonal.dm-rw-active .dm-rw-bg {
  clip-path: polygon(0 0, 100% 0, 130% 100%, 0 100%);
}

/* ───── 4. IRIS / CIRCLE REVEAL ───── */
.demo-rw-revealwipe .dm-rw-iris .dm-rw-bg {
  clip-path: circle(0% at 50% 50%);
}
.demo-rw-revealwipe .dm-rw-iris.dm-rw-active .dm-rw-bg {
  clip-path: circle(85% at 50% 50%);
}

/* ───── 5. SPLIT CURTAIN ─────
   Two halves clipped to left/right; closed = each retracted to its edge
   (clip-path inset hides the other half), open = full half visible.        */
.demo-rw-revealwipe .dm-rw-split .dm-rw-split-half {
  inset: 0;
  background-size: cover;
  transition: clip-path 1.2s cubic-bezier(.7, 0, .3, 1);
}
.demo-rw-revealwipe .dm-rw-split .dm-rw-split-left {
  background-position: left center;
  clip-path: inset(0 100% 0 0); /* closed: collapsed to left edge */
}
.demo-rw-revealwipe .dm-rw-split .dm-rw-split-right {
  background-position: right center;
  clip-path: inset(0 0 0 100%); /* closed: collapsed to right edge */
}
.demo-rw-revealwipe .dm-rw-split.dm-rw-active .dm-rw-split-left {
  clip-path: inset(0 50% 0 0); /* open: covers left half */
}
.demo-rw-revealwipe .dm-rw-split.dm-rw-active .dm-rw-split-right {
  clip-path: inset(0 0 0 50%); /* open: covers right half */
}

/* ───── OUTRO ───── */
.demo-rw-revealwipe .dm-rw-outro {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 32px 96px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.demo-rw-revealwipe .dm-rw-outro h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #fafafa;
}
.demo-rw-revealwipe .dm-rw-outro p {
  font-size: 15px;
  line-height: 1.7;
  color: #a1a1aa;
  margin: 0 0 12px;
}
.demo-rw-revealwipe .dm-rw-outro code {
  background: rgba(255, 255, 255, .08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #fde68a;
}
.demo-rw-revealwipe .dm-rw-outro kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #fafafa;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 640px) {
  .demo-rw-revealwipe .dm-rw-intro {
    padding: 56px 22px 40px;
  }
  .demo-rw-revealwipe .dm-rw-section {
    padding: 48px 22px;
    min-height: 80vh;
  }
  .demo-rw-revealwipe .dm-rw-content h3 {
    font-size: 36px;
  }
  .demo-rw-revealwipe .dm-rw-outro {
    padding: 56px 22px 72px;
  }
}