/* ============================================================
   animations.css — Rocca Marina
   Parallaxe, 3D CSS, fade-in scroll, effets dorés
   ============================================================ */

/* ============================================================
   1. FADE-IN AU SCROLL (Intersection Observer)
   ============================================================ */

.rm-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* will-change retiré : 40+ couches GPU simultanées = freeze renderer */
}

.rm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de direction */
.rm-reveal--left {
    transform: translateX(-40px);
}

.rm-reveal--left.is-visible {
    transform: translateX(0);
}

.rm-reveal--right {
    transform: translateX(40px);
}

.rm-reveal--right.is-visible {
    transform: translateX(0);
}

.rm-reveal--scale {
    transform: scale(0.92);
}

.rm-reveal--scale.is-visible {
    transform: scale(1);
}

/* Entrée cinématique des cartes espaces : montée + scale.
   Plus spécifique que .rm-reveal → override propre. Le hover 3D agit sur
   .rm-espace-card__inner (autre élément), donc aucun conflit de transform. */
.rm-espace-card.rm-reveal {
    transform: translateY(46px) scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-espace-card.rm-reveal.is-visible {
    transform: translateY(0) scale(1);
}

/* Délais en cascade */
.rm-reveal--delay-1 { transition-delay: 0.1s; }
.rm-reveal--delay-2 { transition-delay: 0.2s; }
.rm-reveal--delay-3 { transition-delay: 0.3s; }
.rm-reveal--delay-4 { transition-delay: 0.4s; }
.rm-reveal--delay-5 { transition-delay: 0.5s; }
.rm-reveal--delay-6 { transition-delay: 0.6s; }
.rm-reveal--delay-7 { transition-delay: 0.7s; }

/* Durées personnalisées */
.rm-reveal--fast { transition-duration: 0.4s !important; }
.rm-reveal--slow { transition-duration: 1.1s !important; }

/* ============================================================
   2. PARALLAXE
   ============================================================ */

.rm-parallax-container {
    position: relative;
    overflow: hidden;
}

.rm-parallax-bg {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    transform: translateZ(0); /* Active l'accélération GPU */
}

/* ============================================================
   3. EFFETS 3D CSS — CARDS DES ESPACES
   ============================================================ */

.rm-card-3d {
    perspective: 1000px;
}

.rm-card-3d__inner {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    /* backface-visibility ici + via JS mouseenter pour compatibilité Chrome */
    backface-visibility: hidden;
}

.rm-card-3d:hover .rm-card-3d__inner {
    /* Tilt plus prononcé (10°/5° au lieu de 6°/3°) pour que l'effet soit visible */
    transform: rotateY(10deg) rotateX(-5deg) translateZ(24px);
    /* Lueur dorée visible sur fond noir — la shadow noire seule est invisible */
    box-shadow:
        -14px 22px 50px rgba(0, 0, 0, 0.70),
           0   0  50px rgba(201, 168, 76, 0.35),
           0   0  18px rgba(201, 168, 76, 0.18);
}

/* Effet de lumière sur le hover */
.rm-card-3d__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(201, 168, 76, 0.08) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.rm-card-3d:hover .rm-card-3d__inner::before {
    opacity: 1;
}

/* ============================================================
   4. LUEUR DORÉE SUR LES TITRES
   ============================================================ */

.rm-title-glow {
    text-shadow:
        0 0 30px rgba(201, 168, 76, 0.25),
        0 0 60px rgba(201, 168, 76, 0.1),
        0 0 100px rgba(201, 168, 76, 0.05);
}

/* Animation pulsante subtile sur le titre hero */
.rm-title-glow--pulse {
    animation: rm-glow-pulse 4s ease-in-out infinite;
}

@keyframes rm-glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 30px rgba(201, 168, 76, 0.25),
            0 0 60px rgba(201, 168, 76, 0.1);
    }
    50% {
        text-shadow:
            0 0 40px rgba(201, 168, 76, 0.4),
            0 0 80px rgba(201, 168, 76, 0.2),
            0 0 120px rgba(201, 168, 76, 0.08);
    }
}

/* ============================================================
   5. LIGNE DÉCORATIVE DORÉE ANIMÉE
   ============================================================ */

.rm-gold-line {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--color-gold-dark);
    margin: var(--spacing-md) auto;
    position: relative;
    overflow: hidden;
    border: none;
}

.rm-gold-line--left {
    margin-left: 0;
}

.rm-gold-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-gold-light),
        transparent
    );
    animation: rm-shimmer 2.5s ease-in-out infinite;
}

@keyframes rm-shimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* Ornement RM entre les sections */
.rm-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin: var(--spacing-2xl) auto;
    color: var(--color-gold-dark);
}

.rm-ornament::before,
.rm-ornament::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-dark));
}

.rm-ornament::after {
    background: linear-gradient(270deg, transparent, var(--color-gold-dark));
}

.rm-ornament__symbol {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    color: var(--color-gold);
    text-transform: uppercase;
}

/* ============================================================
   6. TEXTURE GRAIN OVERLAY (effet premium)
   ============================================================ */

.rm-grain {
    position: relative;
}

.rm-grain::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-toast);
    opacity: 0.025;
    /* SVG noise pattern inline */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ============================================================
   7. ANIMATION HERO — TITRE ENTRY
   ============================================================ */

@keyframes rm-hero-title-in {
    from {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: 0.3em;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: -0.01em;
    }
}

.rm-hero-title-animate {
    animation: rm-hero-title-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.rm-hero-sub-animate {
    animation: rm-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    opacity: 0;
}

.rm-hero-cta-animate {
    animation: rm-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
    opacity: 0;
}

@keyframes rm-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   8. OVERLAY DÉGRADÉ SUR LES PHOTOS
   ============================================================ */

.rm-photo-overlay {
    position: relative;
    overflow: hidden;
}

.rm-photo-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm-photo-overlay:hover img {
    transform: scale(1.05);
}

.rm-photo-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(13, 13, 13, 0.7) 100%
    );
    pointer-events: none;
}

/* ============================================================
   9. LOADER / SKELETON (placeholder avant vraies photos)
   ============================================================ */

.rm-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-black-card) 25%,
        var(--color-black-soft) 50%,
        var(--color-black-card) 75%
    );
    background-size: 200% 100%;
    animation: rm-skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes rm-skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   PRÉLOADER — Monogramme RM doré (signature d'entrée)
   ============================================================ */

.rm-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    opacity: 1;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.rm-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.rm-preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.rm-preloader__mark {
    filter: drop-shadow(0 0 24px rgba(201, 168, 76, 0.35));
}

/* Anneaux qui se dessinent */
.rm-preloader__ring {
    transform-origin: center;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: rm-ring-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.rm-preloader__ring--inner {
    stroke-dasharray: 277;
    stroke-dashoffset: 277;
    animation: rm-ring-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}

@keyframes rm-ring-draw {
    to { stroke-dashoffset: 0; }
}

/* Monogramme RM qui apparaît */
.rm-preloader__monogram {
    opacity: 0;
    animation: rm-mono-in 0.8s ease 0.6s forwards;
}

@keyframes rm-mono-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mot "Rocca Marina" en dessous */
.rm-preloader__word {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0;
    transform: translateY(8px);
    animation: rm-word-in 0.7s ease 0.9s forwards;
    padding-left: 0.4em;
}

@keyframes rm-word-in {
    to { opacity: 0.85; transform: translateY(0); }
}

/* ============================================================
   CURSEUR DORÉ — signature desktop
   ============================================================ */

@media (pointer: fine) {
    .rm-has-cursor,
    .rm-has-cursor a,
    .rm-has-cursor button,
    .rm-has-cursor .rm-btn,
    .rm-has-cursor summary {
        cursor: none;
    }
}

.rm-cursor-dot,
.rm-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    margin-left: -4px;
    margin-top: -4px;
    transition: opacity 0.3s ease;
    will-change: transform;
}

.rm-cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--color-gold);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.6);
}

.rm-cursor-ring {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border: 1px solid rgba(201, 168, 76, 0.55);
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease,
                background 0.3s ease, opacity 0.3s ease;
}

.rm-cursor-ring.is-active {
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.8);
}

/* ============================================================
   GRAIN FILMIQUE — texture premium sur fonds noirs
   ============================================================ */

.rm-grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
    animation: rm-grain-shift 0.6s steps(3) infinite;
    mix-blend-mode: overlay;
}

@keyframes rm-grain-shift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-3%, 2%); }
    66%  { transform: translate(2%, -3%); }
    100% { transform: translate(0, 0); }
}

/* ============================================================
   HERO — glow doré respirant sur le titre principal
   ============================================================ */

.rm-hero .rm-title-glow {
    animation: rm-hero-glow 5s ease-in-out infinite;
}

@keyframes rm-hero-glow {
    0%, 100% { text-shadow: 0 0 40px rgba(201, 168, 76, 0.18), 0 2px 30px rgba(0, 0, 0, 0.6); }
    50%      { text-shadow: 0 0 60px rgba(201, 168, 76, 0.32), 0 2px 30px rgba(0, 0, 0, 0.6); }
}

/* ============================================================
   COUCHE CINÉMATIQUE (cinematic.js) — signature Matrix
   ============================================================ */

/* --- Split-lines : révélation des titres en masque doré --- */
.rm-line {
    display: block;
    overflow: hidden;
    /* le padding vertical évite que jambages/accents soient rognés par le masque */
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.rm-line__inner {
    display: block;
    transform: translateY(115%);
    opacity: 0;
    transition:
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.rm-split-in .rm-line__inner {
    transform: translateY(0);
    opacity: 1;
}
/* Fallback : élément sans split (reduced-motion) reste pleinement visible */
[data-split="lines"] { opacity: 1; }

/* --- Transition de page : voile noir doré --- */
.rm-page-veil {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--rm-noir, #0D0D0D);
    /* liseré or subtil en haut du voile pendant le mouvement */
    box-shadow: inset 0 3px 0 rgba(201, 168, 76, 0.55);
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
/* Entrée : le voile se relève (déjà présent au chargement) */
.rm-page-ready .rm-page-veil {
    transform: translateY(-100%);
}
/* Sortie : le voile redescend couvrir la page */
.rm-page-leaving .rm-page-veil {
    pointer-events: all;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

/* --- Galerie défilante infinie (marquee signature) --- */
.rm-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rm-marquee__track {
    display: flex;
    width: max-content;
    gap: 1.25rem;
    animation: rm-marquee-scroll 55s linear infinite;
    will-change: transform;
}
.rm-marquee:hover .rm-marquee__track {
    animation-play-state: paused;
}
.rm-marquee__item {
    flex: 0 0 auto;
    width: clamp(220px, 26vw, 340px);
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.14);
    position: relative;
}
.rm-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.02) brightness(0.94);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.rm-marquee__item:hover img {
    transform: scale(1.06);
    filter: saturate(1.1) brightness(1.02);
}
.rm-marquee-section__cta {
    text-align: center;
    margin-top: 2.5rem;
}
/* La translation de -50% correspond exactement à la 1re copie de la liste
   (rendue 2×), d'où une boucle parfaitement continue. */
@keyframes rm-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- Typewriter : phrases tapées en boucle + caret doré --- */
.rm-typewriter {
    display: inline-flex;
    align-items: baseline;
    color: var(--rm-or, #C9A84C);
}
.rm-typewriter__text {
    /* évite le « saut » de mise en page pendant la frappe */
    white-space: pre;
}
.rm-typewriter__caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 0.08em;
    transform: translateY(0.12em);
    background: var(--rm-or, #C9A84C);
    animation: rm-caret-blink 1s steps(1) infinite;
}
@keyframes rm-caret-blink {
    0%, 50%  { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* --- Titres hero en typewriter (caractères pré-réservés) --- */
.rm-tw {
    opacity: 1 !important;
    transform: none !important;
}
/* Un mot = un bloc insécable. SANS ça, chaque caractère étant un span inline,
   le navigateur coupe la ligne entre deux lettres et casse le titre en plein
   milieu d'un mot (« Le Refuge Calm / e »). Seuls les espaces restent des
   points de césure. */
.rm-tw .rm-tw-w {
    display: inline-block;
    white-space: nowrap;
}

/* Chaque caractère occupe déjà sa place finale ; il n'est que masqué,
   puis révélé un à un → zéro décalage, zéro recentrage pendant la frappe. */
.rm-tw .rm-tw-c {
    opacity: 0;
}
.rm-tw .rm-tw-c.is-on {
    opacity: 1;
}
.rm-tw-caret {
    vertical-align: baseline;
}

/* --- Ken Burns : dérive lente et vivante du fond du hero ---
   NB : le transform de .rm-parallax-bg est piloté en inline par
   parallax.js ; on anime donc background-position (et non transform)
   pour éviter tout conflit. Le fond est surdimensionné (140%), il y a
   donc de la matière pour dériver sans révéler de bord. */
@keyframes rm-kenburns {
    0%   { background-position: 50% 42%; }
    100% { background-position: 50% 58%; }
}
.rm-hero__bg.rm-kenburns {
    animation: rm-kenburns 26s ease-in-out infinite alternate;
}

/* ============================================================
   DÉSACTIVER TOUTES LES ANIMATIONS (prefers-reduced-motion)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .rm-reveal,
    .rm-reveal--left,
    .rm-reveal--right,
    .rm-reveal--scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rm-card-3d:hover .rm-card-3d__inner {
        transform: none;
    }

    .rm-title-glow--pulse,
    .rm-gold-line::after,
    .rm-whatsapp-float,
    .rm-fab__toggle,
    .rm-hero-title-animate,
    .rm-hero-sub-animate,
    .rm-hero-cta-animate,
    .rm-skeleton,
    .rm-grain,
    .rm-hero .rm-title-glow,
    .rm-hero__bg.rm-kenburns,
    .rm-footer__signature-heart,
    .rm-footer__signature-brand,
    .rm-footer__signature-brand-accent {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Couche cinématique : tout neutralisé, texte pleinement visible */
    .rm-line { overflow: visible; }
    .rm-line__inner {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .rm-page-veil { display: none !important; }
    .rm-typewriter__caret { animation: none !important; display: none !important; }
    .rm-marquee__track { animation: none !important; }

    /* Préloader : révéler instantanément le contenu */
    .rm-preloader { display: none !important; }
    .rm-preloader__ring,
    .rm-preloader__ring--inner,
    .rm-preloader__monogram,
    .rm-preloader__word { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}