/* ==========================================================================
   Nayelios — page d'attente de la boutique
   Même univers que la page d'introduction (../intro/intro.css) : nuit, or,
   Cinzel et Jost. L'arrivée prolonge la transition d'entrée : on sort du noir.
   ========================================================================== */

@font-face {
    font-family: 'Cinzel';
    src: url('../intro/fonts/cinzel-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('../intro/fonts/jost-latin.woff2') format('woff2');
    font-weight: 300 500;
    font-display: swap;
}

:root {
    --nuit: #070605;
    --or: #d9b15c;
    --or-clair: #f3dc9f;
    --or-pale: #fbefd0;
    --texte: #e9dfc8;
    --texte-doux: rgba(233, 223, 200, .72);
    --b: min(42vh, 68vw, 360px);      /* côté du bijou */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--nuit); }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--nuit);
    color: var(--texte);
    font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
/* lueur chaude derrière le bijou */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(46% 40% at var(--lueur-x, 50%) var(--lueur-y, 38%), rgba(128, 94, 38, .2), transparent 72%);
    pointer-events: none;
}

.poussiere {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* --- Mise en page ---------------------------------------------------------- */
.attente {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.4vh, 24px);
    padding: 76px 20px 64px;
    text-align: center;
}

.marque {
    position: absolute;
    top: calc(24px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 0 6px .42em;           /* compense l'espacement final */
    font: 500 .82rem / 1 'Cinzel', Georgia, serif;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--or-clair);
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s ease, text-shadow .3s ease;
}
.marque:hover { color: var(--or-pale); text-shadow: 0 0 18px rgba(240, 200, 110, .6); }

/* --- Bijou ----------------------------------------------------------------- */
.bijou {
    position: relative;
    flex: none;
    width: var(--b);
    height: var(--b);
}
.bijou::before {
    content: '';
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(230, 180, 80, .24), rgba(230, 180, 80, .06) 55%, transparent);
    animation: pulsation 6s ease-in-out infinite;
}
.bijou__corps {
    position: absolute;
    inset: 0;
    display: block;
    animation: flotter 7s ease-in-out infinite;
}
.bijou__img {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 calc(var(--b) * .07) rgba(230, 180, 80, .3));
}
/* reflet de lumière qui glisse sur l'or, découpé à la forme du bijou */
.bijou__reflet {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 250, 236, .75) 50%, transparent 58%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    -webkit-mask: url('../intro/img/nayelios-bijou-seul.webp') center / 100% 100% no-repeat;
    mask: url('../intro/img/nayelios-bijou-seul.webp') center / 100% 100% no-repeat;
    mix-blend-mode: overlay;
    animation: reflet 7s ease-in-out 2.2s infinite;
}

@keyframes flotter {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(calc(var(--b) * -.03)) rotate(.6deg); }
}
@keyframes pulsation {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes reflet {
    0%, 55% { background-position: 150% 0; }
    85%, 100% { background-position: -50% 0; }
}

/* --- Annonce --------------------------------------------------------------- */
.annonce {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 32rem;
}
.surtitre {
    margin: 0;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--or);
}
.titre {
    margin: .35em 0 .45em;
    font: 500 clamp(1.6rem, 3.4vw, 2.6rem) / 1.15 'Cinzel', Georgia, serif;
    letter-spacing: .06em;
    color: var(--or-clair);
    background: linear-gradient(180deg, #fff3d6 0%, #efcf86 45%, #b98a35 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}
.texte {
    margin: 0;
    font-size: clamp(.95rem, 1.5vw, 1.06rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--texte-doux);
    text-wrap: pretty;
}

/* fil d'attente : une lueur parcourt un trait d'or */
.fil {
    position: relative;
    display: block;
    width: 150px;
    height: 1px;
    margin: clamp(18px, 3.6vh, 30px) 0;
    overflow: hidden;
    background: rgba(217, 177, 92, .22);
}
.fil::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
    animation: fil 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes fil {
    from { transform: translateX(-110%); }
    to { transform: translateX(240%); }
}

.retour {
    display: inline-flex;
    align-items: center;
    gap: .8em;
    padding: .95em 1.5em .95em 1.7em;
    border: 1px solid rgba(217, 177, 92, .45);
    border-radius: 999px;
    font: 600 .7rem / 1.2 'Cinzel', Georgia, serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--or-pale);
    background: rgba(12, 10, 7, .45);
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.retour__fleche {
    width: 1.5em;
    height: .75em;
    flex: none;
    transition: transform .3s ease;
}
@media (hover: hover) {
    .retour:hover {
        border-color: var(--or-clair);
        background: rgba(217, 177, 92, .1);
        box-shadow: 0 0 32px -6px rgba(240, 200, 110, .5);
    }
    .retour:hover .retour__fleche { transform: translateX(-.3em); }
}
.retour:focus-visible, .marque:focus-visible {
    outline: 1px solid var(--or-clair);
    outline-offset: 5px;
}

.pied {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    font-weight: 300;
    font-size: .64rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(233, 223, 200, .34);
    pointer-events: none;
}

@media (max-width: 520px) {
    .texte { text-wrap: balance; }
    .texte br { display: none; }
}

/* --- Écrans larges et téléphones couchés : bijou à gauche, annonce à droite */
@media (orientation: landscape) and (min-width: 700px) {
    :root { --b: min(58vh, 38vw, 440px); --lueur-x: 32%; --lueur-y: 50%; }
    .attente {
        flex-direction: row;
        gap: clamp(32px, 6vw, 96px);
        padding: 76px 5vw 64px;
    }
    .annonce { align-items: flex-start; text-align: left; }
}
@media (orientation: landscape) and (max-height: 540px) {
    :root { --b: min(66vh, 38vw); }
    .attente { padding: 48px 5vw 20px; }
    .marque { top: 14px; }
    .texte br { display: none; }
    .pied { display: none; }
}

/* --- Arrivée : on sort du noir de la transition d'entrée ------------------- */
.js body::before, .js .poussiere { opacity: 0; transition: opacity 2.2s ease; }
.js .marque, .js .pied { opacity: 0; transition: opacity 1.2s ease 1.2s, color .3s ease, text-shadow .3s ease; }
.js .bijou {
    opacity: 0;
    transform: scale(1.14);
    filter: blur(8px);
    transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.2, .7, .2, 1), filter 1.6s ease;
}
.js .annonce > * {
    opacity: 0;
    translate: 0 12px;
    transition: opacity 1s ease, translate 1s cubic-bezier(.2, .7, .2, 1);
}
.js .annonce > :nth-child(1) { transition-delay: .6s; }
.js .annonce > :nth-child(2) { transition-delay: .75s; }
.js .annonce > :nth-child(3) { transition-delay: .9s; }
.js .annonce > :nth-child(4) { transition-delay: 1.05s; }
.js .annonce > :nth-child(5) { transition-delay: 1.2s; }

.js.pret body::before, .js.pret .poussiere,
.js.pret .marque, .js.pret .pied,
.js.pret .annonce > * { opacity: 1; translate: none; }
.js.pret .bijou { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    .bijou::before, .bijou__corps, .bijou__reflet, .fil::after { animation: none; }
    .fil::after { transform: translateX(80%); }
    .js .bijou { transform: none; filter: none; }
    .js .annonce > * { translate: none; }
}