/*
 * GLEAM — Welcome / Home Page
 * Depends on gleam.css (tokens, keyframes)
 */

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════ */

.g-home {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 580px;
    overflow: hidden;
    background: linear-gradient(135deg, #100a0c 0%, #0b0809 50%, #0d0b0a 100%);
}

/* Film grain — editorial analog texture */
.g-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 280px 280px;
    opacity: 0.040;
    z-index: 8;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Radial vignette — pulls focus inward */
.g-home::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 88% 78% at 50% 50%,
            transparent 28%,
            rgba(0, 0, 0, 0.62) 100%);
    z-index: 6;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   CENTRE LOGO
═══════════════════════════════════════════════════════════════ */

.g-home-center {
    display: flex;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 400;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    width: 120px;
}


.g-home-center__line {
    width: 1px;
    flex: 1;
    position: relative;
    /* Soft luminous glow around the hairline */
    box-shadow: 0 0 6px 2px rgba(242, 207, 203, 0.18);
}

.g-home-center__line--top {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--g-blush-15) 10%,
            var(--g-blush-55) 40%,
            var(--g-blush) 100%);
    transform-origin: bottom center;
    animation: g-line-grow 2.2s var(--g-ease-out) 0.9s both;
}

.g-home-center__line--bottom {
    background: linear-gradient(to bottom,
            var(--g-blush) 0%,
            var(--g-blush-55) 60%,
            var(--g-blush-15) 90%,
            transparent 100%);
    transform-origin: top center;
    animation: g-line-grow 2.2s var(--g-ease-out) 0.9s both;
}

/* Diamond ornaments where lines meet the ring */
.g-home-center__line--top::after,
.g-home-center__line--bottom::before {
    content: '◆';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1;
    color: var(--g-blush);
    opacity: 1;
    text-shadow: 0 0 8px rgba(242, 207, 203, 0.70);
}

.g-home-center__line--top::after {
    bottom: -4px;
}

.g-home-center__line--bottom::before {
    top: -4px;
}

.g-home-center__link {
    pointer-events: all;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    transition: opacity var(--g-dur-fast);
    animation: g-ring-enter 1.6s var(--g-ease-out) 0.15s both;
    position: relative;
    z-index: 2;
}


/* ── Double-ring jewellery circle ──────────────────────────────── */
.g-home-center__ring {
    --ring-size: 130px;
    --ring-pad: 26px;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    overflow: hidden;

    /* Frosted blush-wine fill */
    background: linear-gradient(135deg,
            rgba(107, 9, 28, 0.22) 0%,
            rgba(242, 207, 203, 0.28) 50%,
            rgba(107, 9, 28, 0.18) 100%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    padding: var(--ring-pad);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Inner ring */
    border: 1px solid var(--g-blush-55);

    /* Outer ring — jewellery double-circle */
    outline: 1px solid var(--g-blush-30);
    outline-offset: 7px;

    box-shadow:
        0 0 0 14px rgba(242, 207, 203, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(241, 236, 230, 0.32);

    /* Breathing pulse after entrance */
    animation: g-ring-breathe 6s ease-in-out 3.0s infinite;

    transition:
        border-color 0.45s var(--g-ease-out),
        outline-color 0.45s var(--g-ease-out);
}

/* Ring never changes on any hover — locked appearance */

.g-home-center__logo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter:
        brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.55)) drop-shadow(0 2px 16px rgba(0, 0, 0, 0.55));
}


/* ═══════════════════════════════════════════════════════════════
   SPLIT HALVES
═══════════════════════════════════════════════════════════════ */

.g-split {
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.g-half {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* ── Background photo ──────────────────────────────────────────── */
.g-half__bg {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1) translateX(0);
    transition:
        transform var(--g-dur) var(--g-ease),
        filter var(--g-dur) var(--g-ease);
    will-change: transform, filter;
    animation: g-fade-in 2.8s ease 0s both;
}

.g-half--rent .g-half__bg {
    background-color: #180306;
    background-image:
        url('/assets/images/rent-cover.jpg'),
        url('https://images.unsplash.com/photo-1596783074918-c84cb06531ca?w=1400&q=80'),
        linear-gradient(170deg, #2a0a10 0%, #1a0508 100%);
}

.g-half--purchase .g-half__bg {
    background-color: #0f0d0b;
    background-image:
        url('/assets/images/purchase-cover.jpg'),
        url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1400&q=80'),
        linear-gradient(170deg, #181310 0%, #0f0d0b 100%);
}

/* Hover: zoom + directional drift — only on real halves */
.g-split:has(.g-half:not(.g-half--coming-soon):hover) .g-half--rent:hover .g-half__bg {
    transform: scale(1.06) translateX(-1.5%);
    filter: brightness(1.12) saturate(1.14);
}

.g-split:has(.g-half:not(.g-half--coming-soon):hover) .g-half--purchase:hover .g-half__bg {
    transform: scale(1.06) translateX(1.5%);
    filter: brightness(1.12) saturate(1.14);
}

/* Idle half dims — stays visible but recedes */
.g-split:has(.g-half:not(.g-half--coming-soon):hover) .g-half:not(:hover) .g-half__bg {
    filter: brightness(0.48) saturate(0.50);
}


/* ── Overlay — photography-forward, darkens only at base ────────── */
.g-half__overlay {
    position: absolute;
    inset: 0;
    transition: background var(--g-dur) var(--g-ease);
}

.g-half--rent .g-half__overlay {
    background: linear-gradient(to top,
            rgba(11, 8, 9, 0.96) 0%,
            rgba(11, 8, 9, 0.54) 26%,
            rgba(11, 8, 9, 0.12) 56%,
            rgba(11, 8, 9, 0.02) 100%);
}

.g-half--purchase .g-half__overlay {
    background: linear-gradient(to top,
            rgba(10, 9, 9, 0.96) 0%,
            rgba(10, 9, 9, 0.54) 26%,
            rgba(10, 9, 9, 0.12) 56%,
            rgba(10, 9, 9, 0.02) 100%);
}

.g-split:has(.g-half:not(.g-half--coming-soon):hover) .g-half:not(:hover) .g-half__overlay {
    background: rgba(6, 4, 5, 0.72);
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT BLOCK
═══════════════════════════════════════════════════════════════ */

.g-half__content {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    padding: 0 5.5vw 5rem;
    color: var(--g-cream);
}

.g-half--rent .g-half__content {
    align-items: flex-start;
}

.g-half--purchase .g-half__content {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

/* Thin vertical blush accent line — outer edge */
.g-half__content::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent,
            var(--g-blush-15) 25%,
            var(--g-blush-30) 50%,
            var(--g-blush-15) 75%,
            transparent);
    transition: opacity 0.55s;
    opacity: 0.55;
}

.g-half--rent .g-half__content::before {
    left: calc(5.5vw - 18px);
}

.g-half--purchase .g-half__content::before {
    right: calc(5.5vw - 18px);
    left: auto;
}

.g-half:hover .g-half__content::before {
    opacity: 1;
}


/* ── Eyebrow ───────────────────────────────────────────────────── */
.g-half__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--g-font-ui);
    font-size: 0.50rem;
    font-weight: 400;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--g-blush);
    opacity: 0.78;
    margin-bottom: 1.5rem;
}

/* Gold accent line — champagne detail */
.g-half__eyebrow::before {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: var(--g-wine);
    opacity: 0.55;
    flex-shrink: 0;
    transition: width 0.60s var(--g-ease-out), opacity 0.55s;
}

.g-half--purchase .g-half__eyebrow {
    flex-direction: row-reverse;
}

.g-half:hover .g-half__eyebrow::before {
    width: 40px;
    opacity: 1;
}

/* Staggered entrance */
.g-half--rent .g-half__eyebrow {
    animation: g-fadeUp 1.1s var(--g-ease-out) 0.80s both;
}

.g-half--purchase .g-half__eyebrow {
    animation: g-fadeUp 1.1s var(--g-ease-out) 0.86s both;
}


/* ── Title — large italic serif (editorial) ─────────────────────── */
.g-half__title {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(5.5rem, 7.5vw, 12rem);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: 0.03em;
    color: var(--g-cream);
    margin: 0 0 1.8rem;
    text-shadow: 0 2px 48px rgba(0, 0, 0, 0.50);
    transition:
        letter-spacing 0.70s var(--g-ease-out),
        color 0.50s,
        transform 0.70s var(--g-ease-out),
        text-shadow 0.55s;
}

.g-half:hover .g-half__title {
    letter-spacing: 0.07em;
    color: var(--g-cream);
    transform: translateY(-5px);
    text-shadow: 0 4px 70px rgba(0, 0, 0, 0.28);
}

.g-half--rent .g-half__title {
    animation: g-fadeUp 1.3s var(--g-ease-out) 0.50s both;
}

.g-half--purchase .g-half__title {
    animation: g-fadeUp 1.3s var(--g-ease-out) 0.56s both;
}


/* ── Description ───────────────────────────────────────────────── */
.g-half__desc {
    font-family: var(--g-font-ui);
    font-size: 0.74rem;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.08em;
    color: var(--g-cream);
    opacity: 0.46;
    margin: 0;
    max-width: 210px;
    transition: opacity 0.55s var(--g-ease-out), transform 0.65s var(--g-ease-out);
}

/* Gold hairline divider below description — miniature separator */
.g-half__desc::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--g-wine-40);
    margin-top: 2.2rem;
    margin-bottom: 1.8rem;
    transition: width 0.60s var(--g-ease-out), background 0.45s;
}

.g-half--purchase .g-half__desc {
    margin-left: auto;
}

.g-half--purchase .g-half__desc::after {
    margin-left: auto;
}

.g-half:hover .g-half__desc {
    opacity: 0.80;
    transform: translateY(-3px);
}

.g-half:hover .g-half__desc::after {
    width: 52px;
    background: var(--g-wine-60);
}

.g-half--rent .g-half__desc {
    animation: g-fadeUp 1.1s var(--g-ease-out) 0.96s both;
}

.g-half--purchase .g-half__desc {
    animation: g-fadeUp 1.1s var(--g-ease-out) 1.02s both;
}


/* ── CTA ───────────────────────────────────────────────────────── */
.g-half__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--g-font-ui);
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--g-cream);
    border-bottom: 1px solid var(--g-wine-20);
    padding-bottom: 5px;
    transition:
        border-color var(--g-dur-fast),
        letter-spacing 0.60s var(--g-ease-out),
        gap var(--g-dur-fast),
        color 0.40s;
}

.g-half__cta::after {
    content: '→';
    font-size: 0.80rem;
    font-style: normal;
    transition: transform var(--g-dur-fast);
}

.g-half:hover .g-half__cta {
    border-color: var(--g-wine-60);
    letter-spacing: 0.36em;
    gap: 0.90rem;
    color: var(--g-cream);
}

.g-half:hover .g-half__cta::after {
    transform: translateX(5px);
}

.g-half--rent .g-half__cta {
    animation: g-fadeUp 1.0s var(--g-ease-out) 1.14s both;
}

.g-half--purchase .g-half__cta {
    animation: g-fadeUp 1.0s var(--g-ease-out) 1.20s both;
}


/* ═══════════════════════════════════════════════════════════════
   COMING SOON STATE
═══════════════════════════════════════════════════════════════ */

.g-half--coming-soon {
    cursor: default;
    pointer-events: none;
}

.g-half--coming-soon .g-half__bg {
    filter: saturate(0.20) brightness(0.48);
}

.g-half--coming-soon .g-half__overlay {
    background: rgba(10, 7, 8, 0.72) !important;
}

/* Centred coming-soon panel */
.g-cs-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.g-cs-panel__eyebrow {
    font-family: var(--g-font-ui);
    font-size: 0.50rem;
    font-weight: 400;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--g-blush);
    opacity: 0.65;
    margin-bottom: 1.4rem;
}

.g-cs-panel__title {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(3rem, 4.5vw, 6.5rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--g-cream);
    opacity: 0.28;
    line-height: 0.90;
    margin-bottom: 2.2rem;
}

.g-cs-panel__divider {
    width: 36px;
    height: 1px;
    background: var(--g-wine-40);
    margin-bottom: 2.2rem;
}

.g-cs-panel__label {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(2.5rem, 3.8vw, 5.5rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--g-blush);
    line-height: 1;
    margin-bottom: 1.6rem;
}

.g-cs-panel__sub {
    font-family: var(--g-font-ui);
    font-size: 0.68rem;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.10em;
    color: var(--g-cream);
    opacity: 0.36;
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .g-home-center__line--top,
    .g-home-center__line--bottom,
    .g-home-center__link,
    .g-home-center__ring,
    .g-half__bg,
    .g-half--rent .g-half__eyebrow,
    .g-half--rent .g-half__title,
    .g-half--rent .g-half__desc,
    .g-half--rent .g-half__cta,
    .g-half--purchase .g-half__eyebrow,
    .g-half--purchase .g-half__title,
    .g-half--purchase .g-half__desc,
    .g-half--purchase .g-half__cta {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .g-home-center {
        width: 116px;
    }

    .g-home-center__ring {
        --ring-size: 116px;
        --ring-pad: 22px;
    }

    .g-half__content {
        padding: 0 4vw 4rem;
    }

    .g-half--rent .g-half__content::before {
        left: calc(4vw - 16px);
    }

    .g-half--purchase .g-half__content::before {
        right: calc(4vw - 16px);
    }
}

@media (max-width: 768px) {

    /* Ring at vertical midpoint between stacked halves */
    .g-home-center {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        flex-direction: row;
        width: auto;
        height: auto;
    }

    .g-home-center__line {
        display: none;
    }

    .g-home-center__ring {
        --ring-size: 104px;
        --ring-pad: 19px;
        outline-offset: 5px;
    }

    /* Stack halves */
    .g-split {
        flex-direction: column;
    }

    .g-half {
        flex: 1;
        align-items: flex-end;
    }

    .g-half:active .g-half__bg {
        filter: brightness(1.08) saturate(1.08);
    }

    /* Reset content alignment */
    .g-half__content,
    .g-half--rent .g-half__content,
    .g-half--purchase .g-half__content {
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .g-half--rent .g-half__content {
        padding: 0 1.6rem 5.5rem !important;
    }

    .g-half--purchase .g-half__content {
        padding: 0 1.6rem 2.4rem !important;
    }

    .g-half--purchase .g-half__desc {
        margin-left: 0;
    }

    .g-half--purchase .g-half__desc::after {
        margin-left: 0;
    }

    .g-half--purchase .g-half__eyebrow {
        flex-direction: row;
    }

    /* Hide vertical accent lines on mobile */
    .g-half__content::before {
        display: none;
    }

    .g-half__title {
        font-size: clamp(3.8rem, 15vw, 5.8rem);
    }

    /* Logo ring sits at the boundary — hairline would bisect it */
    .g-half--rent::after {
        display: none;
    }

    .g-cs-panel__title {
        font-size: clamp(2.2rem, 11vw, 4rem);
    }

    .g-cs-panel__label {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }
}

@media (max-width: 480px) {
    .g-home-center__ring {
        --ring-size: 90px;
        --ring-pad: 16px;
        outline-offset: 4px;
    }

    .g-half__title {
        font-size: clamp(3.2rem, 17vw, 5rem);
    }

    .g-half__desc {
        font-size: 0.70rem;
    }

    .g-half__eyebrow {
        font-size: 0.46rem;
    }

    .g-half__eyebrow::before {
        display: none;
    }

    .g-half--rent .g-half__content {
        padding: 0 1.2rem 5rem !important;
    }

    .g-half--purchase .g-half__content {
        padding: 0 1.2rem 1.8rem !important;
    }
}