/* 6.3. Transitions de page */
.content-wrapper-old, /* Pour animation de slide entre pages */
.content-wrapper-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform, opacity;
    box-sizing: border-box;
}
.slide-out-left { animation: slideOutLeft 0.4s forwards ease-in-out; }
.slide-in-from-right { animation: slideInFromRight 0.4s forwards ease-in-out; }
.slide-out-right { animation: slideOutRight 0.4s forwards ease-in-out; }
.slide-in-from-left { animation: slideInFromLeft 0.4s forwards ease-in-out; }
/* Désactivation visuelle des boutons pendant la transition de page/pagination */
.pagination-inner.transitioning *,
.single-post-navigation.transitioning * {
    cursor: wait !important;
}
.pagination-inner.transitioning .btn-animated-read-more::before,
.single-post-navigation.transitioning .btn-animated-read-more::before {
    opacity: 0 !important;
}

/* ==========================================================================
   7. ANIMATIONS (KEYFRAMES)
   ========================================================================== */
@keyframes header-border-brighten {
    from { filter: brightness(1); }
    to   { filter: brightness(2); }
}
@keyframes deploy-halo {
    0%   { filter: drop-shadow(0 0 0px transparent); }
    40%  { filter: drop-shadow(0 0 10px rgba(119, 92, 49, 0.6)); }
    100% { filter: drop-shadow(0 0 0px transparent); }
}
@keyframes retract-halo {
    0%   { filter: drop-shadow(0 0 12px rgba(119, 92, 49, 0.5)); }
    60%  { filter: drop-shadow(0 0 3px rgba(119, 92, 49, 0.6)); }
    100% { filter: drop-shadow(0 0 0px transparent); }
}
@keyframes pulse-deploy {
    0%   { filter: drop-shadow(0 0 0px rgba(24, 180, 255, 0.8)); }
    40%  { filter: drop-shadow(0 0 8px rgba(24, 180, 255, 0.5)); }
    100% { filter: drop-shadow(0 0 18px rgba(24, 180, 255, 0)); }
}
@keyframes pulse-retract {
    0%   { filter: drop-shadow(0 0 18px rgba(24, 180, 255, 0.5)); }
    60%  { filter: drop-shadow(0 0 4px rgba(24, 180, 255, 0.7)); }
    100% { filter: drop-shadow(0 0 0px rgba(24, 180, 255, 0)); }
}

/* Hexagonal Loader Animations */
@keyframes hex-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes hex-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(0.97); }
}
@keyframes hex-fade {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
@keyframes hex-halo {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.08); }
}

/* Page Transition Animations */
@keyframes slideOutLeft {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(-100%, 0, 0); opacity: 0; }
}
@keyframes slideInFromRight {
    from { transform: translate3d(100%, 0, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
/* 404 Light Mode Animations */
@keyframes fadeInTextLight404 {
    1%  {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    70% {color: #ff005d; text-shadow: 0px 0px 14px #ff005d;}
    100%{color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
}
@keyframes flicker4Light404 {
    0%  {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    30% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    31% {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    32% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    36% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    37% {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    41% {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    42% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    85% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    86% {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    95% {color: #EDE0C8; text-shadow: 0px 0px 4px #EDE0C8;}
    96% {color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
    100%{color: #ff005d; text-shadow: 0px 0px 4px #ff005d;}
}
@keyframes hueRotate { /* Utilisé par la 404, peut rester ou être adapté */
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(-15deg); }
    100% { filter: hue-rotate(0deg); }
}


/* ==========================================================================
   8. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */