/* ============================================================
   Galaad — alfred.css
   Alfred companion — entry (profile 3D with depth), zoom greeting,
   scroll descent, dark section glow, contextual bubbles.
   ============================================================ */

/* ---------- Base ---------- */

.alfred-companion {
  position: fixed;
  right: var(--space-24, 24px);
  top: 80px;
  width: 96px;
  z-index: 100;
  cursor: pointer;
  user-select: none;
  outline: none;
  opacity: 0;
  /* Ni perspective ni will-change:transform ici : ils créeraient un
     containing block qui capturerait les enfants position:fixed
     (la bulle en mode zoom se retrouverait hors écran à droite).
     will-change est posé sur .alfred-figure à la place. */
}

.alfred-companion:focus-visible .alfred-figure {
  outline: 2px solid var(--galaad-accent, #c69a5e);
  outline-offset: 6px;
}

/* ---------- Entry: slide in from left, profile with depth ---------- */

.alfred--entering {
  opacity: 1;
  animation: alfred-slide-in 4.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes alfred-slide-in {
  0%   { transform: translateX(calc(-100vw - 200px)); opacity: 0; }
  3%   { opacity: 1; }
  55%  { transform: translateX(0); }
  65%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* Entry: profile SVG just slides in normally (no 3D rotation needed) */
.alfred--entering .alfred-figure {
  filter: drop-shadow(-4px 2px 3px rgba(0, 0, 0, 0.2));
}

/* Profile SVG is mirrored via JS (scaleX(-1)) so Alfred faces right during entry */

/* Remove depth shadow once turned */
.alfred--ready .alfred-figure {
  filter: none;
}

/* ---------- Zoom: Alfred's face comes very close ---------- */

.alfred--zooming {
  opacity: 1;
}

.alfred--zooming .alfred-figure {
  animation: alfred-zoom-greet 6s cubic-bezier(0.3, 0, 0.2, 1) forwards;
  transform-origin: 50% 18%;
  filter: none;
}

@keyframes alfred-zoom-greet {
  0%   { transform: scale(1) translateX(0); }
  15%  { transform: scale(9) translate(-15%, 18%); }
  /* Stay close: "Bonjour" then "Everything But The Boss" */
  75%  { transform: scale(9) translate(-15%, 18%); }
  /* Pull back */
  92%  { transform: scale(1.1) translateX(0); }
  100% { transform: scale(1) translateX(0); }
}

/* ---------- Ready state: breathing ---------- */

.alfred--ready {
  opacity: 1;
}

.alfred--ready .alfred-figure {
  animation: alfred-breath 4s ease-in-out infinite;
}

.alfred-companion:hover .alfred-figure {
  transform: translateY(-6px) scale(1.04);
}

@keyframes alfred-breath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.015); }
}

/* ---------- Figure ---------- */

.alfred-figure {
  position: relative;
  width: 96px;
  height: 150px;
  transition: transform 300ms ease-out;
  transform-style: preserve-3d;
  perspective: 600px;
  will-change: transform;
}

/* Turn profile → face : rotateY crossfade, 1200ms */
.alfred-profile-svg,
.alfred-face-svg {
  transition: opacity 400ms ease, transform 400ms ease;
  backface-visibility: hidden;
}

.alfred--turning-to-face .alfred-profile-svg {
  animation: alfred-profile-turn-out 1200ms ease-in-out forwards;
}

.alfred--turning-to-face .alfred-face-svg {
  animation: alfred-face-turn-in 1200ms ease-in-out forwards;
  display: block !important;
}

/* Handoff yeux : seulement si la rotation se produit dans le noir */
.alfred--dark.alfred--turning-to-face .alfred-eye-glow--profile {
  animation: alfred-glow-handoff-out 1200ms ease-in-out forwards;
}

.alfred--dark.alfred--turning-to-face .alfred-eye-glow--left,
.alfred--dark.alfred--turning-to-face .alfred-eye-glow--right {
  animation: alfred-glow-handoff-in 1200ms ease-in-out forwards;
  display: block !important;
}

@keyframes alfred-profile-turn-out {
  0%   { transform: rotateY(0deg) scaleX(-1); opacity: 1; }
  45%  { transform: rotateY(80deg) scaleX(-1); opacity: 0.3; }
  55%  { transform: rotateY(90deg) scaleX(-1); opacity: 0; }
  100% { transform: rotateY(90deg) scaleX(-1); opacity: 0; }
}

@keyframes alfred-face-turn-in {
  0%   { transform: rotateY(-90deg); opacity: 0; }
  45%  { transform: rotateY(-90deg); opacity: 0; }
  55%  { transform: rotateY(-80deg); opacity: 0.3; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

@keyframes alfred-glow-handoff-out {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes alfred-glow-handoff-in {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------- Dark section: body fades, eyes + graal glow ---------- */

.alfred--dark .alfred-figure svg {
  opacity: 0.03;
  transition: opacity 1.4s ease;
}

.alfred-figure svg {
  transition: opacity 1.4s ease;
}

/* Eye glows */
.alfred-eye-glow,
.alfred-graal-glow {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.alfred-eye-glow--left {
  left: 37px;
  top: 33px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 12px 5px rgba(255, 215, 0, 0.8),
              0 0 24px 8px rgba(255, 215, 0, 0.3);
}

.alfred-eye-glow--right {
  left: 52px;
  top: 35px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.8),
              0 0 20px 7px rgba(255, 215, 0, 0.3);
}

.alfred-eye-glow--profile {
  left: 27px;
  top: 34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 14px 6px rgba(255, 215, 0, 0.8),
              0 0 28px 10px rgba(255, 215, 0, 0.3);
}

/* Eye glows are scoped to which SVG is visible */
.alfred--showing-profile .alfred-eye-glow--left,
.alfred--showing-profile .alfred-eye-glow--right {
  display: none;
}

.alfred--showing-face .alfred-eye-glow--profile {
  display: none;
}

/* Blink: eyes shrink vertically (eyelid closing from top)
   and glow fades simultaneously so no residual light */
.alfred--dark .alfred-eye-glow {
  opacity: 1;
  transform-origin: center top;
  animation: alfred-eyelid 5s ease-in-out infinite;
}

.alfred--dark .alfred-eye-glow--right {
  animation-delay: 0.08s;
}

.alfred--dark .alfred-eye-glow--profile {
  animation-delay: 0.04s;
}

@keyframes alfred-eyelid {
  0%, 88%, 100% {
    transform: scaleY(1);
    box-shadow: 0 0 12px 5px rgba(255, 215, 0, 0.8),
                0 0 24px 8px rgba(255, 215, 0, 0.3);
    background: #ffd700;
  }
  /* Eyelid closes: squash vertically + kill all glow */
  93% {
    transform: scaleY(0.05);
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
    background: rgba(255, 215, 0, 0.2);
  }
  96% {
    transform: scaleY(0.05);
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
    background: rgba(255, 215, 0, 0.2);
  }
}

/* Graal glow — cup shape via clip-path */
.alfred-graal-glow {
  left: 34px;
  top: 62px;
  width: 28px;
  height: 40px;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(74, 144, 217, 0.7) 0%,
    rgba(26, 44, 77, 0.5) 50%,
    transparent 100%
  );
  box-shadow: 0 0 20px 10px rgba(74, 144, 217, 0.4),
              0 0 40px 15px rgba(74, 144, 217, 0.15);
  clip-path: polygon(
    15% 0%, 85% 0%,
    90% 5%, 90% 35%,
    70% 55%,
    60% 55%, 60% 75%,
    70% 80%, 70% 90%,
    30% 90%, 30% 80%,
    40% 75%, 40% 55%,
    30% 55%,
    10% 35%, 10% 5%
  );
}

.alfred--dark .alfred-graal-glow {
  opacity: 1;
}

/* ---------- Bubble ---------- */

.alfred-bubble {
  position: absolute;
  right: 110px;
  top: 20px;
  max-width: 280px;
  padding: 16px 20px;
  background: var(--galaad-cream, #faf7f0);
  border: 1.5px solid var(--galaad-ink, #0f1419);
  font-family: var(--font-voice, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--galaad-ink, #0f1419);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  box-shadow: 2px 2px 0 var(--galaad-ink, #0f1419);
  white-space: normal;
}

.alfred-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pendant une transition avec outil (manivelle/laptop), la bulle
   remonte au-dessus de la figure pour ne pas chevaucher l'outil. */
.alfred--bubble-up .alfred-bubble {
  top: -70px;
}

/* À l'entrée (zoom visage proche), les 2 bulles de parole apparaissent
   JUSTE À CÔTÉ de la tête zoomée d'Alfred (côté gauche de sa tête, qui
   est à droite de l'écran). Queue de bulle gardée (c'est une parole). */
.alfred--zooming .alfred-bubble {
  position: fixed;
  top: 22vh;
  right: 22vw;
  left: auto;
  transform: none;
  max-width: min(360px, 36vw);
  font-size: 24px;
  line-height: 1.35;
  padding: 18px 24px;
  z-index: 120;
  box-shadow: 3px 3px 0 var(--galaad-ink, #0f1419);
}

.alfred--zooming .alfred-bubble.visible {
  transform: none;
}

.alfred--dark .alfred-bubble {
  background: rgba(15, 20, 25, 0.92);
  color: #faf7f0;
  border-color: rgba(250, 247, 240, 0.25);
  box-shadow: 0 0 14px rgba(74, 144, 217, 0.25);
}

.alfred-bubble::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 24px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid var(--galaad-ink, #0f1419);
}

.alfred-bubble::before {
  content: '';
  position: absolute;
  right: -9px;
  top: 26px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--galaad-cream, #faf7f0);
  z-index: 1;
}

.alfred--dark .alfred-bubble::after {
  border-left-color: rgba(250, 247, 240, 0.25);
}
.alfred--dark .alfred-bubble::before {
  border-left-color: rgba(15, 20, 25, 0.92);
}

/* ---------- Bras profil : 3 poses avec fondus fluides ---------- */

.alfred-arm { transition: opacity 350ms ease; }
.alfred-arm--crank, .alfred-arm--laptop { opacity: 0; }
.alfred-arm--default { opacity: 1; }
.alfred-arm-flower { transition: opacity 350ms ease; }

.alfred--pose-crank .alfred-arm--default,
.alfred--pose-crank .alfred-arm-flower {
  opacity: 0;
}
.alfred--pose-crank .alfred-arm--crank { opacity: 1; }

.alfred--pose-laptop .alfred-arm--default,
.alfred--pose-laptop .alfred-arm-flower {
  opacity: 0;
}
.alfred--pose-laptop .alfred-arm--laptop { opacity: 1; }

/* Oscillation du bras pendant la manivelle (même fréquence que la rotation
   de la poignée : 1080deg / 2s = 1.5 tours/s → 0.65s par cycle pour un
   aller-retour synchrone avec la poignée qui passe en haut/bas). */
.alfred--cranking .alfred-arm--crank {
  transform-origin: 157px 220px; /* nouvelle épaule redessinée par Alexandre */
  transform-box: view-box;
  animation: alfred-arm-crank-motion 0.667s linear infinite;
}

/* Un cycle = un tour de manivelle (0.667s = 2s / 3 tours).
   Arm suit visuellement l'orbite de la poignée : le poignet pivote
   autour de l'épaule pour tracer un arc qui accompagne le mouvement. */
@keyframes alfred-arm-crank-motion {
  0%   { transform: rotate(0deg) translate(0, 0); }
  25%  { transform: rotate(-14deg) translate(-4px, -1px); }
  50%  { transform: rotate(-6deg) translate(-6px, 3px); }
  75%  { transform: rotate(8deg) translate(-3px, 1px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* Bob vertical du bras quand Alfred tape (suggère appui répété) */
.alfred--typing .alfred-arm--laptop {
  animation: alfred-arm-typing-motion 0.42s ease-in-out infinite;
}

@keyframes alfred-arm-typing-motion {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0.5px, 1.8px); }
}

/* Doigts qui tapent en cascade (sur la pose laptop, dans le SVG profil) */
.alfred--typing .alfred-typing-fingers path:nth-child(1) {
  animation: alfred-finger-tap 0.42s ease-in-out infinite;
  animation-delay: 0s;
}
.alfred--typing .alfred-typing-fingers path:nth-child(2) {
  animation: alfred-finger-tap 0.42s ease-in-out infinite;
  animation-delay: 0.1s;
}
.alfred--typing .alfred-typing-fingers path:nth-child(3) {
  animation: alfred-finger-tap 0.42s ease-in-out infinite;
  animation-delay: 0.2s;
}

@keyframes alfred-finger-tap {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(1.5px); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .alfred-figure,
  .alfred--entering,
  .alfred--entering .alfred-figure,
  .alfred--zooming .alfred-figure {
    animation: none !important;
  }
  .alfred-companion { opacity: 1; }
  .alfred--dark .alfred-eye-glow { animation: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .alfred-companion {
    right: var(--space-16, 16px);
    width: 64px;
    top: 64px;
  }
  .alfred-figure {
    width: 64px;
    height: 100px;
  }
  .alfred-bubble {
    right: 76px;
    max-width: 200px;
    padding: 12px 14px;
    font-size: 14px;
  }
  .alfred-eye-glow--left  { left: 26px; top: 23px; width: 5px; height: 5px; }
  .alfred-eye-glow--right { left: 35px; top: 24px; width: 3px; height: 3px; }
  .alfred-graal-glow      { left: 23px; top: 42px; width: 19px; height: 27px; }
}