/* ==========================================================
   LO HICIMOS REALIDAD
   EXPERIENCE CSS
========================================================== */

:root {

    --lhr-ivory: #F8F5F0;
    --lhr-ivory-soft: #FCFAF7;

    --lhr-rose: #D7B2AA;
    --lhr-rose-dark: #B98E86;

    --lhr-sage: #B8C8B2;
    --lhr-sage-light: #DDE6D9;

    --lhr-text: #45433F;
    --lhr-text-light: #77736D;

    --lhr-white: #FFFFFF;

    --lhr-serif: "Cormorant Garamond", Georgia, serif;
    --lhr-sans: "Montserrat", Arial, sans-serif;

    --lhr-transition:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   RESET
========================================================== */

#lhr-experience,
#lhr-experience * {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--lhr-ivory);
    color: var(--lhr-text);
}


/* ==========================================================
   EXPERIENCE
========================================================== */

#lhr-experience {
    width: 100%;
    overflow: hidden;
}


/* ==========================================================
   GENERAL SCREEN
========================================================== */

.lhr-screen {
    position: relative;

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 24px;

    overflow: hidden;
}


/* ==========================================================
   INTRO
========================================================== */

.lhr-screen-intro {

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(215,178,170,0.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(184,200,178,0.18),
            transparent 35%
        ),
        var(--lhr-ivory);

    text-align: center;
}


.lhr-intro-content {
    max-width: 700px;
}


.lhr-overline,
.lhr-guest-overline,
.lhr-rsvp-overline {

    display: block;

    margin-bottom: 28px;

    font-family: var(--lhr-sans);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: var(--lhr-text-light);
}


.lhr-intro-title {

    margin: 0 0 48px;

    font-family: var(--lhr-serif);

    font-size: clamp(
        44px,
        9vw,
        88px
    );

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.025em;

    color: var(--lhr-text);
}


/* ==========================================================
   BUTTON
========================================================== */

.lhr-button {

    appearance: none;

    border: 0;

    cursor: pointer;

    font-family: var(--lhr-sans);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    padding: 17px 28px;

    transition:
        transform 0.4s var(--lhr-transition),
        background 0.4s ease,
        color 0.4s ease;
}


.lhr-button-primary {

    background: var(--lhr-rose);

    color: var(--lhr-white);
}


.lhr-button-primary:hover {

    transform: translateY(-3px);

    background: var(--lhr-rose-dark);
}


/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.lhr-scroll-indicator {

    position: absolute;

    bottom: 32px;
    left: 50%;

    width: 1px;
    height: 44px;

    transform: translateX(-50%);

    overflow: hidden;
}


.lhr-scroll-indicator span {

    display: block;

    width: 100%;
    height: 100%;

    background: var(--lhr-rose);

    animation: lhr-scroll-line 2s infinite;
}


@keyframes lhr-scroll-line {

    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100%);
    }

}


/* ==========================================================
   TEXT SCREENS
========================================================== */

.lhr-screen-text {

    background: var(--lhr-ivory-soft);

    text-align: center;
}


.lhr-content-center {
    width: 100%;
    max-width: 800px;
}


.lhr-content-narrow {
    max-width: 650px;
}


.lhr-large-text {

    margin: 0;

    font-family: var(--lhr-serif);

    font-size: clamp(
        38px,
        7vw,
        76px
    );

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -0.02em;
}


/* ==========================================================
   PHOTO PLACEHOLDER
========================================================== */

.lhr-photo-screen {

    background: var(--lhr-sage-light);

    padding: 60px 30px;
}


.lhr-photo-placeholder {

    position: relative;

    width: min(
        78vw,
        520px
    );

    aspect-ratio: 4 / 5;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--lhr-ivory);

    border: 1px solid rgba(
        69,
        67,
        63,
        0.12
    );

    box-shadow:
        0 30px 80px
        rgba(69,67,63,0.08);
}


.lhr-photo-placeholder-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    text-align: center;
}


.lhr-photo-number {

    font-family: var(--lhr-serif);

    font-size: 48px;

    color: var(--lhr-rose);
}


.lhr-photo-label {

    font-family: var(--lhr-sans);

    font-size: 10px;

    letter-spacing: 0.3em;

    color: var(--lhr-text);
}


.lhr-photo-note {

    font-family: var(--lhr-sans);

    font-size: 9px;

    letter-spacing: 0.18em;

    color: var(--lhr-text-light);
}


/* ==========================================================
   VALUES
========================================================== */

.lhr-screen-values {

    background: var(--lhr-ivory);

    text-align: center;
}


.lhr-values-container {

    display: flex;

    flex-direction: column;

    gap: 18px;

    align-items: center;
}


.lhr-value {

    font-family: var(--lhr-serif);

    font-size: clamp(
        38px,
        7vw,
        72px
    );

    line-height: 1;

    color: var(--lhr-text);
}


.lhr-value:nth-child(2) {
    color: var(--lhr-rose-dark);
}


.lhr-value:nth-child(3) {
    color: var(--lhr-sage);
}


/* ==========================================================
   REALITY
========================================================== */

.lhr-screen-reality {

    background: var(--lhr-rose);

    color: var(--lhr-white);

    text-align: center;
}


.lhr-reality-content {
    max-width: 850px;
}


.lhr-reality-small {

    margin: 0 0 28px;

    font-family: var(--lhr-sans);

    font-size: 12px;

    letter-spacing: 0.12em;
}


.lhr-reality-title {

    margin: 0;

    font-family: var(--lhr-serif);

    font-size: clamp(
        58px,
        11vw,
        120px
    );

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.04em;
}


/* ==========================================================
   REVEAL
========================================================== */

.lhr-screen-reveal {

    background: var(--lhr-ivory);

    text-align: center;
}


.lhr-reveal-content {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.lhr-reveal-small {

    margin-bottom: 40px;

    font-family: var(--lhr-sans);

    font-size: 10px;

    letter-spacing: 0.32em;
}


.lhr-names {

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-family: var(--lhr-serif);

    font-size: clamp(
        72px,
        14vw,
        150px
    );

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.04em;
}


.lhr-ampersand {

    margin: 18px 0;

    font-size: 0.42em;

    color: var(--lhr-rose);
}


.lhr-wedding-line {

    margin: 55px 0 0;

    font-family: var(--lhr-sans);

    font-size: 11px;

    letter-spacing: 0.3em;

    text-transform: uppercase;
}


/* ==========================================================
   GUEST
========================================================== */

.lhr-screen-guest {

    background: var(--lhr-sage-light);

    text-align: center;
}


.lhr-guest-content {

    max-width: 650px;
}


.lhr-guest-name {

    margin: 0 0 28px;

    font-family: var(--lhr-serif);

    font-size: clamp(
        64px,
        12vw,
        120px
    );

    font-weight: 400;

    line-height: 0.9;
}


.lhr-guest-message {

    max-width: 480px;

    margin: 0 auto;

    font-family: var(--lhr-sans);

    font-size: 13px;

    line-height: 1.8;

    color: var(--lhr-text-light);
}


/* ==========================================================
   LOCATION
========================================================== */

.lhr-screen-location {

    background: var(--lhr-ivory);

    text-align: center;
}


.lhr-location-date {

    display: block;

    margin-bottom: 30px;

    font-family: var(--lhr-sans);

    font-size: 10px;

    letter-spacing: 0.3em;
}


.lhr-location-title {

    margin: 0 0 35px;

    font-family: var(--lhr-serif);

    font-size: clamp(
        48px,
        8vw,
        86px
    );

    font-weight: 400;

    line-height: 0.98;
}


.lhr-location-type {

    font-family: var(--lhr-sans);

    font-size: 9px;

    letter-spacing: 0.3em;

    color: var(--lhr-text-light);
}


/* ==========================================================
   RSVP
========================================================== */

.lhr-screen-rsvp {

    background: var(--lhr-sage);

    text-align: center;
}


.lhr-rsvp-title {

    margin: 0 0 40px;

    font-family: var(--lhr-serif);

    font-size: clamp(
        64px,
        11vw,
        110px
    );

    font-weight: 400;

    line-height: 0.95;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .lhr-screen {
        padding: 32px 20px;
    }


    .lhr-intro-title {
        font-size: 48px;
    }


    .lhr-large-text {
        font-size: 42px;
    }


    .lhr-photo-placeholder {
        width: 82vw;
    }


    .lhr-names {
        font-size: 78px;
    }


    .lhr-location-title {
        font-size: 52px;
    }

}

/* ==========================================================
   MODO CINEMATOGRÁFICO
========================================================== */

html,
body {

    min-height: 100%;

}


/*
==============================================================
MODO CINEMATOGRÁFICO
==============================================================
*/

body.lhr-cinematic-mode {

    overflow: hidden;

}


/*
==============================================================
ESCENAS
==============================================================
*/

.lhr-scene {

    position: relative;

    opacity: 0;

    transform:
        scale(1.025);

    transition:

        opacity 1.2s
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.8s
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
==============================================================
ESCENA ACTIVA
==============================================================
*/

.lhr-scene-active {

    opacity: 0;

}


/*
==============================================================
ESCENA VISIBLE
==============================================================
*/

.lhr-scene-visible {

    opacity: 1;

    transform:
        scale(1);

}


/*
==============================================================
ESCENA SALIENDO
==============================================================
*/

.lhr-scene-leaving {

    opacity: 0;

    transform:
        scale(0.985);

}


/*
==============================================================
ELEMENTOS INTERNOS
==============================================================
*/

.lhr-scene .lhr-large-text,
.lhr-scene .lhr-reality-small,
.lhr-scene .lhr-reality-title,
.lhr-scene .lhr-names,
.lhr-scene .lhr-wedding-line,
.lhr-scene .lhr-guest-overline,
.lhr-scene .lhr-guest-name,
.lhr-scene .lhr-guest-message,
.lhr-scene .lhr-location-date,
.lhr-scene .lhr-location-title,
.lhr-scene .lhr-location-type,
.lhr-scene .lhr-rsvp-overline,
.lhr-scene .lhr-rsvp-title,
.lhr-scene .lhr-photo-placeholder,
.lhr-scene .lhr-value {

    opacity: 0;

    transform:
        translateY(40px);

    transition:

        opacity 1.1s
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
==============================================================
ELEMENTOS VISIBLES
==============================================================
*/

.lhr-scene-visible .lhr-large-text,
.lhr-scene-visible .lhr-reality-small,
.lhr-scene-visible .lhr-reality-title,
.lhr-scene-visible .lhr-names,
.lhr-scene-visible .lhr-wedding-line,
.lhr-scene-visible .lhr-guest-overline,
.lhr-scene-visible .lhr-guest-name,
.lhr-scene-visible .lhr-guest-message,
.lhr-scene-visible .lhr-location-date,
.lhr-scene-visible .lhr-location-title,
.lhr-scene-visible .lhr-location-type,
.lhr-scene-visible .lhr-rsvp-overline,
.lhr-scene-visible .lhr-rsvp-title,
.lhr-scene-visible .lhr-photo-placeholder,
.lhr-scene-visible .lhr-value {

    opacity: 1;

    transform:
        translateY(0);

}


/*
==============================================================
TEXTOS — DIFERENTES TIEMPOS
==============================================================
*/

.lhr-scene-visible .lhr-large-text {

    transition-delay:
        0.15s;

}


.lhr-scene-visible .lhr-reality-small {

    transition-delay:
        0.1s;

}


.lhr-scene-visible .lhr-reality-title {

    transition-delay:
        0.3s;

}


.lhr-scene-visible .lhr-wedding-line {

    transition-delay:
        0.7s;

}


.lhr-scene-visible .lhr-guest-overline {

    transition-delay:
        0.1s;

}


.lhr-scene-visible .lhr-guest-name {

    transition-delay:
        0.3s;

}


.lhr-scene-visible .lhr-guest-message {

    transition-delay:
        0.6s;

}


.lhr-scene-visible .lhr-location-date {

    transition-delay:
        0.1s;

}


.lhr-scene-visible .lhr-location-title {

    transition-delay:
        0.3s;

}


.lhr-scene-visible .lhr-location-type {

    transition-delay:
        0.7s;

}


.lhr-scene-visible .lhr-rsvp-overline {

    transition-delay:
        0.1s;

}


.lhr-scene-visible .lhr-rsvp-title {

    transition-delay:
        0.3s;

}


/*
==============================================================
VALORES
==============================================================
*/

.lhr-value:nth-child(1) {

    transition-delay:
        0.1s;

}


.lhr-value:nth-child(2) {

    transition-delay:
        0.35s;

}


.lhr-value:nth-child(3) {

    transition-delay:
        0.6s;

}


.lhr-value:nth-child(4) {

    transition-delay:
        0.85s;

}


/*
==============================================================
FOTOGRAFÍAS
==============================================================
*/

.lhr-photo-placeholder {

    will-change:
        transform,
        opacity;

}


/*
==============================================================
NOMBRES
==============================================================
*/

.lhr-names {

    transition-delay:
        0.1s !important;

}


.lhr-names span {

    display: block;

    opacity: 0;

    transform:
        translateY(55px);

    transition:

        opacity 1.2s
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.4s
        cubic-bezier(0.22, 1, 0.36, 1);

}


.lhr-scene-visible
.lhr-names span:first-child {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.15s;

}


.lhr-scene-visible
.lhr-names .lhr-ampersand {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.55s;

}


.lhr-scene-visible
.lhr-names span:last-child {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.9s;

}


/*
==============================================================
PAUSA
==============================================================
*/

body.lhr-paused::after {

    content: "PAUSADO";

    position: fixed;

    top: 24px;

    right: 24px;

    z-index: 9999;

    padding: 9px 14px;

    background:
        rgba(69,67,63,0.85);

    color:
        #ffffff;

    font-family:
        var(--lhr-sans);

    font-size:
        8px;

    letter-spacing:
        0.25em;

}


/*
==============================================================
MÓVIL
==============================================================
*/

@media (max-width: 600px) {

    .lhr-scene {

        transform:
            scale(1.02);

    }


    .lhr-scene-visible {

        transform:
            scale(1);

    }

}


/*
==============================================================
RESPETO POR REDUCED MOTION
==============================================================
*/

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

    .lhr-scene,
    .lhr-scene * {

        transition:
            none !important;

        animation:
            none !important;

    }

}
/* ==========================================================
   LHR CINEMATIC TEST
========================================================== */

#lhr-experience {
    position: relative;
    width: 100%;
}


/*
==============================================================
ESCENAS
==============================================================
*/

#lhr-experience .lhr-scene {

    position: relative;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 1.2s ease,
        transform 1.5s ease;

}


/*
==============================================================
ESCENA ACTIVA
==============================================================
*/

#lhr-experience
.lhr-scene-visible {

    opacity: 1;

    transform: scale(1);

}


/*
==============================================================
MODO CINEMATOGRÁFICO
==============================================================
*/

body.lhr-cinematic-mode {

    overflow-x: hidden;

}


/*
==============================================================
ELEMENTOS INTERNOS
==============================================================
*/

#lhr-experience
.lhr-scene
.lhr-large-text,

#lhr-experience
.lhr-scene
.lhr-reality-title,

#lhr-experience
.lhr-scene
.lhr-names,

#lhr-experience
.lhr-scene
.lhr-photo-placeholder,

#lhr-experience
.lhr-scene
.lhr-value {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 1s ease,
        transform 1.2s ease;

}


/*
==============================================================
ELEMENTOS VISIBLES
==============================================================
*/

#lhr-experience
.lhr-scene-visible
.lhr-large-text,

#lhr-experience
.lhr-scene-visible
.lhr-reality-title,

#lhr-experience
.lhr-scene-visible
.lhr-names,

#lhr-experience
.lhr-scene-visible
.lhr-photo-placeholder,

#lhr-experience
.lhr-scene-visible
.lhr-value {

    opacity: 1;

    transform:
        translateY(0);

}


/*
==============================================================
BOTÓN
==============================================================
*/

#lhr-start {

    position: relative;

    z-index: 9999;

    cursor: pointer;

}


/*
==============================================================
MÓVIL
==============================================================
*/

@media (max-width: 600px) {

    #lhr-experience
    .lhr-scene {

        min-height: 100svh;

    }

}

/* ==========================================================
   LHR — CORRECCIÓN DEL MOTOR CINEMATOGRÁFICO
========================================================== */


/*
==============================================================
ELIMINAR ESPACIOS DEL TEMA
==============================================================
*/

html,
body {

    margin: 0 !important;
    padding: 0 !important;

}


body.lhr-body {

    margin: 0 !important;
    padding: 0 !important;

}


body.lhr-body #wpadminbar {

    display: none !important;

}


/*
==============================================================
PORTADA
==============================================================
*/

#lhr-intro {

    position: relative;

    z-index: 10;

    opacity: 1 !important;

    visibility: visible !important;

    transform: scale(1) !important;

    transition:

        opacity 0.9s ease,

        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
==============================================================
SALIDA DE PORTADA
==============================================================
*/

#lhr-intro.lhr-intro-exit {

    opacity: 0 !important;

    transform:
        scale(1.04) !important;

    pointer-events: none;

}


/*
==============================================================
ESCENAS CINEMATOGRÁFICAS
==============================================================
*/

#lhr-experience
.lhr-cinematic-scene {

    position: relative;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0 !important;

    visibility: hidden;

    transform:
        scale(1.025);

    transition:

        opacity 1.2s
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.5s
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
==============================================================
ESCENA VISIBLE
==============================================================
*/

#lhr-experience
.lhr-cinematic-scene.lhr-scene-visible {

    opacity: 1 !important;

    visibility: visible;

    transform:
        scale(1);

}


/*
==============================================================
ELEMENTOS INTERNOS
==============================================================
*/

.lhr-cinematic-scene
.lhr-large-text,

.lhr-cinematic-scene
.lhr-photo-placeholder,

.lhr-cinematic-scene
.lhr-value,

.lhr-cinematic-scene
.lhr-reality-small,

.lhr-cinematic-scene
.lhr-reality-title,

.lhr-cinematic-scene
.lhr-names,

.lhr-cinematic-scene
.lhr-wedding-line,

.lhr-cinematic-scene
.lhr-guest-overline,

.lhr-cinematic-scene
.lhr-guest-name,

.lhr-cinematic-scene
.lhr-guest-message,

.lhr-cinematic-scene
.lhr-location-date,

.lhr-cinematic-scene
.lhr-location-title,

.lhr-cinematic-scene
.lhr-location-type,

.lhr-cinematic-scene
.lhr-rsvp-overline,

.lhr-cinematic-scene
.lhr-rsvp-title {

    opacity: 0;

    transform:
        translateY(40px);

    transition:

        opacity 1s
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
==============================================================
ELEMENTOS VISIBLES
==============================================================
*/

.lhr-cinematic-scene.lhr-scene-visible
.lhr-large-text,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-photo-placeholder,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-value,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-reality-small,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-reality-title,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-names,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-wedding-line,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-guest-overline,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-guest-name,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-guest-message,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-location-date,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-location-title,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-location-type,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-rsvp-overline,

.lhr-cinematic-scene.lhr-scene-visible
.lhr-rsvp-title {

    opacity: 1;

    transform:
        translateY(0);

}


/*
==============================================================
NOMBRES
==============================================================
*/

.lhr-names span {

    opacity: 0;

    transform:
        translateY(50px);

    transition:

        opacity 1s ease,

        transform 1.2s
        cubic-bezier(0.22, 1, 0.36, 1);

}


.lhr-scene-visible
.lhr-names span:first-child {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.2s;

}


.lhr-scene-visible
.lhr-names .lhr-ampersand {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.55s;

}


.lhr-scene-visible
.lhr-names span:last-child {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.9s;

}


/*
==============================================================
BOTÓN
==============================================================
*/

#lhr-start {

    position: relative;

    z-index: 100;

    cursor: pointer;

    opacity: 1 !important;

    visibility: visible !important;

}


/*
==============================================================
CUANDO COMIENZA
==============================================================
*/

body.lhr-experience-started {

    overflow-x: hidden;

}


/*
==============================================================
PAUSA
==============================================================
*/

body.lhr-paused::after {

    content: "PAUSADO";

    position: fixed;

    top: 25px;

    right: 25px;

    z-index: 999999;

    padding: 8px 12px;

    background:
        rgba(69,67,63,0.85);

    color: white;

    font-family:
        var(--lhr-sans);

    font-size: 9px;

    letter-spacing: 0.2em;

}