/* Family Mirror — full-bleed experience that escapes site .content float layout */

:root {
    --fm-ink: #0d1410;
    --fm-panel: #162019;
    --fm-sand: #e8f0e6;
    --fm-brass: #c4a35a;
    --fm-brass-soft: #e2c987;
    --fm-leaf: #5f8f6a;
    --fm-muted: #9aafa0;
    --fm-line: rgba(232, 240, 230, 0.14);
    --fm-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    --fm-dock-h: 108px;
    --fm-header-offset: 64px;
}

body.fm-page {
    background: var(--fm-ink) !important;
    overflow-x: hidden;
}

body.fm-page .back-to-top {
    display: none !important;
}

.fm-app,
.fm-app * {
    box-sizing: border-box;
}

.fm-app {
    position: relative;
    clear: both;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: calc(var(--fm-header-offset) + 12px) 0 calc(var(--fm-dock-h) + 28px);
    background: var(--fm-ink);
    color: var(--fm-sand);
    font-family: "IBM Plex Sans Arabic", "Cairo", Tahoma, sans-serif;
    overflow: hidden;
}

.fm-app__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 90% -5%, rgba(196, 163, 90, 0.16), transparent 55%),
        radial-gradient(700px 380px at 0% 30%, rgba(95, 143, 106, 0.18), transparent 50%),
        linear-gradient(180deg, #101916 0%, var(--fm-ink) 48%, #0a100d 100%);
}

.fm-app__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fm-shell {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    margin: 0 auto;
    padding: 0 16px;
}

.fm-top {
    text-align: center;
    margin-bottom: 12px;
    animation: fm-rise 0.55s ease both;
}

.fm-top__kicker {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fm-brass-soft);
}

.fm-top h1 {
    margin: 0 !important;
    font-family: "Cairo", sans-serif;
    font-size: clamp(24px, 6vw, 32px) !important;
    font-weight: 800;
    line-height: 1.25;
    color: var(--fm-sand) !important;
}

.fm-top__tagline {
    margin: 6px 0 0;
    color: var(--fm-muted);
    font-size: 15px;
}

.fm-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    animation: fm-rise 0.6s 0.05s ease both;
}

.fm-steps__item {
    position: relative;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(232, 240, 230, 0.05);
    border: 1px solid transparent;
    color: var(--fm-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}

.fm-steps__item.is-active {
    color: var(--fm-sand);
    border-color: rgba(196, 163, 90, 0.45);
    background: rgba(196, 163, 90, 0.12);
}

.fm-steps__item.is-done {
    color: var(--fm-leaf);
    border-color: rgba(95, 143, 106, 0.35);
}

.fm-stage {
    margin-bottom: 10px;
    animation: fm-rise 0.65s 0.08s ease both;
}

.fm-stage__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: min(58vh, calc(100vh - var(--fm-header-offset) - 260px));
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: #070a08;
    box-shadow: var(--fm-shadow), inset 0 0 0 1px var(--fm-line);
}

@supports (height: 100dvh) {
    .fm-stage__frame {
        max-height: min(58dvh, calc(100dvh - var(--fm-header-offset) - 260px));
    }
}

.fm-stage__media,
.fm-stage__canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block !important;
}

.fm-stage__media[hidden],
.fm-stage__canvas[hidden],
.fm-stage__preview[hidden],
.fm-stage__placeholder[hidden],
.fm-stage__loader[hidden],
.fm-sheet[hidden] {
    display: none !important;
}

#fm-video:not([hidden]) {
    transform: scaleX(-1);
}

.fm-stage__preview:not([hidden]) {
    transform: none;
}

.fm-stage__placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
    background: linear-gradient(165deg, rgba(22, 32, 25, 0.96), rgba(13, 20, 16, 0.98));
    color: var(--fm-muted);
    font-size: 15px;
    line-height: 1.65;
}

.fm-stage__placeholder p {
    margin: 0;
    max-width: 280px;
    color: var(--fm-muted);
}

.fm-stage__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px dashed rgba(196, 163, 90, 0.55);
    box-shadow: inset 0 0 0 12px rgba(196, 163, 90, 0.08);
    animation: fm-breathe 2.8s ease-in-out infinite;
}

.fm-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.fm-btn--primary {
    background: linear-gradient(135deg, var(--fm-brass-soft), var(--fm-brass));
    color: #1a160c !important;
}

.fm-btn--ghost {
    background: rgba(232, 240, 230, 0.06);
    border-color: var(--fm-line);
    color: var(--fm-sand) !important;
}

.fm-btn:active {
    transform: scale(0.97);
}

.fm-stage__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.42) 100%);
}

.fm-face-guide {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fm-app.is-live .fm-face-guide,
.fm-app.is-scanning .fm-face-guide {
    opacity: 1;
}

.fm-face-guide__ring {
    width: min(68%, 240px);
    aspect-ratio: 4 / 5;
    border-radius: 48% 48% 46% 46%;
    border: 1.5px solid rgba(232, 240, 230, 0.35);
    box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.15);
}

.fm-face-guide__scan {
    position: absolute;
    width: min(68%, 240px);
    aspect-ratio: 4 / 5;
    border-radius: 48% 48% 46% 46%;
    overflow: hidden;
    opacity: 0;
}

.fm-face-guide__scan::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(196, 163, 90, 0.45), transparent);
    animation: fm-scan 1.35s linear infinite;
}

.fm-app.is-scanning .fm-face-guide__scan {
    opacity: 1;
}

.fm-app.is-scanning .fm-face-guide__ring {
    border-color: rgba(196, 163, 90, 0.85);
    box-shadow: 0 0 30px rgba(196, 163, 90, 0.25);
}

.fm-stage__loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(7, 10, 8, 0.62);
    color: var(--fm-sand);
    font-size: 14px;
    font-weight: 600;
}

.fm-stage__spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(232, 240, 230, 0.2);
    border-top-color: var(--fm-brass);
    animation: fm-spin 0.8s linear infinite;
}

.fm-stage__flash {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.fm-app.is-flash .fm-stage__flash {
    animation: fm-flash 0.35s ease;
}

.fm-status {
    min-height: 22px;
    margin: 0 0 8px;
    text-align: center;
    color: var(--fm-brass-soft);
    font-size: 14px;
    font-weight: 500;
}

.fm-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: min(440px, 100%);
    margin: 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, rgba(13, 20, 16, 0.92) 28%, #0d1410);
    animation: fm-rise 0.7s 0.1s ease both;
}

.fm-dock__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--fm-sand);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.fm-dock__side small {
    font-size: 11px;
    color: var(--fm-muted);
    max-width: 88px;
    text-align: center;
    line-height: 1.3;
}

.fm-dock__glyph {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(232, 240, 230, 0.08);
    border: 1px solid var(--fm-line);
    position: relative;
    transition: transform 0.2s ease, background 0.2s ease;
}

.fm-dock__side:hover .fm-dock__glyph,
.fm-dock__side:focus .fm-dock__glyph {
    transform: translateY(-2px);
    background: rgba(196, 163, 90, 0.16);
}

.fm-dock__glyph--camera::before,
.fm-dock__glyph--upload::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
}

.fm-dock__glyph--camera::before {
    width: 18px;
    height: 14px;
    border: 2px solid var(--fm-sand);
    border-radius: 4px;
    box-shadow: 6px -5px 0 -3px var(--fm-sand);
}

.fm-dock__glyph--upload::before {
    width: 14px;
    height: 16px;
    border: 2px solid var(--fm-sand);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 10px 0 -5px var(--fm-sand);
}

.fm-dock__shutter {
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.fm-dock__shutter:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fm-dock__shutter-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--fm-sand);
}

.fm-dock__shutter-core {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--fm-brass-soft), var(--fm-brass));
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.fm-dock__shutter:not(:disabled):active .fm-dock__shutter-core {
    transform: scale(0.9);
}

.fm-dock__shutter:not(:disabled):hover .fm-dock__shutter-ring {
    box-shadow: 0 0 0 6px rgba(196, 163, 90, 0.18);
}

.fm-app.is-live .fm-dock__shutter-core {
    background: linear-gradient(160deg, #f2d9a0, #c4a35a);
}

.fm-sheet {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    padding: 18px 16px 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(232, 240, 230, 0.1), rgba(22, 32, 25, 0.95));
    border: 1px solid var(--fm-line);
    box-shadow: var(--fm-shadow);
}

.fm-sheet.is-open {
    animation: fm-sheet-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fm-sheet__title {
    margin: 0 0 14px !important;
    font-family: "Cairo", sans-serif;
    font-size: 18px !important;
    font-weight: 800;
    color: var(--fm-sand) !important;
}

.fm-sheet__title--match {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-sheet__title--match::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fm-leaf);
    box-shadow: 0 0 0 6px rgba(95, 143, 106, 0.2);
}

.fm-match {
    display: block;
    text-decoration: none !important;
    color: inherit;
    margin-bottom: 18px;
    text-align: center;
    animation: fm-pop 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.fm-match__avatar-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 12px;
}

.fm-match__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--fm-brass);
    box-shadow: 0 0 0 8px rgba(196, 163, 90, 0.12), 0 16px 30px rgba(0, 0, 0, 0.35);
}

.fm-match__score {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--fm-brass);
    color: #1a160c;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.fm-match__meta,
.fm-card__meta {
    color: var(--fm-muted);
    font-size: 13px;
    line-height: 1.45;
}

.fm-match__meta strong,
.fm-card__meta strong {
    display: block;
    color: var(--fm-sand);
    margin-bottom: 2px;
    font-size: 15px;
}

.fm-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.fm-card {
    flex: 0 0 120px;
    scroll-snap-align: start;
    text-decoration: none !important;
    color: inherit;
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: fm-card-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fm-card:nth-child(1) { animation-delay: 0.05s; }
.fm-card:nth-child(2) { animation-delay: 0.12s; }
.fm-card:nth-child(3) { animation-delay: 0.19s; }
.fm-card:nth-child(4) { animation-delay: 0.26s; }
.fm-card:nth-child(5) { animation-delay: 0.33s; }

.fm-card__avatar {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid var(--fm-line);
    background: #243028;
    margin-bottom: 8px;
}

.fm-card__score {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(196, 163, 90, 0.18);
    color: var(--fm-brass-soft);
    font-size: 11px;
    font-weight: 700;
}

.fm-sheet__actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    padding-top: 8px;
}

.fm-disclaimer {
    margin: 18px 0 0;
    text-align: center;
    color: rgba(154, 175, 160, 0.75);
    font-size: 12px;
    line-height: 1.5;
}

/* Sidebar promo */
.family-mirror-promo {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(196, 163, 90, 0.25), transparent 45%),
        linear-gradient(160deg, #162019, #243028);
    border: 1px solid rgba(196, 163, 90, 0.28);
    text-align: center;
    color: #e8f0e6;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.family-mirror-promo h2 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #e8f0e6;
}

.family-mirror-promo p {
    margin: 0 0 12px;
    color: #9aafa0;
    font-size: 13px;
}

.family-mirror-promo a {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e2c987, #c4a35a);
    color: #1a160c !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

@keyframes fm-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fm-breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes fm-scan {
    from { top: -20%; }
    to { top: 100%; }
}

@keyframes fm-flash {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

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

@keyframes fm-sheet-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fm-pop {
    from { opacity: 0; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fm-card-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767px) {
    :root {
        --fm-header-offset: 56px;
        --fm-dock-h: 100px;
    }

    .fm-top h1 {
        font-size: 24px !important;
    }

    .fm-stage__frame {
        border-radius: 22px;
        max-height: min(52vh, calc(100vh - var(--fm-header-offset) - 240px));
    }

    .fm-steps__item {
        font-size: 10px;
        padding: 7px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-stage__icon,
    .fm-face-guide__scan::before,
    .fm-stage__spinner,
    .fm-sheet.is-open,
    .fm-match,
    .fm-card,
    .fm-top,
    .fm-steps,
    .fm-stage,
    .fm-dock {
        animation: none !important;
    }
}