/* =========================================
   LOGO-CYCLE.CSS
   1. Zone du logo
   2. Thèmes de lumière
   3. Animation du nouveau logo
   4. Lumière ciné dans le logo
   5. Trace du logo précédent
   6. Mode réduit
   ========================================= */

/* =========================================
   1. Zone du logo
   ========================================= */
.banner-wrap{
  overflow: visible;
  --va-logo-cycle-glow: rgba(255,214,102,0.30);
  --va-logo-cycle-glow-soft: rgba(255,184,77,0.10);
  --va-logo-cycle-beam-core: rgba(255,235,170,0.88);
  --va-logo-cycle-beam-mid: rgba(255,210,118,0.36);
  --va-logo-cycle-beam-edge: rgba(255,178,64,0.06);
}

.banner-wrap > .logo-cycle-stage{
  position: relative;
  display: block;
  flex: 0 0 auto;
  isolation: isolate;
  contain: paint;
  z-index: 20;
}

.logo-cycle-stage > .banner.logo-cycle-target{
  position: relative;
  z-index: 20 !important;
  display: block;
  vertical-align: top;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, filter;
}

.logo-cycle-stage > .banner.logo-cycle-target.logo-cycle-hidden-during-transition{
  visibility: hidden;
}

.logo-cycle-stage > .logo-cycle-overlay{
  position: absolute;
  pointer-events: none;
  z-index: 20;
  display: block;
  opacity: 0;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: opacity, filter;
}

.logo-cycle-stage > .logo-cycle-shine{
  position: absolute;
  pointer-events: none;
  z-index: 21;
  display: block;
  opacity: 0;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: opacity, filter, -webkit-mask-position, mask-position;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(108deg,
    transparent 0%,
    transparent 28%,
    rgba(0, 0, 0, 0.16) 40%,
    rgba(0, 0, 0, 0.94) 50%,
    rgba(0, 0, 0, 0.16) 60%,
    transparent 72%,
    transparent 100%);
  mask-image: linear-gradient(108deg,
    transparent 0%,
    transparent 28%,
    rgba(0, 0, 0, 0.16) 40%,
    rgba(0, 0, 0, 0.94) 50%,
    rgba(0, 0, 0, 0.16) 60%,
    transparent 72%,
    transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 235% 100%;
  mask-size: 235% 100%;
  -webkit-mask-position: 170% 0;
  mask-position: 170% 0;
}

/* =========================================
   2. Thèmes de lumière
   ========================================= */
.banner-wrap[data-logo-theme="main"]{
  --va-logo-cycle-glow: rgba(255,214,102,0.30);
  --va-logo-cycle-glow-soft: rgba(255,184,77,0.10);
  --va-logo-cycle-beam-core: rgba(255,235,170,0.88);
  --va-logo-cycle-beam-mid: rgba(255,210,118,0.36);
  --va-logo-cycle-beam-edge: rgba(255,178,64,0.06);
}

.banner-wrap[data-logo-theme="chars"]{
  --va-logo-cycle-glow: rgba(138,182,255,0.34);
  --va-logo-cycle-glow-soft: rgba(95,95,160,0.14);
  --va-logo-cycle-beam-core: rgba(178,202,255,0.78);
  --va-logo-cycle-beam-mid: rgba(122,150,255,0.30);
  --va-logo-cycle-beam-edge: rgba(120,144,255,0.08);
}

.banner-wrap[data-logo-theme="eisth"]{
  --va-logo-cycle-glow: rgba(255,105,180,0.34);
  --va-logo-cycle-glow-soft: rgba(255,51,102,0.14);
  --va-logo-cycle-beam-core: rgba(255,188,224,0.78);
  --va-logo-cycle-beam-mid: rgba(255,120,176,0.30);
  --va-logo-cycle-beam-edge: rgba(255,102,163,0.08);
}

/* =========================================
   3. Animation du nouveau logo
   ========================================= */
@keyframes va-logo-cycle-enter {
  0% {
    opacity: 0.38;
    filter:
      brightness(1.04)
      saturate(1.02)
      blur(0.6px)
      drop-shadow(0 0 4px var(--va-logo-cycle-glow-soft));
  }
  42% {
    opacity: 1;
    filter:
      brightness(1.08)
      saturate(1.03)
      blur(0.14px)
      drop-shadow(0 0 7px var(--va-logo-cycle-glow))
      drop-shadow(0 0 12px var(--va-logo-cycle-glow-soft));
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes va-logo-cycle-enter-soft {
  0% {
    opacity: 0.52;
    filter:
      brightness(1.03)
      blur(0.28px)
      drop-shadow(0 0 4px var(--va-logo-cycle-glow-soft));
  }
  48% {
    opacity: 1;
    filter:
      brightness(1.05)
      blur(0.08px)
      drop-shadow(0 0 5px var(--va-logo-cycle-glow-soft));
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes va-logo-cycle-enter-main {
  0% {
    opacity: 0;
    filter:
      brightness(0.99)
      saturate(1)
      blur(1.1px);
  }
  18% {
    opacity: 0.06;
    filter:
      brightness(0.995)
      saturate(1.002)
      blur(0.94px);
  }
  36% {
    opacity: 0.26;
    filter:
      brightness(1.006)
      saturate(1.006)
      blur(0.7px);
  }
  54% {
    opacity: 0.58;
    filter:
      brightness(1.02)
      saturate(1.01)
      blur(0.42px);
  }
  74% {
    opacity: 0.9;
    filter:
      brightness(1.038)
      saturate(1.014)
      blur(0.12px);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes va-logo-cycle-enter-fade {
  0% {
    opacity: 0.18;
    filter:
      brightness(0.997)
      blur(0.26px);
  }
  54% {
    opacity: 1;
    filter:
      brightness(1.01)
      blur(0.05px);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

.logo-cycle-stage > .banner.logo-cycle-enter,
.logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter{
  animation: va-logo-cycle-enter 560ms ease-out both;
}

.banner-wrap[data-logo-theme="main"] .logo-cycle-stage > .banner.logo-cycle-enter,
.banner-wrap[data-logo-theme="main"] .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter{
  animation: va-logo-cycle-enter-main 2400ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.logo-cycle-stage > .banner.logo-cycle-enter-soft,
.logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-soft{
  animation: va-logo-cycle-enter-soft 380ms ease-out both;
}

.banner-wrap[data-logo-theme="main"] .logo-cycle-stage > .banner.logo-cycle-enter-soft,
.banner-wrap[data-logo-theme="main"] .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-soft{
  animation: va-logo-cycle-enter-soft 900ms ease-out both;
}

.logo-cycle-stage > .banner.logo-cycle-enter-fade,
.logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-fade{
  animation: va-logo-cycle-enter-fade 780ms ease-out both;
}

@keyframes va-logo-cycle-enter-main-cinematic {
  0% {
    opacity: 1;
    filter:
      brightness(0.82)
      contrast(1.03)
      saturate(0.98)
      blur(0.42px);
  }
  22% {
    opacity: 1;
    filter:
      brightness(0.92)
      contrast(1.04)
      saturate(0.99)
      blur(0.24px);
  }
  44% {
    opacity: 1;
    filter:
      brightness(1.12)
      contrast(1.07)
      saturate(1.01)
      blur(0.08px);
  }
  58% {
    opacity: 1;
    filter:
      brightness(1.4)
      contrast(1.09)
      saturate(1.02)
      blur(0);
  }
  78% {
    opacity: 1;
    filter:
      brightness(1.1)
      contrast(1.05)
      saturate(1.01);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

.logo-cycle-stage > .banner.logo-cycle-enter-main-cinematic,
.logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-main-cinematic{
  animation: va-logo-cycle-enter-main-cinematic 1820ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}


@keyframes va-logo-cycle-enter-main-cinematic-hover {
  0% {
    opacity: 1;
    filter:
      brightness(0.96)
      contrast(1.04)
      saturate(0.99)
      blur(0.22px);
  }
  14% {
    opacity: 1;
    filter:
      brightness(1.08)
      contrast(1.06)
      saturate(1)
      blur(0.1px);
  }
  34% {
    opacity: 1;
    filter:
      brightness(1.34)
      contrast(1.09)
      saturate(1.02)
      blur(0);
  }
  62% {
    opacity: 1;
    filter:
      brightness(1.12)
      contrast(1.05)
      saturate(1.01);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

.logo-cycle-stage > .banner.logo-cycle-enter-main-cinematic-hover,
.logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-main-cinematic-hover{
  animation: va-logo-cycle-enter-main-cinematic-hover 1380ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

/* =========================================
   4. Lumière ciné dans le logo
   ========================================= */
@keyframes va-logo-cycle-shine-main {
  0% {
    opacity: 0;
    -webkit-mask-position: 165% 0;
    mask-position: 165% 0;
    filter:
      brightness(1.08)
      contrast(1.03)
      saturate(0.96);
  }
  18% {
    opacity: 0;
    -webkit-mask-position: 128% 0;
    mask-position: 128% 0;
    filter:
      brightness(1.1)
      contrast(1.03)
      saturate(0.96);
  }
  38% {
    opacity: 0.2;
    -webkit-mask-position: 92% 0;
    mask-position: 92% 0;
    filter:
      brightness(1.28)
      contrast(1.06)
      saturate(0.98);
  }
  54% {
    opacity: 0.5;
    -webkit-mask-position: 56% 0;
    mask-position: 56% 0;
    filter:
      brightness(1.76)
      contrast(1.1)
      saturate(1);
  }
  68% {
    opacity: 0.34;
    -webkit-mask-position: 22% 0;
    mask-position: 22% 0;
    filter:
      brightness(1.36)
      contrast(1.06)
      saturate(0.98);
  }
  86% {
    opacity: 0.1;
    -webkit-mask-position: -10% 0;
    mask-position: -10% 0;
    filter:
      brightness(1.18)
      contrast(1.04)
      saturate(0.97);
  }
  100% {
    opacity: 0;
    -webkit-mask-position: -38% 0;
    mask-position: -38% 0;
    filter:
      brightness(1.06)
      contrast(1.02)
      saturate(0.96);
  }
}

.logo-cycle-stage > .logo-cycle-shine.is-active{
  animation: va-logo-cycle-shine-main 1820ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}


@keyframes va-logo-cycle-shine-main-hover {
  0% {
    opacity: 0.12;
    -webkit-mask-position: 138% 0;
    mask-position: 138% 0;
    filter:
      brightness(1.18)
      contrast(1.05)
      saturate(0.98);
  }
  18% {
    opacity: 0.34;
    -webkit-mask-position: 96% 0;
    mask-position: 96% 0;
    filter:
      brightness(1.5)
      contrast(1.08)
      saturate(1);
  }
  42% {
    opacity: 0.56;
    -webkit-mask-position: 48% 0;
    mask-position: 48% 0;
    filter:
      brightness(1.82)
      contrast(1.1)
      saturate(1.01);
  }
  68% {
    opacity: 0.24;
    -webkit-mask-position: 2% 0;
    mask-position: 2% 0;
    filter:
      brightness(1.28)
      contrast(1.06)
      saturate(0.98);
  }
  100% {
    opacity: 0;
    -webkit-mask-position: -34% 0;
    mask-position: -34% 0;
    filter:
      brightness(1.08)
      contrast(1.03)
      saturate(0.96);
  }
}

.logo-cycle-stage > .logo-cycle-shine.is-active-hover{
  animation: va-logo-cycle-shine-main-hover 1380ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

/* =========================================
   5. Trace du logo précédent
   ========================================= */
@keyframes va-logo-cycle-ghost-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      saturate(1)
      blur(0);
  }
  44% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.02)
      saturate(1.01)
      blur(0.16px)
      drop-shadow(0 0 4px var(--va-logo-cycle-glow-soft));
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.08)
      saturate(1.02)
      blur(2.2px)
      drop-shadow(0 0 8px var(--va-logo-cycle-glow-soft));
  }
}

@keyframes va-logo-cycle-ghost-out-main {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      saturate(1)
      blur(0);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.006)
      saturate(1.002)
      blur(0.08px);
  }
  82% {
    opacity: 0.44;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.018)
      saturate(1.006)
      blur(0.9px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.026)
      saturate(1.006)
      blur(1.8px);
  }
}

@keyframes va-logo-cycle-ghost-out-main-cinematic {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1)
      contrast(1)
      saturate(1)
      blur(0);
  }
  34% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(0.98)
      contrast(1.02)
      saturate(0.99)
      blur(0.04px);
  }
  52% {
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(0.88)
      contrast(1.03)
      saturate(0.98)
      blur(0.12px);
  }
  66% {
    opacity: 0.16;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(0.7)
      contrast(1.04)
      saturate(0.96)
      blur(0.58px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(0.62)
      contrast(1.05)
      saturate(0.95)
      blur(1.1px);
  }
}

.logo-cycle-stage > .logo-cycle-ghost{
  position: absolute;
  pointer-events: none;
  z-index: 19;
  display: block;
  opacity: 1;
  transform: translateZ(0);
  transform-origin: center center;
  will-change: opacity, filter;
}

.logo-cycle-stage > .logo-cycle-ghost.logo-cycle-ghost-top{
  z-index: 20;
}

@keyframes va-logo-cycle-ghost-out-fade {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
  46% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.003)
      blur(0.04px);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      brightness(1.01)
      blur(0.45px);
  }
}

.logo-cycle-stage > .logo-cycle-ghost.logo-cycle-ghost-out.is-out{
  animation: va-logo-cycle-ghost-out 560ms ease-out both;
}

.banner-wrap[data-logo-theme="main"] .logo-cycle-stage > .logo-cycle-ghost.logo-cycle-ghost-out.is-out{
  animation: va-logo-cycle-ghost-out-main 2400ms linear both;
}

.logo-cycle-stage > .logo-cycle-ghost.logo-cycle-ghost-out-main-cinematic.is-out{
  animation: va-logo-cycle-ghost-out-main-cinematic 1820ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.logo-cycle-stage > .logo-cycle-ghost.logo-cycle-ghost-out-fade.is-out{
  animation: va-logo-cycle-ghost-out-fade 780ms ease-out both;
}

/* =========================================
   6. Mode réduit
   ========================================= */
@media (prefers-reduced-motion: reduce){
  .logo-cycle-stage > .banner.logo-cycle-enter,
  .logo-cycle-stage > .banner.logo-cycle-enter-soft,
  .logo-cycle-stage > .banner.logo-cycle-enter-fade,
  .logo-cycle-stage > .banner.logo-cycle-enter-main-cinematic,
  .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter,
  .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-soft,
  .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-fade,
  .logo-cycle-stage > .logo-cycle-overlay.logo-cycle-enter-main-cinematic,
  .logo-cycle-stage > .logo-cycle-shine.is-active,
  .logo-cycle-stage > .logo-cycle-ghost.is-out{
    animation: none !important;
  }
}