/* ============================================================
   La Peau Animated Logo — front-end styles
   Luxury, soft, slow. Hardware-accelerated transforms only.
   ============================================================ */

:root {
    --lapeau-al-speed: 1200ms;
    --lapeau-al-size: 60px;
    --lapeau-al-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lapeau-al-ease-soft: cubic-bezier(0.45, 0, 0.25, 1);
}

/* Mark the targeted logo so we have a stable hook regardless of theme. */
.lapeau-al-target {
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
        transform var(--lapeau-al-speed) var(--lapeau-al-ease),
        opacity var(--lapeau-al-speed) var(--lapeau-al-ease-soft);
}

/* ---- Gentle front-back flip ---- */
.lapeau-al-target.is-flipping {
    animation: lapeau-al-flip var(--lapeau-al-speed) var(--lapeau-al-ease) both;
}

@keyframes lapeau-al-flip {
    0%   { transform: perspective(900px) rotateY(0deg); }
    50%  { transform: perspective(900px) rotateY(180deg); }
    100% { transform: perspective(900px) rotateY(360deg); }
}

/* ---- Soft fade in/out ---- */
.lapeau-al-target.is-fading {
    animation: lapeau-al-fade var(--lapeau-al-speed) var(--lapeau-al-ease-soft) both;
}

@keyframes lapeau-al-fade {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}

/* ---- Subtle shrink while scrolling ---- */
.lapeau-al-target.is-shrunk {
    transform: scale(0.92);
    opacity: 0.92;
}

/* ---- Floating side logo ---- */
.lapeau-al-floating {
    position: fixed;
    top: 50%;
    width: var(--lapeau-al-size);
    height: var(--lapeau-al-size);
    transform: translateY(-50%) translateX(0) scale(0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 9990;
    transition:
        opacity 800ms var(--lapeau-al-ease-soft),
        transform 900ms var(--lapeau-al-ease);
    border-radius: 50%;
    box-shadow:
        0 6px 24px rgba(40, 10, 60, 0.10),
        0 1px 3px rgba(40, 10, 60, 0.06);
    background: #ffffff;
    padding: 6px;
    box-sizing: border-box;
    cursor: pointer;
}

.lapeau-al-floating.is-right {
    right: 24px;
    transform: translateY(-50%) translateX(20px) scale(0.85);
}
.lapeau-al-floating.is-left {
    left: 24px;
    transform: translateY(-50%) translateX(-20px) scale(0.85);
}

.lapeau-al-floating.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    pointer-events: auto;
}

.lapeau-al-floating img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.lapeau-al-floating:hover {
    transform: translateY(-50%) translateX(0) scale(1.05);
    transition-duration: 500ms;
}

/* ---- Mobile responsive ---- */
@media (max-width: 600px) {
    .lapeau-al-floating {
        width: calc(var(--lapeau-al-size) * 0.8);
        height: calc(var(--lapeau-al-size) * 0.8);
    }
    .lapeau-al-floating.is-right { right: 14px; }
    .lapeau-al-floating.is-left  { left: 14px; }
}

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .lapeau-al-target,
    .lapeau-al-target.is-flipping,
    .lapeau-al-target.is-fading,
    .lapeau-al-target.is-shrunk,
    .lapeau-al-floating {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .lapeau-al-floating {
        display: none !important;
    }
}