/* ── ETP Public Widget Styles ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Share+Tech+Mono&display=swap');

/* ── Base Widget ───────────────────────────────────────── */
.etp-widget {
    font-family: 'Nunito', sans-serif;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    --etp-button-bg: #4f8ef7;
    --etp-button-bg-2: #7c3aed;
    --etp-button-color: #fff;
}
.etp-admin-preview-shell {
    --etp-button-bg: #4f8ef7;
    --etp-button-bg-2: #7c3aed;
    --etp-button-color: #fff;
}

.etp-step { animation: etp-fade-in 0.5s ease both; }
@keyframes etp-fade-in {
    from { opacity:0; transform: translateY(20px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Step 1: Email Form ────────────────────────────────── */
.etp-step-form {
    background: linear-gradient(145deg, #fff 0%, #f7f9ff 100%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    padding: 48px 40px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.8);
}
.etp-form-icon { font-size: 52px; margin-bottom: 16px; animation: etp-bounce 2s infinite; }
@keyframes etp-bounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.etp-form-heading {
    font-size: 26px;
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.2;
}
.etp-form-sub { color: #888; margin: 0 0 28px; font-size: 15px; }

.etp-input-wrap { display: flex; gap: 10px; }
.etp-input-wrap input[type="email"] {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #e0e6f5;
    border-radius: 50px;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
    color: #1a1a2e;
    outline: none;
    transition: border-color 0.2s;
}
.etp-input-wrap input:focus { border-color: #4f8ef7; }

#etp-submit-btn {
    padding: 14px 26px;
    background: linear-gradient(135deg, var(--etp-button-bg), var(--etp-button-bg-2));
    color: var(--etp-button-color);
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(79,142,247,0.4);
}
#etp-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,142,247,0.5); }
#etp-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.etp-error { color: #e53e3e; font-size: 13px; margin-top: 10px; font-weight: 600; }

/* ── Step 2: Timer ─────────────────────────────────────── */
.etp-step-timer {
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.etp-timer-heading { font-size: 22px; font-weight: 800; margin: 0 0 32px; position:relative;z-index:2; }
.etp-timer-container { position:relative; z-index:2; }
.etp-timer-sub { margin: 24px 0 0; font-size: 14px; opacity:0.7; position:relative;z-index:2; }

/* ── SVG Ring Base ─────────────────────────────────────── */
.etp-ring-wrap { position:relative; width:180px; height:180px; }
.etp-ring-wrap svg { width:180px; height:180px; transform: rotate(-90deg); }
.etp-ring-bg { fill:none; stroke-width:10; }
.etp-ring-fg { fill:none; stroke-width:10; stroke-linecap:round; transition: stroke-dashoffset 1s linear; }
.etp-ring-label {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:48px; font-weight:900; line-height:1;
}
.etp-ring-unit { font-size:13px; font-weight:700; opacity:0.6; margin-top:2px; }

/* ════════════════════════════════════════════════════════
   DESIGN 1 — DOG 🐶
════════════════════════════════════════════════════════ */
.etp-design-dog {
    background: linear-gradient(145deg, #fef9e7, #fdebd0);
    box-shadow: 0 20px 60px rgba(253,168,79,0.25);
}
.etp-design-dog .etp-timer-heading { color: #5d3a1a; }
.etp-design-dog .etp-ring-bg { stroke: #f5cba7; }
.etp-design-dog .etp-ring-fg { stroke: #e67e22; }
.etp-design-dog .etp-ring-label { color: #5d3a1a; }
/* Floating paw prints */
.etp-design-dog::before {
    content:'🐾';
    position:absolute; font-size:60px; top:-10px; right:-10px;
    opacity:0.15; animation: etp-float 3s ease-in-out infinite;
}
.etp-design-dog::after {
    content:'🐕';
    position:absolute; font-size:40px; bottom:16px; left:16px;
    opacity:0.2; animation: etp-float 3s ease-in-out infinite reverse;
}
.etp-dog-paws {
    position:absolute; top:0;left:0;right:0;bottom:0;
    pointer-events:none; overflow:hidden; z-index:1;
}
.etp-dog-paw {
    position:absolute; font-size:20px; opacity:0;
    animation: etp-paw-fall 4s ease-in infinite;
}
@keyframes etp-paw-fall {
    0%   { opacity:0; transform:translateY(-20px) rotate(0deg); }
    20%  { opacity:0.4; }
    100% { opacity:0; transform:translateY(300px) rotate(360deg); }
}
@keyframes etp-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ── Extra dog and pet designs ────────────────────────── */
.etp-design-puppy {
    background: linear-gradient(145deg, #ecfff3, #ffe2c2);
    box-shadow: 0 20px 60px rgba(40,180,110,0.22);
}
.etp-design-puppy .etp-timer-heading { color:#24472f; }
.etp-design-puppy .etp-ring-bg { stroke:#bdebc8; }
.etp-design-puppy .etp-ring-fg { stroke:#22a06b; filter:drop-shadow(0 0 6px rgba(34,160,107,0.45)); }
.etp-design-puppy .etp-ring-label { color:#24472f; }
.etp-design-puppy .etp-timer-sub { color:#5d6f47; }
.etp-design-puppy::before {
    content:'🎾';
    position:absolute; font-size:52px; top:18px; left:24px;
    opacity:0.24; animation:etp-pet-bob 2.4s ease-in-out infinite;
}
.etp-design-puppy::after {
    content:'🦴';
    position:absolute; font-size:46px; right:26px; bottom:20px;
    opacity:0.22; animation:etp-pet-wiggle 2.6s steps(5,end) infinite;
}

.etp-design-cat {
    background: linear-gradient(145deg, #f7f0ff, #fff0bd);
    box-shadow: 0 20px 60px rgba(91,95,151,0.22);
}
.etp-design-cat .etp-timer-heading { color:#35244f; }
.etp-design-cat .etp-ring-bg { stroke:#e1d3f4; }
.etp-design-cat .etp-ring-fg { stroke:#7c5fb5; filter:drop-shadow(0 0 6px rgba(124,95,181,0.38)); }
.etp-design-cat .etp-ring-label { color:#35244f; }
.etp-design-cat .etp-timer-sub { color:#765f2a; }
.etp-design-cat::before {
    content:'🧶';
    position:absolute; font-size:54px; right:20px; top:14px;
    opacity:0.25; animation:etp-pet-orbit 3.2s steps(8,end) infinite;
}
.etp-design-cat::after {
    content:'🐾';
    position:absolute; font-size:38px; bottom:24px; left:28px;
    opacity:0.22; animation:etp-pet-pounce 2.8s steps(6,end) infinite;
}

.etp-design-bunny {
    background: linear-gradient(145deg, #fff1f8, #e8ffe0);
    box-shadow: 0 20px 60px rgba(238,122,177,0.2);
}
.etp-design-bunny .etp-timer-heading { color:#3b4b22; }
.etp-design-bunny .etp-ring-bg { stroke:#cdeec5; }
.etp-design-bunny .etp-ring-fg { stroke:#ef6fa8; filter:drop-shadow(0 0 6px rgba(239,111,168,0.35)); }
.etp-design-bunny .etp-ring-label { color:#3b4b22; }
.etp-design-bunny .etp-timer-sub { color:#6d7c48; }
.etp-design-bunny::before {
    content:'🥕';
    position:absolute; font-size:52px; bottom:18px; right:30px;
    opacity:0.24; animation:etp-pet-hop 2.2s steps(5,end) infinite;
}
.etp-design-bunny::after {
    content:'🌿';
    position:absolute; font-size:44px; top:20px; left:26px;
    opacity:0.22; animation:etp-float 3.1s ease-in-out infinite reverse;
}

.etp-design-fish {
    background: linear-gradient(145deg, #e3fbff, #b8f1ff 55%, #ffd6c4);
    box-shadow: 0 20px 60px rgba(0,194,209,0.25);
}
.etp-design-fish .etp-timer-heading { color:#083b4a; }
.etp-design-fish .etp-ring-bg { stroke:rgba(8,59,74,0.14); }
.etp-design-fish .etp-ring-fg { stroke:#00a7c7; filter:drop-shadow(0 0 8px rgba(0,167,199,0.45)); }
.etp-design-fish .etp-ring-label { color:#083b4a; }
.etp-design-fish .etp-timer-sub { color:#326d78; }
.etp-design-fish::before {
    content:'💧';
    position:absolute; font-size:48px; left:28px; bottom:24px;
    opacity:0.25; animation:etp-pet-bubble 2.5s ease-in-out infinite;
}
.etp-design-fish::after {
    content:'🐟';
    position:absolute; font-size:42px; top:22px; right:24px;
    opacity:0.22; animation:etp-pet-swim 3.6s steps(8,end) infinite;
}

.etp-design-bird {
    background: linear-gradient(145deg, #eef8ff, #fff6b7);
    box-shadow: 0 20px 60px rgba(98,182,255,0.25);
}
.etp-design-bird .etp-timer-heading { color:#123457; }
.etp-design-bird .etp-ring-bg { stroke:#cfe8ff; }
.etp-design-bird .etp-ring-fg { stroke:#348bd6; filter:drop-shadow(0 0 7px rgba(52,139,214,0.38)); }
.etp-design-bird .etp-ring-label { color:#123457; }
.etp-design-bird .etp-timer-sub { color:#6b632d; }
.etp-design-bird::before {
    content:'🪶';
    position:absolute; font-size:48px; top:20px; left:28px;
    opacity:0.26; animation:etp-pet-feather 3.4s ease-in-out infinite;
}
.etp-design-bird::after {
    content:'🐦';
    position:absolute; font-size:42px; right:26px; bottom:24px;
    opacity:0.22; animation:etp-pet-flutter 2.5s steps(6,end) infinite;
}

.etp-design-hamster {
    background: linear-gradient(145deg, #fff5df, #d9ffe9);
    box-shadow: 0 20px 60px rgba(246,193,119,0.24);
}
.etp-design-hamster .etp-timer-heading { color:#4c3517; }
.etp-design-hamster .etp-ring-bg { stroke:#ead6aa; }
.etp-design-hamster .etp-ring-fg { stroke:#d38424; filter:drop-shadow(0 0 6px rgba(211,132,36,0.35)); }
.etp-design-hamster .etp-ring-label { color:#4c3517; }
.etp-design-hamster .etp-timer-sub { color:#4d775b; }
.etp-design-hamster::before {
    content:'🛞';
    position:absolute; font-size:56px; right:22px; top:18px;
    opacity:0.24; animation:etp-pet-wheel 1.8s steps(8,end) infinite;
}
.etp-design-hamster::after {
    content:'🌻';
    position:absolute; font-size:42px; left:30px; bottom:24px;
    opacity:0.24; animation:etp-pet-bob 2.6s ease-in-out infinite reverse;
}

.etp-frame-motion {
    position:absolute; inset:0;
    pointer-events:none; overflow:hidden; z-index:1;
}
.etp-frame-pet {
    position:absolute;
    opacity:0;
    text-shadow:0 4px 14px rgba(0,0,0,0.18);
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-timing-function:steps(7,end);
}
.etp-motion-zoomies { animation-name:etp-frame-zoomies; }
.etp-motion-pounce { animation-name:etp-frame-pounce; }
.etp-motion-hop { animation-name:etp-frame-hop; }
.etp-motion-swim { animation-name:etp-frame-swim; }
.etp-motion-flutter { animation-name:etp-frame-flutter; }
.etp-motion-wheel { animation-name:etp-frame-wheel; }

@keyframes etp-frame-zoomies {
    0% { opacity:0; transform:translate(-80px,35px) rotate(-12deg) scale(0.85); }
    12%,78% { opacity:0.72; }
    38% { transform:translate(52px,-22px) rotate(10deg) scale(1.08); }
    72% { transform:translate(132px,18px) rotate(-8deg) scale(0.96); }
    100% { opacity:0; transform:translate(220px,-12px) rotate(16deg) scale(0.8); }
}
@keyframes etp-frame-pounce {
    0% { opacity:0; transform:translate(-24px,38px) scale(0.8); }
    15%,75% { opacity:0.68; }
    35% { transform:translate(26px,-34px) scale(1.12) rotate(-8deg); }
    62% { transform:translate(70px,18px) scale(0.9) rotate(8deg); }
    100% { opacity:0; transform:translate(120px,40px) scale(0.75); }
}
@keyframes etp-frame-hop {
    0% { opacity:0; transform:translateY(34px) scale(0.82); }
    15%,80% { opacity:0.7; }
    30% { transform:translate(24px,-34px) scale(1.08); }
    55% { transform:translate(54px,14px) scale(0.94); }
    78% { transform:translate(84px,-20px) scale(1.04); }
    100% { opacity:0; transform:translate(116px,34px) scale(0.8); }
}
@keyframes etp-frame-swim {
    0% { opacity:0; transform:translate(-120px,18px) scaleX(1); }
    12%,82% { opacity:0.66; }
    36% { transform:translate(-22px,-18px) scaleX(1); }
    58% { transform:translate(52px,16px) scaleX(1); }
    100% { opacity:0; transform:translate(190px,-8px) scaleX(1); }
}
@keyframes etp-frame-flutter {
    0% { opacity:0; transform:translate(-46px,44px) rotate(-10deg) scale(0.75); }
    15%,78% { opacity:0.68; }
    28% { transform:translate(10px,-30px) rotate(14deg) scale(1.06); }
    52% { transform:translate(58px,4px) rotate(-12deg) scale(0.92); }
    100% { opacity:0; transform:translate(130px,-54px) rotate(18deg) scale(0.72); }
}
@keyframes etp-frame-wheel {
    0% { opacity:0; transform:translateY(12px) rotate(0deg) scale(0.85); }
    14%,82% { opacity:0.7; }
    45% { transform:translate(34px,-12px) rotate(360deg) scale(1.08); }
    72% { transform:translate(78px,18px) rotate(640deg) scale(0.95); }
    100% { opacity:0; transform:translate(126px,10px) rotate(900deg) scale(0.8); }
}
@keyframes etp-pet-bob {
    0%,100% { transform:translateY(0) scale(1); }
    50% { transform:translateY(-12px) scale(1.04); }
}
@keyframes etp-pet-wiggle {
    0%,100% { transform:rotate(-10deg); }
    50% { transform:rotate(14deg); }
}
@keyframes etp-pet-orbit {
    0% { transform:rotate(0deg) translateX(8px) rotate(0deg); }
    100% { transform:rotate(360deg) translateX(8px) rotate(-360deg); }
}
@keyframes etp-pet-pounce {
    0%,100% { transform:translate(0,0) rotate(-6deg); }
    50% { transform:translate(18px,-16px) rotate(10deg); }
}
@keyframes etp-pet-hop {
    0%,100% { transform:translateY(0) rotate(-8deg); }
    45% { transform:translateY(-20px) rotate(10deg); }
}
@keyframes etp-pet-bubble {
    0% { opacity:0.1; transform:translateY(10px) scale(0.78); }
    50% { opacity:0.28; transform:translateY(-12px) scale(1); }
    100% { opacity:0.1; transform:translateY(-28px) scale(0.86); }
}
@keyframes etp-pet-swim {
    0%,100% { transform:translateX(0) scaleX(1); }
    50% { transform:translateX(-28px) scaleX(-1); }
}
@keyframes etp-pet-feather {
    0%,100% { transform:translate(0,0) rotate(-12deg); }
    50% { transform:translate(16px,18px) rotate(16deg); }
}
@keyframes etp-pet-flutter {
    0%,100% { transform:translateY(0) rotate(-8deg); }
    50% { transform:translateY(-16px) rotate(12deg); }
}
@keyframes etp-pet-wheel { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════
   DESIGN 2 — ROCKET 🚀
════════════════════════════════════════════════════════ */
.etp-design-rocket {
    background: linear-gradient(145deg, #0f0c29, #302b63);
    box-shadow: 0 20px 60px rgba(15,12,41,0.6);
}
.etp-design-rocket .etp-timer-heading { color: #e0e7ff; }
.etp-design-rocket .etp-ring-bg  { stroke: #302b63; }
.etp-design-rocket .etp-ring-fg  { stroke: url(#rocketGrad); }
.etp-design-rocket .etp-ring-label { color: #fff; }
.etp-design-rocket .etp-timer-sub  { color: #a5b4fc; }
.etp-rocket-stars {
    position:absolute; top:0;left:0;right:0;bottom:0;
    overflow:hidden; pointer-events:none; z-index:1;
}
.etp-rocket-star {
    position:absolute; background:#fff; border-radius:50%;
    animation: etp-twinkle 2s ease-in-out infinite;
}
@keyframes etp-twinkle { 0%,100%{opacity:0.2;} 50%{opacity:1;} }

/* ════════════════════════════════════════════════════════
   DESIGN 3 — FIRE 🔥
════════════════════════════════════════════════════════ */
.etp-design-fire {
    background: linear-gradient(145deg, #1a0600, #3d0f00);
    box-shadow: 0 20px 60px rgba(248,54,0,0.35);
}
.etp-design-fire .etp-timer-heading { color: #fed7aa; }
.etp-design-fire .etp-ring-bg  { stroke: #7f1d1d; }
.etp-design-fire .etp-ring-fg  { stroke: #f97316; filter: drop-shadow(0 0 8px #f97316); }
.etp-design-fire .etp-ring-label { color: #fed7aa; }
.etp-design-fire .etp-timer-sub  { color: #fb923c; }
.etp-fire-particle {
    position:absolute; font-size:24px;
    animation: etp-fire-rise 2s ease-out infinite;
    pointer-events:none; z-index:1;
}
@keyframes etp-fire-rise {
    0%  { opacity:0.8; transform:translateY(0) scale(1); }
    100%{ opacity:0;   transform:translateY(-120px) scale(0.3); }
}

/* ════════════════════════════════════════════════════════
   DESIGN 4 — NEON 💜
════════════════════════════════════════════════════════ */
.etp-design-neon {
    background: #050510;
    box-shadow: 0 20px 60px rgba(200,0,255,0.3);
}
.etp-design-neon .etp-timer-heading { color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
.etp-design-neon .etp-ring-bg  { stroke: #1a001a; }
.etp-design-neon .etp-ring-fg  { stroke: #ff00ff; filter: drop-shadow(0 0 6px #ff00ff); }
.etp-design-neon .etp-ring-label { color: #00ffff; text-shadow: 0 0 10px #00ffff; font-family: 'Share Tech Mono', monospace; }
.etp-design-neon .etp-timer-sub  { color: #ff00ff; }

/* ════════════════════════════════════════════════════════
   DESIGN 5 — RETRO 📺
════════════════════════════════════════════════════════ */
.etp-design-retro {
    background: #0a0a00;
    border: 4px solid #3a3a00;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(0,255,0,0.05);
}
.etp-design-retro .etp-timer-heading { color: #00ff00; font-family: 'Share Tech Mono', monospace; letter-spacing:2px; }
.etp-design-retro .etp-ring-bg  { stroke: #003300; }
.etp-design-retro .etp-ring-fg  { stroke: #00ff00; filter: drop-shadow(0 0 4px #00ff00); }
.etp-design-retro .etp-ring-label { color: #00ff00; font-family: 'Share Tech Mono', monospace; text-shadow:0 0 8px #00ff00; }
.etp-design-retro .etp-timer-sub  { color: #009900; font-family:'Share Tech Mono',monospace; }

/* ════════════════════════════════════════════════════════
   DESIGN 6 — MINIMAL ⬜
════════════════════════════════════════════════════════ */
.etp-design-minimal {
    background: #fff;
    box-shadow: 0 2px 40px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}
.etp-design-minimal .etp-timer-heading { color: #111; font-size:18px; font-weight:600; }
.etp-design-minimal .etp-ring-bg  { stroke: #f0f0f0; }
.etp-design-minimal .etp-ring-fg  { stroke: #111; }
.etp-design-minimal .etp-ring-label { color: #111; font-weight:900; }
.etp-design-minimal .etp-timer-sub  { color: #999; font-size:13px; }

/* ════════════════════════════════════════════════════════
   DESIGN 7 — OCEAN 🌊
════════════════════════════════════════════════════════ */
.etp-design-ocean {
    background: linear-gradient(145deg, #006994, #00b4d8);
    box-shadow: 0 20px 60px rgba(0,180,216,0.35);
}
.etp-design-ocean .etp-timer-heading { color: #fff; }
.etp-design-ocean .etp-ring-bg  { stroke: rgba(255,255,255,0.2); }
.etp-design-ocean .etp-ring-fg  { stroke: #fff; }
.etp-design-ocean .etp-ring-label { color: #fff; }
.etp-design-ocean .etp-timer-sub  { color: rgba(255,255,255,0.75); }
.etp-ocean-wave {
    position:absolute; bottom:0; left:0; right:0; height:60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0,30 C200,60 400,0 600,30 C800,60 1000,0 1200,30 L1200,60 L0,60 Z' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") repeat-x;
    animation: etp-wave 3s linear infinite;
    z-index:1;
}
@keyframes etp-wave { from{background-position:0 0;} to{background-position:1200px 0;} }

/* ════════════════════════════════════════════════════════
   DESIGN 8 — GALAXY 🌌
════════════════════════════════════════════════════════ */
.etp-design-galaxy {
    background: radial-gradient(ellipse at center, #1b0745 0%, #0d0221 100%);
    box-shadow: 0 20px 60px rgba(13,2,33,0.8);
}
.etp-design-galaxy .etp-timer-heading { color: #e9d5ff; }
.etp-design-galaxy .etp-ring-bg  { stroke: #2d1b69; }
.etp-design-galaxy .etp-ring-fg  { stroke: #a78bfa; filter: drop-shadow(0 0 8px #a78bfa); }
.etp-design-galaxy .etp-ring-label { color: #fff; }
.etp-design-galaxy .etp-timer-sub  { color: #a78bfa; }

/* ════════════════════════════════════════════════════════
   DESIGN 9 — HEARTBEAT 💓
════════════════════════════════════════════════════════ */
.etp-design-pulse {
    background: linear-gradient(145deg, #2d0010, #520020);
    box-shadow: 0 20px 60px rgba(255,65,108,0.35);
}
.etp-design-pulse .etp-timer-heading { color: #fecdd3; }
.etp-design-pulse .etp-ring-bg  { stroke: #7f1d1d; }
.etp-design-pulse .etp-ring-fg  { stroke: #ff416c; filter: drop-shadow(0 0 6px #ff416c); }
.etp-design-pulse .etp-ring-label { color: #fecdd3; animation: etp-heartbeat 1s ease-in-out infinite; }
.etp-design-pulse .etp-timer-sub  { color: #fb7185; }
@keyframes etp-heartbeat {
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    14%    { transform:translate(-50%,-50%) scale(1.15); }
    28%    { transform:translate(-50%,-50%) scale(1); }
    42%    { transform:translate(-50%,-50%) scale(1.15); }
}

/* ════════════════════════════════════════════════════════
   DESIGN 10 — MATRIX 🟩
════════════════════════════════════════════════════════ */
.etp-design-matrix {
    background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
}
.etp-design-matrix .etp-timer-heading { color: #00ff41; font-family:'Share Tech Mono',monospace; text-shadow:0 0 8px #00ff41; }
.etp-design-matrix .etp-ring-bg  { stroke: #001400; }
.etp-design-matrix .etp-ring-fg  { stroke: #00ff41; filter: drop-shadow(0 0 6px #00ff41); }
.etp-design-matrix .etp-ring-label { color: #00ff41; font-family:'Share Tech Mono',monospace; text-shadow:0 0 8px #00ff41; }
.etp-design-matrix .etp-timer-sub  { color: #009920; font-family:'Share Tech Mono',monospace; }
.etp-matrix-col {
    position:absolute; top:0; color:#00ff41; font-family:'Share Tech Mono',monospace;
    font-size:14px; opacity:0.15; animation: etp-matrix-fall 4s linear infinite;
    pointer-events:none; z-index:1; white-space:nowrap; line-height:1;
}
@keyframes etp-matrix-fall {
    from { transform: translateY(-100%); opacity:0.3; }
    to   { transform: translateY(400px); opacity:0; }
}

/* ════════════════════════════════════════════════════════
   DESIGN 11 — CLASSIC CLOCK 🕐
════════════════════════════════════════════════════════ */
.etp-design-clock {
    background: linear-gradient(145deg, #f5deb3, #d4a76a);
    box-shadow: 0 20px 60px rgba(139,105,20,0.35);
}
.etp-design-clock .etp-timer-heading { color: #3d2200; }
.etp-design-clock .etp-ring-bg  { stroke: rgba(61,34,0,0.15); }
.etp-design-clock .etp-ring-fg  { stroke: #5d3a1a; }
.etp-design-clock .etp-ring-label { color: #3d2200; font-family: Georgia, serif; }
.etp-design-clock .etp-timer-sub  { color: #7d5a20; }

/* ════════════════════════════════════════════════════════
   DESIGN 12 — HOURGLASS ⌛
════════════════════════════════════════════════════════ */
.etp-design-sand {
    background: linear-gradient(145deg, #f0e6d3, #d4b896);
    box-shadow: 0 20px 60px rgba(180,130,80,0.3);
}
.etp-design-sand .etp-timer-heading { color: #5c3317; }
.etp-design-sand .etp-ring-bg  { stroke: rgba(92,51,23,0.15); }
.etp-design-sand .etp-ring-fg  { stroke: #c0762a; }
.etp-design-sand .etp-ring-label { color: #5c3317; font-size:32px; }
.etp-design-sand .etp-timer-sub  { color: #8b5e3c; }

/* ── Antigravity floating particles ───────────────────── */
.etp-antigravity-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 20px;
    animation: etp-antigravity linear forwards;
}
@keyframes etp-antigravity {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(-800px) rotate(720deg) scale(0.3); }
}

/* ── Step 3: Reveal ────────────────────────────────────── */
.etp-step-reveal {
    background: linear-gradient(145deg, #fff 0%, #f0f4ff 100%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    padding: 56px 40px;
    text-align: center;
}
.etp-reveal-inner { animation: etp-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both; }
@keyframes etp-pop {
    from { transform: scale(0.6); opacity:0; }
    to   { transform: scale(1);   opacity:1; }
}
.etp-reveal-icon { font-size:64px; margin-bottom:16px; animation: etp-spin-slow 3s linear infinite; }
@keyframes etp-spin-slow { to{ transform:rotate(360deg); } }
.etp-reveal-inner h2 { font-size:28px; font-weight:900; color:#1a1a2e; margin:0 0 8px; }
.etp-reveal-inner p  { color:#888; margin:0 0 28px; }
.etp-reveal-btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--etp-button-bg), var(--etp-button-bg-2));
    color: var(--etp-button-color) !important;
    text-decoration: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 28px rgba(79,142,247,0.45);
    transition: all 0.2s;
    animation: etp-btn-pulse 2s ease-in-out infinite;
}
.etp-reveal-btn:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 14px 36px rgba(79,142,247,0.55); }
@keyframes etp-btn-pulse {
    0%,100%{ box-shadow:0 8px 28px rgba(79,142,247,0.45); }
    50%    { box-shadow:0 8px 40px rgba(79,142,247,0.7); }
}

.etp-intensity-off .etp-step-timer::before,
.etp-intensity-off .etp-step-timer::after,
.etp-intensity-off .etp-ring-label,
.etp-intensity-off .etp-reveal-icon {
    animation: none !important;
}

@media (max-width: 640px) {
    .etp-step-form,
    .etp-step-timer,
    .etp-step-reveal {
        padding: 36px 22px;
        border-radius: 18px;
    }
    .etp-input-wrap {
        flex-direction: column;
    }
    #etp-submit-btn {
        width: 100%;
    }
}