:root {
    --joma-bg: #080705;
    --joma-bg-soft: #12100d;
    --joma-copper: #a8531e;
    --joma-copper-bright: #e59535;
    --joma-gold: #c88b2f;
    --joma-ivory: #efe7da;
    --joma-muted: #93897c;
    --mouse-x: 50%;
    --mouse-y: 50%;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--joma-bg);
}

body.joma-coming-soon {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--joma-bg);
    color: var(--joma-ivory);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.admin-bar .joma-page {
    min-height: calc(100svh - 32px);
}

.joma-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(178, 87, 27, .11), transparent 22rem),
        radial-gradient(circle at 50% 52%, rgba(132, 62, 18, .12), transparent 31rem),
        linear-gradient(180deg, #0c0a07 0%, #080705 60%, #090806 100%);
}

.joma-page::before,
.joma-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.joma-page::before {
    z-index: -3;
    opacity: .42;
    background-image:
        linear-gradient(rgba(212, 145, 47, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 145, 47, .03) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(circle at center, #000 2%, transparent 74%);
    mask-image: radial-gradient(circle at center, #000 2%, transparent 74%);
}

.joma-page::after {
    z-index: 6;
    box-shadow: inset 0 0 180px rgba(0, 0, 0, .72);
}

.joma-noise {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: .075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.joma-ambient {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: -2;
    width: min(68vw, 980px);
    aspect-ratio: 2.6 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(163, 76, 20, .15), rgba(126, 59, 18, .03) 46%, transparent 72%);
    filter: blur(32px);
    animation: jomaAmbient 8s ease-in-out 2.2s infinite alternate;
}

.joma-surface-lines {
    position: absolute;
    z-index: -1;
    inset: auto -4vw -7vh;
    width: 108vw;
    height: 58vh;
    opacity: .19;
    pointer-events: none;
}

.joma-surface-lines path {
    fill: none;
    stroke: rgba(210, 137, 45, .32);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
    animation: jomaDrawSurface 3.4s cubic-bezier(.22, .78, .28, 1) forwards;
}

.joma-surface-lines path:nth-child(1) { animation-delay: 1.2s; }
.joma-surface-lines path:nth-child(2) { animation-delay: 1.35s; }
.joma-surface-lines path:nth-child(3) { animation-delay: 1.5s; }
.joma-surface-lines path:nth-child(4) { animation-delay: 1.65s; }
.joma-surface-lines path:nth-child(5) { animation-delay: 1.8s; }

.joma-topbar,
.joma-footer {
    position: absolute;
    left: clamp(24px, 4vw, 68px);
    right: clamp(24px, 4vw, 68px);
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(239, 231, 218, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.joma-topbar {
    top: clamp(24px, 4vw, 52px);
}

.joma-topbar::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(198, 132, 39, .26), rgba(198, 132, 39, .035) 34%, rgba(198, 132, 39, .035) 66%, rgba(198, 132, 39, .26));
}

.joma-hero {
    position: relative;
    z-index: 4;
    width: min(1120px, calc(100% - 48px));
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(108px, 13vh, 148px) 0 clamp(105px, 12vh, 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.joma-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(30px, 4vh, 46px);
    color: rgba(239, 231, 218, .62);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.joma-status-dot {
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--joma-copper-bright);
    box-shadow: 0 0 12px rgba(229, 149, 53, .75);
}

.joma-status-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(229, 149, 53, .2);
    border-radius: 50%;
    animation: jomaPulse 2.6s ease-out infinite;
}

.joma-logo-stage {
    position: relative;
    width: min(820px, 88vw);
    margin: 0 auto clamp(36px, 5vh, 54px);
}

.joma-logo-halo {
    position: absolute;
    inset: 16% 4%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(190, 92, 24, .2), rgba(190, 92, 24, .045) 48%, transparent 72%);
    filter: blur(28px);
    transform: scale(.88);
    opacity: 0;
    animation: jomaHalo 1.6s ease-out .8s forwards;
}

.joma-logo-frame {
    position: absolute;
    inset: -23% -8%;
    opacity: .18;
    pointer-events: none;
}

.joma-logo-frame svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.joma-logo-frame path {
    fill: none;
    stroke: rgba(209, 137, 45, .34);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: jomaFrame 2.2s cubic-bezier(.2, .8, .2, 1) .55s forwards;
}

.joma-logo-frame path + path {
    stroke: rgba(209, 137, 45, .12);
    animation-delay: .7s;
}

.joma-logo-reveal {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    animation: jomaLogoReveal 1.45s cubic-bezier(.77, 0, .18, 1) .55s forwards;
}

.joma-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(180, 85, 22, .09));
}

.joma-logo-scan {
    position: absolute;
    z-index: 3;
    top: -8%;
    bottom: -8%;
    left: -16%;
    width: 9%;
    opacity: 0;
    transform: skewX(-10deg);
    background: linear-gradient(90deg, transparent, rgba(255, 180, 71, .38), rgba(255, 224, 167, .74), rgba(255, 180, 71, .3), transparent);
    filter: blur(5px);
    animation: jomaScan 1.25s cubic-bezier(.2, .7, .25, 1) .62s forwards;
    pointer-events: none;
}

.joma-copy {
    max-width: 900px;
}

.joma-section-label {
    margin: 0 0 15px;
    color: var(--joma-copper-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.joma-title {
    margin: 0;
    color: var(--joma-ivory);
    font-size: clamp(36px, 5.2vw, 72px);
    font-weight: 620;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.joma-title-line {
    display: block;
    overflow: hidden;
    padding: .04em 0;
}

.joma-title-line > span {
    display: block;
    transform: translateY(112%);
    animation: jomaTitleUp .95s cubic-bezier(.2, .72, .24, 1) 1.65s forwards;
}

.joma-title-line + .joma-title-line > span {
    animation-delay: 1.78s;
}

.joma-description {
    margin: 24px auto 0;
    color: var(--joma-muted);
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.75;
    letter-spacing: .012em;
}

.joma-footer {
    bottom: clamp(22px, 3.5vw, 46px);
}

.joma-footer a {
    color: rgba(239, 231, 218, .58);
    text-decoration: none;
    transition: color .24s ease, letter-spacing .24s ease;
}

.joma-footer a:hover,
.joma-footer a:focus-visible {
    color: var(--joma-copper-bright);
    letter-spacing: .27em;
    outline: none;
}

.joma-coat-sweep {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    left: -28vw;
    width: 22vw;
    min-width: 220px;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-10deg);
    background: linear-gradient(90deg, transparent 0%, rgba(142, 63, 14, .05) 22%, rgba(228, 145, 48, .18) 50%, rgba(255, 206, 126, .35) 54%, rgba(141, 60, 14, .06) 75%, transparent 100%);
    filter: blur(10px);
    animation: jomaCoatSweep 1.45s cubic-bezier(.7, 0, .18, 1) .25s forwards;
}

.reveal {
    opacity: 0;
    transform: translateY(10px);
    animation: jomaReveal .75s cubic-bezier(.22, .72, .24, 1) forwards;
}

.reveal--1 { animation-delay: .35s; }
.reveal--2 { animation-delay: .45s; }
.reveal--3 { animation-delay: 1.48s; }
.reveal--5 { animation-delay: 2.05s; }
.reveal--6 { animation-delay: 2.25s; }

@keyframes jomaReveal {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes jomaLogoReveal {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes jomaTitleUp {
    to { transform: translateY(0); }
}

@keyframes jomaScan {
    0% { left: -16%; opacity: 0; }
    12% { opacity: .9; }
    80% { opacity: .62; }
    100% { left: 112%; opacity: 0; }
}

@keyframes jomaCoatSweep {
    0% { left: -28vw; opacity: 0; }
    15% { opacity: .8; }
    82% { opacity: .5; }
    100% { left: 118vw; opacity: 0; }
}

@keyframes jomaFrame {
    to { stroke-dashoffset: 0; }
}

@keyframes jomaDrawSurface {
    to { stroke-dashoffset: 0; }
}

@keyframes jomaHalo {
    to { opacity: 1; transform: scale(1); }
}

@keyframes jomaAmbient {
    from { transform: translate(-50%, -50%) scale(.98); opacity: .72; }
    to { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@keyframes jomaPulse {
    0% { transform: scale(.7); opacity: 0; }
    25% { opacity: .72; }
    100% { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 782px) {
    body.admin-bar .joma-page {
        min-height: calc(100svh - 46px);
    }
}

@media (max-width: 720px) {
    .joma-topbar,
    .joma-footer {
        left: 22px;
        right: 22px;
        font-size: 8px;
        letter-spacing: .19em;
    }

    .joma-topbar span:first-child,
    .joma-footer > span {
        display: none;
    }

    .joma-topbar,
    .joma-footer {
        justify-content: center;
    }

    .joma-topbar::after {
        left: 12%;
        right: 12%;
    }

    .joma-hero {
        width: min(100% - 34px, 720px);
        padding-top: 108px;
        padding-bottom: 94px;
    }

    .joma-kicker {
        margin-bottom: 28px;
        font-size: 8px;
        letter-spacing: .21em;
    }

    .joma-logo-stage {
        width: min(94vw, 650px);
        margin-bottom: 34px;
    }

    .joma-logo-frame {
        inset: -28% -3%;
    }

    .joma-title {
        font-size: clamp(34px, 10.2vw, 54px);
        line-height: 1.01;
    }

    .joma-description br {
        display: none;
    }

    .joma-description {
        max-width: 340px;
    }

    .joma-surface-lines {
        width: 150vw;
        left: -25vw;
        bottom: -2vh;
        opacity: .14;
    }
}

@media (max-height: 690px) and (min-width: 721px) {
    .joma-hero {
        padding-top: 86px;
        padding-bottom: 78px;
    }

    .joma-kicker {
        margin-bottom: 20px;
    }

    .joma-logo-stage {
        width: min(610px, 68vw);
        margin-bottom: 24px;
    }

    .joma-title {
        font-size: clamp(34px, 4.3vw, 58px);
    }

    .joma-description {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
    }

    .joma-logo-reveal {
        clip-path: inset(0 0 0 0);
    }

    .joma-title-line > span,
    .reveal {
        opacity: 1;
        transform: none;
    }
}