/* Logos animés BeeSynergieConseil : réglages communs aux neuf logos.
   Survol : sur le logo, sur un parent .bee-logo-hover (lien, carte, bouton) ou avec la classe .is-active.
   Chargement : classe .is-loading sur le logo ; en plein écran dans un .bee-splash, que .is-done referme. */

@property --iris {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.bee-logo,
.bee-splash {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

.bee-logo {
  --logo-ink: var(--bee-ink, #17140F);
  --logo-honey: var(--bee-honey, #F5AC26);
  --logo-honey-deep: var(--bee-honey-deep, #DB930F);
  --logo-soft: var(--bee-soft, #F8CB79);
  --logo-grey: var(--bee-grey, #6B655B);
  --logo-bg: var(--bee-surface, #FFFFFF);
  overflow: visible;
}

.bee-logo-dark {
  --bee-ink: #F6F1E7;
  --bee-grey: #B3AC9F;
  --bee-surface: #17140F;
}

.bee-logo .ink { fill: var(--logo-ink); }
.bee-logo .honey { fill: var(--logo-honey); }
.bee-logo .soft { fill: var(--logo-soft); }
.bee-logo .halo { fill: var(--logo-bg); }
.bee-logo .line-honey { stroke: var(--logo-honey); }
.bee-logo .line-bg { stroke: var(--logo-bg); }
.bee-logo .name { fill: var(--logo-ink); }
.bee-logo .descriptor { fill: var(--logo-grey); }
.bee-logo .comb { stroke: var(--logo-honey); }

.bee-logo .bone {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Survol : l'abeille décolle d'un rien, bat des ailes trois fois, ses antennes rebondissent. */

.bee-logo .bee { transition: translate .7s var(--ease-spring); }
.bee-logo:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .bee { translate: 0 -5px; }

.bee-logo:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .wing-up {
  --flap: -18deg;
  animation: bee-flap .15s var(--ease-in-out) 6 alternate;
}

.bee-logo:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .wing-low {
  --flap: -10deg;
  animation: bee-flap .15s .04s var(--ease-in-out) 6 alternate;
}

.bee-logo:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .antenna { animation: bee-antenna .9s var(--ease-out); }

@keyframes bee-flap {
  to { transform: rotate(calc(var(--dir) * var(--flap))); }
}

@keyframes bee-antenna {
  18% { transform: rotate(calc(var(--dir) * 14deg)); }
  40% { transform: rotate(calc(var(--dir) * -8deg)); }
  62% { transform: rotate(calc(var(--dir) * 4deg)); }
  82% { transform: rotate(calc(var(--dir) * -1.5deg)); }
}

/* Chargement : l'abeille arrive, déplie ses ailes et vole sur place ; le nom monte lettre par lettre. */

.bee-logo.is-loading .mark {
  animation:
    bee-enter 1s var(--ease-out) both,
    bee-float 3.2s 1s ease-in-out infinite;
}

.bee-logo.is-loading .wing-up {
  --flap: -9deg;
  animation:
    bee-unfold 1s .15s var(--ease-spring) both,
    bee-flap .22s 1.15s ease-in-out infinite alternate;
}

.bee-logo.is-loading .wing-low {
  --flap: -6deg;
  animation:
    bee-unfold 1s .25s var(--ease-spring) both,
    bee-flap .22s 1.25s ease-in-out infinite alternate;
}

.bee-logo.is-loading .antenna {
  animation: bee-sway 2.6s calc(.9s + var(--dir) * .3s) ease-in-out infinite alternate both;
}

.bee-logo.is-loading .abdomen { animation: bee-breathe 1.8s ease-in-out infinite alternate; }

.bee-logo.is-loading .name[clip-path] .letter {
  animation: bee-rise .9s calc(.45s + var(--i) * 45ms) var(--ease-out) both;
}

.bee-logo.is-loading .name:not([clip-path]) .letter {
  animation: bee-appear .7s calc(.45s + var(--i) * 45ms) var(--ease-out) both;
}

.bee-logo.is-loading .descriptor .letter {
  animation: bee-spread 1.2s calc(.95s + var(--i) * 20ms) var(--ease-out) both;
}

.bee-logo.is-loading .comb { opacity: 1; }

.bee-logo.is-loading .cell {
  animation: bee-ripple 3.6s calc(1s + var(--d) * .12s) ease-in-out infinite both;
}

@keyframes bee-enter {
  from {
    opacity: 0;
    scale: .8;
    translate: 0 14px;
  }
}

@keyframes bee-float {
  50% { transform: translateY(-6px); }
}

@keyframes bee-unfold {
  from { rotate: calc(var(--dir) * 75deg); }
}

@keyframes bee-sway {
  from { transform: rotate(calc(var(--dir) * -5deg)); }
  to { transform: rotate(calc(var(--dir) * 7deg)); }
}

@keyframes bee-breathe {
  to { transform: scale(1.015, 1.035); }
}

@keyframes bee-rise {
  from { translate: 0 calc(var(--rise) * 1px); }
}

@keyframes bee-appear {
  from {
    opacity: 0;
    translate: 0 calc(var(--rise) * .2px);
  }
}

@keyframes bee-spread {
  from {
    opacity: 0;
    translate: calc(var(--x) * -.6px) 0;
  }
}

@keyframes bee-ripple {
  0%, 50%, 100% { opacity: 0; }
  18% { opacity: calc(.34 - (var(--d) - 3) * .055); }
}

/* Écran de chargement et sortie : l'écran se referme en alvéole sur l'abeille. */

.bee-splash {
  --iris-x: 50%;
  --iris-y: 42%;
  --iris-rest: min(180px, 34vmin);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bee-honey, #F5AC26);
}

.bee-splash__panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bee-surface, #FBF8F1);
}

.bee-splash .bee-logo {
  width: min(70vw, 300px);
  height: auto;
}

.bee-splash.is-done {
  --r: calc(var(--iris) + 5px);
  animation: bee-iris 1.2s var(--ease-in-out) forwards;
  pointer-events: none;
}

.bee-splash.is-done .bee-splash__panel { --r: var(--iris); }

.bee-splash.is-done,
.bee-splash.is-done .bee-splash__panel {
  clip-path: polygon(
    var(--iris-x) calc(var(--iris-y) - var(--r)),
    calc(var(--iris-x) + var(--r) * .866) calc(var(--iris-y) - var(--r) * .5),
    calc(var(--iris-x) + var(--r) * .866) calc(var(--iris-y) + var(--r) * .5),
    var(--iris-x) calc(var(--iris-y) + var(--r)),
    calc(var(--iris-x) - var(--r) * .866) calc(var(--iris-y) + var(--r) * .5),
    calc(var(--iris-x) - var(--r) * .866) calc(var(--iris-y) - var(--r) * .5)
  );
}

.bee-splash.is-done .wordmark,
.bee-splash.is-done .comb {
  opacity: 0;
  transition: opacity .3s;
}

.bee-splash.is-done .symbol {
  transform-box: fill-box;
  transform-origin: center;
  animation: bee-shrink 1.2s var(--ease-in-out) both;
}

@keyframes bee-shrink {
  0%, 62% { scale: 1; }
  100% { scale: .15; }
}

@keyframes bee-iris {
  0% { --iris: 150vmax; }
  50%, 62% { --iris: var(--iris-rest); }
  90% { opacity: 1; }
  100% { --iris: 0px; opacity: 0; }
}

.bee-splash__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bee-logo *,
  .bee-splash,
  .bee-splash * {
    animation: none !important;
    transition: none !important;
  }

  .bee-logo.is-loading .symbol { animation: bee-pulse 2s ease-in-out infinite !important; }
  .bee-logo.is-loading .cell { opacity: calc(.17 - (var(--d) - 3) * .0275); }
  .bee-splash.is-done { animation: bee-fade .4s forwards !important; }

  .bee-splash.is-done,
  .bee-splash.is-done .bee-splash__panel { clip-path: none; }
}

@keyframes bee-pulse {
  50% { opacity: .55; }
}

@keyframes bee-fade {
  to { opacity: 0; }
}