/* ══════════════════════════════════════════════════════════════
   HOKKO AI: Intro DRAW (pinceau trace le logo)
   ══════════════════════════════════════════════════════════════ */

.hai-loader--draw {
  --hai-draw-expand-dur: 1.05s;
}

.hai-loader--draw .hai-loader__curtain {
  transform-origin: 50% 42%;
  will-change: clip-path, opacity;
}

.hai-loader--draw.is-label-leaving .hai-loader__curtain,
.hai-loader--draw.is-expand .hai-loader__curtain {
  animation: hai-draw-curtain var(--hai-draw-expand-dur) cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.hai-loader--draw .hai-loader__draw-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}

.hai-loader--draw .hai-loader__draw-stage {
  position: relative;
  width: clamp(200px, 42vw, 340px);
  aspect-ratio: 512 / 167;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hai-loader--draw.is-label-leaving .hai-loader__draw-stage,
.hai-loader--draw.is-expand .hai-loader__draw-stage {
  animation: hai-draw-stage-expand var(--hai-draw-expand-dur) cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.hai-loader--draw #haiDrawCanvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 28px rgba(45, 142, 255, 0.25));
}

.hai-loader--draw .hai-loader__brush {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--hai-bl);
  box-shadow: 0 0 10px rgba(45, 142, 255, 0.9), 0 0 22px rgba(45, 142, 255, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 3;
}

.hai-loader--draw.is-drawing .hai-loader__brush {
  opacity: 1;
}

.hai-loader--draw.is-reveal-ready .hai-loader__brush,
.hai-loader--draw.is-expand .hai-loader__brush {
  opacity: 0;
}

.hai-loader--draw .hai-loader__label--draw {
  font-family: var(--hai-fft);
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hai-wh);
  opacity: 0;
  transform: translateY(8px);
}

.hai-loader--draw .hai-loader__label--draw span { color: var(--hai-blue); }

.hai-loader--draw.is-reveal-ready:not(.is-label-leaving) .hai-loader__label--draw {
  animation: hai-draw-label-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.hai-loader--draw.is-label-leaving .hai-loader__label--draw {
  animation: none;
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(4px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hai-loader--draw.is-expand .hai-loader__label--draw {
  animation: none;
  opacity: 0;
  visibility: hidden;
}

@keyframes hai-draw-stage-expand {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  55% { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 0; transform: scale(2.45); filter: blur(1px); }
}

@keyframes hai-draw-curtain {
  0%, 18% { opacity: 1; clip-path: circle(120% at 50% 42%); }
  100% { opacity: 0; clip-path: circle(0% at 50% 42%); }
}

@keyframes hai-draw-label-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}