/* WP4 text-family demo expansion */
.effect-demo-typewriter-caret .effect-phone,
.effect-demo-word-rotate-swap .effect-phone,
.effect-demo-gradient-text-sweep .effect-phone,
.effect-demo-glitch-text-flicker .effect-phone,
.effect-demo-marquee-text-loop .effect-phone {
  width: 168px;
  height: 126px;
  border-width: 5px;
  border-radius: 18px;
}

.demo-typewriter-stage { align-content: center; background: #f3efe7; }
.demo-typewriter-line { position: relative; width: 106px; height: 18px; }
.demo-typewriter-fill { position: absolute; inset: 3px 8px 3px 0; border-radius: 3px; background: var(--ink); transform: scaleX(.08); transform-origin: left; animation: wp4TypewriterFill 3.2s steps(8,end) infinite; }
.demo-typewriter-caret { position: absolute; top: 0; right: 0; width: 3px; height: 18px; background: var(--accent); animation: wp4TypewriterCaret 3.2s steps(8,end) infinite; }
.demo-typewriter-caption { margin-top: 10px; color: #7c786f; font: 700 9px/1 "SF Mono", monospace; letter-spacing: 3px; }

.demo-word-swap-stage { grid-template-columns: auto 48px; gap: 6px; background: #e6ece9; font: 700 15px/22px Outfit, sans-serif; }
.demo-word-swap-prefix { color: #29433b; }
.demo-word-swap-window { position: relative; width: 48px; height: 22px; overflow: hidden; color: var(--accent); }
.demo-word-swap-window i { position: absolute; inset: 0; font-style: normal; opacity: 0; transform: translateY(120%); animation: wp4WordSwap 3.6s ease-in-out infinite; }
.demo-word-swap-window i:nth-child(2) { animation-delay: 1.2s; }
.demo-word-swap-window i:nth-child(3) { animation-delay: 2.4s; }

.demo-gradient-sweep-stage { background: #222b31; }
.demo-gradient-sweep-copy { position: relative; z-index: 1; color: #f6f3ec; font: 800 22px/1 Outfit, sans-serif; letter-spacing: 2px; }
.demo-gradient-sweep-band { position: absolute; width: 34px; height: 78px; border-radius: 50%; background: linear-gradient(90deg, rgba(236,140,83,0), rgba(236,140,83,.95), rgba(94,188,173,.9), rgba(94,188,173,0)); mix-blend-mode: screen; transform: translateX(-94px) skewX(-14deg); animation: wp4GradientSweep 2.8s ease-in-out infinite; }

.demo-glitch-flicker-stage { background: #182026; }
.demo-glitch-flicker-copy { position: absolute; color: #f5f2ea; font: 800 23px/1 "SF Mono", monospace; letter-spacing: 2px; }
.demo-glitch-flicker-copy.base { animation: wp4GlitchBase 2.4s steps(6,end) infinite; }
.demo-glitch-flicker-copy.cyan { color: #50c7bc; opacity: 0; animation: wp4GlitchCyan 2.4s steps(6,end) infinite; }
.demo-glitch-flicker-copy.coral { color: #e57456; opacity: 0; animation: wp4GlitchCoral 2.4s steps(6,end) infinite; }

.demo-marquee-loop-stage { display: block; background: #c96943; }
.demo-marquee-loop-track { position: absolute; top: 38px; display: flex; align-items: center; gap: 12px; width: max-content; color: #fff; font: 800 19px/1 Outfit, sans-serif; letter-spacing: 1px; animation: wp4MarqueeLoop 3.8s linear infinite; }
.demo-marquee-loop-track i { width: 7px; height: 7px; border-radius: 50%; background: #27343a; }

@keyframes wp4TypewriterFill { 0%, 12% { transform: scaleX(.08); opacity: .45; } 68%, 84% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.08); opacity: .45; } }
@keyframes wp4TypewriterCaret { 0%, 12% { transform: translateX(-88px); opacity: 1; } 20% { opacity: .15; } 28% { opacity: 1; } 68%, 84% { transform: translateX(0); opacity: 1; } 92% { opacity: .1; } 100% { transform: translateX(-88px); opacity: 1; } }
@keyframes wp4WordSwap { 0%, 18% { opacity: 0; transform: translateY(120%); } 28%, 50% { opacity: 1; transform: translateY(0); } 60%, 100% { opacity: 0; transform: translateY(-120%); } }
@keyframes wp4GradientSweep { 0%, 12% { transform: translateX(-94px) skewX(-14deg); opacity: 0; } 34% { opacity: 1; } 72% { opacity: .9; } 88%, 100% { transform: translateX(94px) skewX(-14deg); opacity: 0; } }
@keyframes wp4GlitchBase { 0%, 22%, 30%, 72%, 80%, 100% { transform: translate(0); opacity: 1; } 25% { transform: translate(-2px,1px); opacity: .55; } 76% { transform: translate(2px,-1px); opacity: .7; } }
@keyframes wp4GlitchCyan { 0%, 20%, 32%, 70%, 82%, 100% { transform: translate(0); opacity: 0; } 24%, 28% { transform: translate(-4px,-1px); opacity: .8; } 74%, 78% { transform: translate(3px,1px); opacity: .65; } }
@keyframes wp4GlitchCoral { 0%, 21%, 31%, 71%, 81%, 100% { transform: translate(0); opacity: 0; } 25%, 29% { transform: translate(4px,1px); opacity: .75; } 75%, 79% { transform: translate(-3px,-1px); opacity: .7; } }
@keyframes wp4MarqueeLoop { from { transform: translateX(0); } to { transform: translateX(-164px); } }

@media (prefers-reduced-motion: reduce) {
  .effect-demo-typewriter-caret .demo-typewriter-fill,
  .effect-demo-typewriter-caret .demo-typewriter-caret,
  .effect-demo-word-rotate-swap .demo-word-swap-window i,
  .effect-demo-gradient-text-sweep .demo-gradient-sweep-band,
  .effect-demo-glitch-text-flicker .demo-glitch-flicker-copy,
  .effect-demo-marquee-text-loop .demo-marquee-loop-track { animation: none; }
  .effect-demo-typewriter-caret .demo-typewriter-fill { opacity: 1; transform: scaleX(1); }
  .effect-demo-typewriter-caret .demo-typewriter-caret { opacity: 1; transform: none; }
  .effect-demo-word-rotate-swap .demo-word-swap-window i { opacity: 0; transform: none; }
  .effect-demo-word-rotate-swap .demo-word-swap-window i:first-child { opacity: 1; }
  .effect-demo-gradient-text-sweep .demo-gradient-sweep-band { opacity: .8; transform: none; }
  .effect-demo-glitch-text-flicker .demo-glitch-flicker-copy.base { opacity: 1; transform: none; }
  .effect-demo-glitch-text-flicker .demo-glitch-flicker-copy.cyan { opacity: .35; transform: translateX(-2px); }
  .effect-demo-glitch-text-flicker .demo-glitch-flicker-copy.coral { opacity: .35; transform: translateX(2px); }
  .effect-demo-marquee-text-loop .demo-marquee-loop-track { transform: translateX(-42px); }
}