/* Host How It Works — 7-step animated onboarding modal */

.hiw-host-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiw-host-modal.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hiw-host-card {
    position: relative !important;
    overflow: hidden !important;
    width: 440px;
    max-width: min(440px, calc(100vw - 32px));
    height: 560px;
    background: var(--cream, #ede6dc) !important;
    border: 0px !important;
    border-radius: 0px !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
    font-family: 'Nanum Myeongjo', Georgia, serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 14px, 0) scale(0.96);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiw-host-modal.is-open .hiw-host-card {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
}

.hiw-host-close {
    position: absolute;
    top: clamp(18px, 2.5vw, 26px);
    right: clamp(18px, 3vw, 36px);
    width: clamp(36px, 4.5vw, 42px);
    height: clamp(36px, 4.5vw, 42px);
    display: grid;
    place-items: center;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent;
    color: var(--hzl-maroon, #561023);
    font: 400 clamp(1.1rem, 2vw, 1.35rem)/1 var(--font-mono);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
    z-index: 2;
}

.hiw-host-close:hover {
    border: 0px !important;
    background: transparent !important;
    color: var(--coral, #e45558) !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

.hiw-host-vignette {
    position: relative;
    flex: 0 0 360px;
    height: 360px;
    margin: 24px 16px 8px;
    background: #f5f0e8;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(86, 16, 35, 0.08);
    text-align: left;
}

.hiw-host-step-panel {
    display: none;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
}

/* Steps 2–7: inset content so it never touches the lighter vignette edges.
   Absolute inset:0 ignores parent padding, so the inset must live on the panel. */
.hiw-host-step-panel[data-hiw-step]:not([data-hiw-step="1"]) {
    inset: 16px;
}

.hiw-host-step-panel.is-active {
    display: block;
}

.hiw-host-caption {
    margin: 12px 20px 4px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1e1e1e;
    text-align: center;
    height: 4.5em;
    flex: 0 0 4.5em;
}

.hiw-host-surface {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(86, 16, 35, 0.1);
    padding: 12px;
    box-sizing: border-box;
}

.hiw-host-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 18px 0 14px;
    flex: 0 0 auto;
}

.hiw-host-dot {
    width: 6px;
    height: 6px;
    border-radius: 0px;
    background: rgba(86, 16, 35, 0.2);
    flex-shrink: 0;
}

.hiw-host-dot.is-active {
    width: 18px;
    border-radius: 0px;
    background: #e45558;
}

.hiw-host-nav {
    position: absolute;
    bottom: 14px;
    top: auto;
    transform: none;
    width: 36px;
    height: 36px;
    border-radius: 0px !important;
    border: 1.5px solid var(--maroon, #561023);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hiw-host-nav--prev {
    left: 16px;
    right: auto;
    background: #ffffff;
    box-shadow: 2px 2px 0 0 var(--maroon, #561023);
    color: var(--maroon, #561023);
}

.hiw-host-nav--prev:hover {
    background: color-mix(in oklab, var(--maroon, #561023) 8%, #ffffff);
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 0 var(--maroon, #561023);
}

.hiw-host-nav--next {
    right: 16px;
    left: auto;
    background: var(--maroon, #561023);
    box-shadow: 2px 2px 0 0 var(--maroon-deep, #3f0c1a);
    color: #ede6dc;
}

.hiw-host-nav--next:hover {
    background: #3f0c1a;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 0 var(--coral, #e45558);
}

.hiw-host-nav--done {
    right: 16px;
    left: auto;
    background: var(--forest, #194234);
    border-color: var(--maroon, #561023);
    box-shadow: 2px 2px 0 0 var(--maroon, #561023);
    color: #ede6dc;
    font-size: 0.95rem;
    font-weight: 700;
}

.hiw-host-nav--done:hover {
    background: #0d2a20;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 0 var(--coral, #e45558);
}

.hiw-host-nav.is-hidden {
    display: none;
}

.hiw-host-intro-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    animation: hiw-float 7s ease-in-out infinite;
}

.hiw-host-hero-placeholder {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #ddd4c8, #ddd4c8 8px, #e7ded2 8px, #e7ded2 16px);
    filter: grayscale(1);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
}

.hiw-host-stripe {
    background: repeating-linear-gradient(135deg, #ddd4c8, #ddd4c8 5px, #e7ded2 5px, #e7ded2 10px);
    filter: grayscale(1);
}

.hiw-host-stripe-lg {
    background: repeating-linear-gradient(135deg, #ddd4c8, #ddd4c8 6px, #e7ded2 6px, #e7ded2 12px);
    filter: grayscale(1);
}

.hiw-host-stripe-cover {
    background: repeating-linear-gradient(135deg, #ddd4c8, #ddd4c8 7px, #e7ded2 7px, #e7ded2 14px);
    filter: grayscale(1);
}

.hiw-host-thumb {
    object-fit: cover;
    object-position: center;
    filter: grayscale(1);
    display: block;
    flex-shrink: 0;
}

.hiw-host-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1);
}

@keyframes hiw-caret {
    0%, 100% { border-right-color: #e45558; }
    50% { border-right-color: transparent; }
}

@keyframes hiw-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@keyframes s2-r1 {
    0%, 5% { opacity: 0; transform: translateX(-14px); }
    15%, 100% { opacity: 1; transform: none; }
}

@keyframes s2-r2 {
    0%, 17% { opacity: 0; transform: translateX(-14px); }
    27%, 100% { opacity: 1; transform: none; }
}

@keyframes s2-r3 {
    0%, 29% { opacity: 0; transform: translateX(-14px); }
    39%, 100% { opacity: 1; transform: none; }
}

@keyframes s3-fabFade {
    0%, 20% { opacity: 1; }
    26%, 100% { opacity: 0; }
}

@keyframes s3-fabPulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.08); }
    16% { transform: scale(0.9); }
    24%, 100% { transform: scale(1); }
}

@keyframes s3-panelFade {
    0%, 24% { opacity: 0; }
    30%, 100% { opacity: 1; }
}

@keyframes s3-name {
    0%, 32% { width: 0; }
    48%, 100% { width: var(--w); }
}

@keyframes s3-pill {
    0%, 55% {
        background: transparent;
        color: #561023;
        box-shadow: inset 0 0 0 1.5px rgba(86, 16, 35, 0.35);
    }
    60%, 100% {
        background: #e45558;
        color: #fff;
        box-shadow: none;
    }
}

@keyframes hiw-formFade {
    0%, 49% { opacity: 1; }
    55%, 100% { opacity: 0; }
}

@keyframes hiw-urlType {
    0%, 3% { width: 0; }
    20%, 100% { width: var(--w); }
}

@keyframes hiw-press {
    0%, 27% { transform: none; box-shadow: none; background: #e45558; }
    31% { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #3f0c1a; background: #561023; }
    36%, 100% { transform: none; box-shadow: none; background: #e45558; }
}

@keyframes hiw-load {
    0%, 38% { width: 0; opacity: 0; }
    39% { width: 0; opacity: 1; }
    50% { width: 100%; opacity: 1; }
    53%, 100% { opacity: 0; }
}

@keyframes hiw-cardIn {
    0%, 52% { opacity: 0; transform: translateY(16px) scale(0.95); }
    61%, 100% { opacity: 1; transform: none; }
}

@keyframes hiw-tagIn {
    0%, 63% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    71%, 100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@keyframes cf-img {
    0%, 4% { opacity: 0; }
    12%, 100% { opacity: 1; }
}

@keyframes cf-name {
    0%, 16% { width: 0; }
    32%, 100% { width: var(--w); }
}

@keyframes cf-amt {
    0%, 36% { opacity: 0; transform: translateY(6px); }
    44%, 100% { opacity: 1; transform: none; }
}

@keyframes cf-note {
    0%, 48% { opacity: 0; transform: translateY(6px); }
    56%, 100% { opacity: 1; transform: none; }
}

@keyframes cf-tag {
    0%, 64% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    72%, 100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@keyframes s5-bubble {
    0%, 4% { opacity: 0; transform: translateY(10px) scale(0.96); }
    14%, 100% { opacity: 1; transform: none; }
}

@keyframes s5-linkchip {
    0%, 16% { opacity: 0; transform: translateY(6px); }
    24%, 100% { opacity: 1; transform: none; }
}

@keyframes s5-sent {
    0%, 28% { opacity: 0; }
    36%, 100% { opacity: 1; }
}

@keyframes s6-n1 {
    0%, 10% { opacity: 0; transform: translateY(12px); }
    22%, 100% { opacity: 1; transform: none; }
}

@keyframes s6-n2 {
    0%, 22% { opacity: 0; transform: translateY(12px); }
    34%, 100% { opacity: 1; transform: none; }
}

@keyframes s6-n3 {
    0%, 34% { opacity: 0; transform: translateY(12px); }
    46%, 100% { opacity: 1; transform: none; }
}

@keyframes s8-press {
    0%, 50% { box-shadow: inset 0 0 0 1px rgba(86, 16, 35, 0.1); }
    56%, 100% { box-shadow: inset 0 0 0 2px #e45558; }
}

@keyframes s8-note {
    0%, 56% { opacity: 0; transform: translateY(12px) scale(0.96); }
    66%, 100% { opacity: 1; transform: none; }
}

@keyframes s8-cursor {
    0%, 44% { opacity: 0; transform: scale(1); }
    48% { opacity: 1; }
    52% { opacity: 1; transform: scale(0.82); }
    56% { opacity: 1; transform: scale(1); }
    62%, 100% { opacity: 0; }
}

/* Guest flow animations */
@keyframes g2-r1 {
    0%, 5% { opacity: 0; transform: translateX(-14px); }
    15%, 100% { opacity: 1; transform: none; }
}

@keyframes g2-r2 {
    0%, 17% { opacity: 0; transform: translateX(-14px); }
    27%, 100% { opacity: 1; transform: none; }
}

@keyframes g2-r3 {
    0%, 29% { opacity: 0; transform: translateX(-14px); }
    39%, 100% { opacity: 1; transform: none; }
}

@keyframes g3-cursor {
    0%, 26% { opacity: 0; transform: scale(1); }
    30% { opacity: 1; }
    36% { opacity: 1; transform: scale(0.82); }
    42% { opacity: 1; transform: scale(1); }
    50%, 100% { opacity: 0; }
}

@keyframes g3-chips {
    0%, 42% { opacity: 1; }
    48%, 100% { opacity: 0; }
}

@keyframes g3-tag {
    0%, 48% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    58%, 100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@keyframes g4-amt {
    0%, 10% {
        background: transparent;
        color: #561023;
        box-shadow: inset 0 0 0 1.5px rgba(86, 16, 35, 0.3);
    }
    16%, 100% {
        background: #e45558;
        color: #fff;
        box-shadow: none;
    }
}

@keyframes g4-press {
    0%, 40% { transform: none; box-shadow: none; background: #e45558; }
    44% { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #3f0c1a; background: #561023; }
    49%, 100% { transform: none; box-shadow: none; background: #e45558; }
}

@keyframes g4-bar {
    0%, 50% { width: 44%; }
    66%, 100% { width: 78%; }
}

@keyframes g4-pay1 {
    0%, 16% { opacity: 0; transform: translateY(6px); }
    24%, 100% { opacity: 1; transform: none; }
}

@keyframes g4-pay2 {
    0%, 20% { opacity: 0; transform: translateY(6px); }
    28%, 100% { opacity: 1; transform: none; }
}

@keyframes g4-pay3 {
    0%, 24% { opacity: 0; transform: translateY(6px); }
    32%, 100% { opacity: 1; transform: none; }
}

@keyframes g5-type {
    0%, 6% { width: 0; }
    54%, 100% { width: var(--w); }
}

@keyframes g5-tag {
    0%, 62% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    72%, 100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

@keyframes g6-card {
    0%, 10% { opacity: 0; transform: translateY(16px) scale(0.95); }
    22%, 100% { opacity: 1; transform: none; }
}

@keyframes g6-check {
    0%, 20% { opacity: 0; transform: scale(0.4); }
    30% { opacity: 1; transform: scale(1.15); }
    38%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes g6-line1 {
    0%, 34% { opacity: 0; transform: translateY(8px); }
    44%, 100% { opacity: 1; transform: none; }
}

@keyframes g6-line2 {
    0%, 44% { opacity: 0; transform: translateY(8px); }
    54%, 100% { opacity: 1; transform: none; }
}

.hiw-host-last-step-content {
    padding-top: 44px;
}

@media (prefers-reduced-motion: reduce) {
    .hiw-host-modal [style*="animation"],
    .hiw-host-modal .hiw-host-intro-img {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 480px) {
    .hiw-host-modal {
        padding: 16px;
    }

    .hiw-host-card {
        height: min(560px, calc(100dvh - 32px));
    }

    .hiw-host-nav--prev {
        left: 12px;
    }

    .hiw-host-nav--next,
    .hiw-host-nav--done {
        right: 12px;
    }
}