/*
 * deltaloop-marketing - waitlist modal.
 *
 * Pairs with template-parts/waitlist-modal.php and
 * assets/js/waitlist.js. References tokens from
 * assets/css/tokens.css. Loaded globally so any page can
 * trigger the modal.
 */

/* The HTML `hidden` attribute is normally `display: none` from the
   user-agent stylesheet, but our `.dl-waitlist-form` and
   `.dl-waitlist-success` rules below set `display: flex`, which
   wins on specificity and re-shows the elements. Force-hide them
   when `hidden` is present so the success block stays out of view
   until JS swaps states on submit. */
.dl-waitlist-form[hidden],
.dl-waitlist-intake[hidden],
.dl-waitlist-success[hidden] {
    display: none !important;
}

/* ── Backdrop + container ──────────────────────────────── */

.dl-waitlist {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--ease-expo);
}

.dl-waitlist[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

body.dl-waitlist-open {
    overflow: hidden;
}

.dl-waitlist-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 13, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ── Card ──────────────────────────────────────────────── */

.dl-waitlist-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--surface-paper);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-lg);
    padding: 36px 32px 28px;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px var(--hairline-accent);
    transform: translateY(8px) scale(0.98);
    transition: transform 380ms var(--ease-expo);
}

.dl-waitlist[aria-hidden="false"] .dl-waitlist-card {
    transform: translateY(0) scale(1);
}

/* Subtle inner gradient sheen so the card feels lit */
.dl-waitlist-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(20, 227, 156, 0.08), transparent 60%);
    pointer-events: none;
}

.dl-waitlist-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--outline);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        color var(--duration-fast) var(--ease-expo),
        background var(--duration-fast) var(--ease-expo);
}

.dl-waitlist-close:hover,
.dl-waitlist-close:focus-visible {
    color: var(--text-heading);
    background: var(--surface-container);
    outline: none;
}

.dl-waitlist-eyebrow {
    display: block;
    color: var(--primary);
    margin-bottom: 12px;
    position: relative;
}

.dl-waitlist-heading {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-heading);
    position: relative;
    text-wrap: balance;
}

.dl-waitlist-helper {
    margin: 0 0 24px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface-variant);
    position: relative;
    text-wrap: pretty;
}

/* ── Form ──────────────────────────────────────────────── */

.dl-waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.dl-waitlist-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-waitlist-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.dl-waitlist-field input {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-heading);
    background: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition:
        border-color var(--duration-fast) var(--ease-expo),
        background var(--duration-fast) var(--ease-expo),
        box-shadow var(--duration-fast) var(--ease-expo);
}

.dl-waitlist-field input::placeholder {
    color: var(--outline);
}

.dl-waitlist-field input:hover {
    border-color: var(--hairline-strong);
}

.dl-waitlist-field input:focus-visible {
    border-color: var(--primary-container);
    background: var(--surface-container-low);
    outline: none;
    box-shadow: 0 0 0 3px var(--hairline-accent);
}

.dl-waitlist-field input[aria-invalid="true"] {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.18);
}

/* Honeypot - visually invisible, focus-invisible, retains
   form submission semantics for bots. */
.dl-waitlist-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 1px;
    width: 1px;
}

/* ── Status banner (success / error inline) ────────────── */

.dl-waitlist-status {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
}

.dl-waitlist-status[data-state="error"] {
    color: var(--error);
    background: rgba(255, 180, 171, 0.08);
    border-color: var(--error);
}

.dl-waitlist-status[data-state="ok"] {
    color: var(--primary);
    background: rgba(20, 227, 156, 0.08);
    border-color: var(--hairline-accent);
}

/* ── Actions ───────────────────────────────────────────── */

.dl-waitlist-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
}

.dl-waitlist-cancel {
    background: none;
    border: 0;
    color: var(--outline);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 4px;
    transition: color var(--duration-fast) var(--ease-expo);
}

.dl-waitlist-cancel:hover,
.dl-waitlist-cancel:focus-visible {
    color: var(--text-heading);
    outline: none;
}

.dl-waitlist-submit {
    /* extends .cta-gradient - the green-pill shared button */
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--on-primary-container);
}

.dl-waitlist-submit[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.dl-waitlist-submit-arrow {
    transition: transform var(--duration-fast) var(--ease-expo);
}

.dl-waitlist-submit:hover:not([disabled]) .dl-waitlist-submit-arrow {
    transform: translateX(3px);
}

/* Spinner shown while submitting */
.dl-waitlist-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    animation: dl-waitlist-spin 700ms linear infinite;
}

.dl-waitlist[data-state="submitting"] .dl-waitlist-spinner {
    display: inline-block;
}

.dl-waitlist[data-state="submitting"] .dl-waitlist-submit-label,
.dl-waitlist[data-state="submitting"] .dl-waitlist-submit-arrow {
    opacity: 0.6;
}

@keyframes dl-waitlist-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Mobile ────────────────────────────────────────────── */

@media (max-width: 480px) {
    .dl-waitlist {
        padding: 16px;
        align-items: flex-end;
    }
    .dl-waitlist-card {
        padding: 28px 22px 22px;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
    }
    .dl-waitlist-heading {
        font-size: 24px;
    }
    .dl-waitlist-helper {
        font-size: 14px;
    }
    .dl-waitlist-actions {
        margin-top: 4px;
    }
}

/* ── Success state ─────────────────────────────────────── */

.dl-waitlist-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 4px 0;
    position: relative;
}

.dl-waitlist-success-ring {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: var(--on-primary-container);
    box-shadow:
        0 0 0 1px var(--hairline-accent),
        0 0 32px -4px rgba(20, 227, 156, 0.45),
        0 12px 28px -12px rgba(20, 227, 156, 0.55);
    margin-bottom: 18px;
    transform: scale(0);
    opacity: 0;
}

.dl-waitlist[data-state="success"] .dl-waitlist-success-ring {
    animation: dl-waitlist-pop 600ms var(--ease-expo) 80ms both;
}

.dl-waitlist-success-eyebrow {
    color: var(--primary);
    margin-bottom: 10px;
}

.dl-waitlist-success-heading {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-heading);
    text-wrap: balance;
}

.dl-waitlist-success-helper {
    margin: 0 0 26px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface-variant);
    max-width: 380px;
    text-wrap: pretty;
}

.dl-waitlist-done {
    height: 40px;
    padding: 0 24px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--on-primary-container);
}

@keyframes dl-waitlist-pop {
    0% {
        transform: scale(0) rotate(-12deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.12) rotate(4deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* When success is showing, the heading gradient bleed at the top
   of the card looks redundant - soften it. */
.dl-waitlist[data-state="success"] .dl-waitlist-card::before {
    opacity: 0.4;
}

/* ── Confetti ──────────────────────────────────────────── */

.dl-waitlist-confetti {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    overflow: visible;
}

.dl-waitlist-confetti span {
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    border-radius: 1px;
    opacity: 0;
    will-change: transform, opacity;
}

.dl-waitlist[data-state="success"] .dl-waitlist-confetti span {
    animation: dl-confetti-fall var(--dl-confetti-dur, 2s) cubic-bezier(0.4, 0, 0.6, 1) var(--dl-confetti-delay, 0s) forwards;
}

@keyframes dl-confetti-fall {
    0% {
        transform: translate3d(0, -10px, 0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--dl-confetti-x, 16px), 320px, 0) rotate(720deg);
        opacity: 0;
    }
}

/* Each confetti piece gets a distinct horizontal start, color,
   delay, and drift so the cluster reads as random. */
.dl-waitlist-confetti span:nth-child(1)  { left:  6%; background: #14e39c; --dl-confetti-delay: 0.05s; --dl-confetti-dur: 1.9s; --dl-confetti-x: -28px; }
.dl-waitlist-confetti span:nth-child(2)  { left: 14%; background: #7ef7c5; --dl-confetti-delay: 0.25s; --dl-confetti-dur: 2.2s; --dl-confetti-x:  18px; }
.dl-waitlist-confetti span:nth-child(3)  { left: 22%; background: #6c5ce7; --dl-confetti-delay: 0.10s; --dl-confetti-dur: 1.8s; --dl-confetti-x: -36px; }
.dl-waitlist-confetti span:nth-child(4)  { left: 30%; background: #14e39c; --dl-confetti-delay: 0.40s; --dl-confetti-dur: 2.3s; --dl-confetti-x:  24px; }
.dl-waitlist-confetti span:nth-child(5)  { left: 40%; background: #2dd4bf; --dl-confetti-delay: 0.18s; --dl-confetti-dur: 1.7s; --dl-confetti-x: -20px; }
.dl-waitlist-confetti span:nth-child(6)  { left: 50%; background: #7ef7c5; --dl-confetti-delay: 0.32s; --dl-confetti-dur: 2.0s; --dl-confetti-x:  30px; }
.dl-waitlist-confetti span:nth-child(7)  { left: 60%; background: #14e39c; --dl-confetti-delay: 0.05s; --dl-confetti-dur: 1.85s; --dl-confetti-x: -34px; }
.dl-waitlist-confetti span:nth-child(8)  { left: 70%; background: #6c5ce7; --dl-confetti-delay: 0.45s; --dl-confetti-dur: 2.2s; --dl-confetti-x:  20px; }
.dl-waitlist-confetti span:nth-child(9)  { left: 78%; background: #7ef7c5; --dl-confetti-delay: 0.15s; --dl-confetti-dur: 1.95s; --dl-confetti-x: -26px; }
.dl-waitlist-confetti span:nth-child(10) { left: 86%; background: #14e39c; --dl-confetti-delay: 0.30s; --dl-confetti-dur: 2.1s; --dl-confetti-x:  16px; }
.dl-waitlist-confetti span:nth-child(11) { left: 36%; background: #2dd4bf; --dl-confetti-delay: 0.55s; --dl-confetti-dur: 1.7s; --dl-confetti-x: -18px; }
.dl-waitlist-confetti span:nth-child(12) { left: 64%; background: #14e39c; --dl-confetti-delay: 0.20s; --dl-confetti-dur: 2.0s; --dl-confetti-x:  32px; }
.dl-waitlist-confetti span:nth-child(13) { left: 18%; background: #7ef7c5; --dl-confetti-delay: 0.62s; --dl-confetti-dur: 1.9s; --dl-confetti-x:  22px; }
.dl-waitlist-confetti span:nth-child(14) { left: 82%; background: #6c5ce7; --dl-confetti-delay: 0.50s; --dl-confetti-dur: 2.1s; --dl-confetti-x: -22px; }

@media (prefers-reduced-motion: reduce) {
    .dl-waitlist,
    .dl-waitlist-card,
    .dl-waitlist-submit-arrow,
    .dl-waitlist-spinner,
    .dl-waitlist-success-ring,
    .dl-waitlist-confetti span {
        transition: none !important;
        animation: none !important;
    }
    .dl-waitlist-card,
    .dl-waitlist-success-ring {
        transform: none !important;
        opacity: 1 !important;
    }
    /* Confetti stays invisible under reduced motion */
    .dl-waitlist[data-state="success"] .dl-waitlist-confetti span {
        opacity: 0 !important;
    }
}