/* ============================================================
   FBS Beauty — Layout: steps, hero, camera, preview,
   upload, processing/scan animations
   ============================================================ */


/* ── Step System ───────────────────────────────────────────── */

.step {
    display: none;
    min-height: 100vh;
    flex-direction: column;
}

.step.active {
    display: flex;
}


/* Results step doesn't need full-height */

#step-results.active {
    min-height: unset;
    display: block;
}


/* ── Step Header ───────────────────────────────────────────── */

.step-header {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    padding-bottom: 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.step-header h2 {
    font-size: 1.1rem;
    margin: 0;
    flex: 1;
    text-align: center;
}


/* ── ══════════════════════════════════════════════════════════
   STEP 1 — HERO
   ══════════════════════════════════════════════════════════ */

#step-hero {
    /* background: linear-gradient(160deg, #c9c9c9 0%, #c4c7c4 50%, #c4c4bd 100%); */
    color: var(--c-white);
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background: white;
    margin: -50px 7px 0 7px;
    min-height: 0;
}

#step-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(182, 205, 177, .15) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(210, 171, 128, .1) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-right: -27%;
}

.hero-brand {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: black;
    opacity: 0.9;
}

#step-hero h1 {
    color: var(--c-white);
    font-style: italic;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    margin-bottom: 30px;
    margin-top: -20px;
}

#step-hero h1 span {
    font-style: normal;
    color: black;
}

.hero-subtitle {
    color: var(--c-sage);
    font-size: 1rem;
    max-width: 380px;
    line-height: 1.7;
}

.hero-features {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-feature {
    border-radius: var(--radius-xl);
    padding: 0.4em 1em;
    color: #000000;
    background: #f3f2ed;
    border: 1px solid #4f4f4f61;
    border-style: solid;
}

.hero-cta-wrap {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#step-hero .btn-primary {
    background-color: #1c8d1c;
    color: white;
    box-shadow: 8px 8px 8px rgb(26 73 3 / 66%);
    letter-spacing: 1.5px;
    font-weight: 600;
    font-size: 1.1rem;
}

#step-hero .btn-primary:hover {
    box-shadow: 2px 2px 2px rgb(26 73 3 / 66%);
    background-color: #229922;
}

.hero-disclaimer {
    font-size: 0.85rem;
    color: black;
    text-align: center;
    padding-bottom: 50px;
}

.import-icon {
    margin-right: 5px;
}

.export-icon {
    margin-right: 5px;
}


/* ── ══════════════════════════════════════════════════════════
   STEP 2 — CAMERA
   ══════════════════════════════════════════════════════════ */

#step-camera {
    background: var(--c-surface);
    flex-direction: column;
}

.camera-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    gap: var(--space-md);
}


/* Live video container */

.video-container {
    position: relative;
    width: 100%;
    max-width: 340px;
    max-height: 60vh;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
}

#camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    /* mirror for selfie */
}

.oval-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.oval-overlay svg {
    width: 100%;
    height: 100%;
}

.btn-capture {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--c-white);
    border: 4px solid var(--c-sage);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-md);
    transition: transform .15s, box-shadow .15s;
}

.btn-capture:hover {
    transform: translateX(-50%) scale(1.08);
}

.btn-capture:active {
    transform: translateX(-50%) scale(0.95);
}


/* Upload fallback */

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: 340px;
}

.upload-card {
    width: 100%;
    background: var(--c-bg);
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}

.upload-card:hover {
    border-color: var(--c-sage-dark);
    background: #f2ede8;
}

.upload-card input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.upload-card p {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin-top: 0.3em;
}

.upload-divider {
    color: var(--c-text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

.upload-divider::before,
.upload-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

.camera-tip {
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--c-border);
}


/* ── ══════════════════════════════════════════════════════════
   STEP 3 — PREVIEW
   ══════════════════════════════════════════════════════════ */

#step-preview {
    background: var(--c-surface);
    flex-direction: column;
}

.preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
}

.preview-img-wrap {
    width: 100%;
    max-width: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 3/4;
    background: #000;
}

#preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-actions {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}


/* ── ══════════════════════════════════════════════════════════
   STEP 4 — PROCESSING / SCANNING
   ══════════════════════════════════════════════════════════ */

#step-processing {
    background: var(--c-primary);
    color: var(--c-white);
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-lg);
}

.scan-wrapper {
    position: relative;
    width: 240px;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

#scan-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 62, 80, .25);
}

.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--c-sage) 30%, #fff 50%, var(--c-sage) 70%, transparent 100%);
    box-shadow: 0 0 16px var(--c-sage), 0 0 40px rgba(182, 205, 177, .5);
    animation: scanLine 2.4s ease-in-out infinite;
    top: 0;
}

@keyframes scanLine {
    0% {
        top: 2%;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        top: 98%;
        opacity: 0;
    }
}

.scan-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-sage);
    transform: translate(-50%, -50%);
    animation: pulseDot 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px var(--c-sage);
}

.scan-dot:nth-child(2) {
    animation-delay: .3s;
}

.scan-dot:nth-child(3) {
    animation-delay: .6s;
}

.scan-dot:nth-child(4) {
    animation-delay: .9s;
}

@keyframes pulseDot {
    0%,
    100% {
        opacity: .3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6);
    }
}

.processing-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    max-width: 340px;
}

.processing-text h2 {
    color: var(--c-white);
    font-size: 1.3rem;
}

.processing-hint {
    color: var(--c-sage);
    font-size: 0.9rem;
    min-height: 1.4em;
    transition: opacity .3s;
}

.progress-track {
    width: 240px;
    height: 4px;
    background: rgba(255, 255, 255, .15);
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--c-sage);
    border-radius: 99px;
    width: 0%;
    transition: width .4s ease;
}


/* ── Desktop Responsive (≥ 768px) — layout-level ────────────── */

@media (min-width: 768px) {
    #app {
        background: none;
    }
    #step-hero {
        padding: var(--space-xxl) var(--space-md);
        background: none;
        min-height: 100vh;
    }
    .camera-area {
        flex-direction: row;
        gap: var(--space-xl);
        justify-content: center;
        align-items: center;
    }
    .video-container {
        max-width: 340px;
    }
    .upload-area {
        max-width: 260px;
    }
}


/* ── Mobile-specific fixes — layout ────────────────────────── */

@media (max-width: 480px) {
    .upload-card {
        padding: var(--space-md) var(--space-sm);
    }
    .hero-content {
        margin-right: 0;
    }
    .hero-feature {
        background: #e9e9e9;
        border: 1px solid #4f4f4f61;
    }
}