/*
 * Aurel — animated brand avatar widget
 *
 * Crops and animates /views/img/aurel2.png (600x750, 4:5) into a living,
 * reactive portrait of the assistant. Replaces the letter-initials placeholder.
 *
 * Composition:
 *   .aurel-avatar                     root (sets size + state modifiers)
 *     └ .aurel-avatar__halo           conic gradient ring (rotates on think)
 *     └ .aurel-avatar__frame          circular clip for the face
 *         └ .aurel-avatar__face       the background-cropped portrait
 *     └ .aurel-avatar__sparks         orbiting dots (thinking / greeting)
 *
 * Sizes (set on root): --sm 40px | --md 64px | --lg 112px | --xl 180px
 * States (set on root): .is-idle | .is-thinking | .is-speaking | .is-error | .is-greeting
 *
 * The face crop is tuned against the known image geometry:
 *   head/face ≈ 5–38% vertical (eye line ~22%)
 *   bust ≈ 45–100% vertical (no badge, no watermark)
 */

:root {
  --aurel-ink:       #17150f;  /* deep charcoal, matches dark-500 */
  --aurel-ink-soft:  rgba(23, 21, 15, 0.65);
  --aurel-violet:    #7c3aed;  /* brand violet, deeper than highlight */
  --aurel-violet-2:  #a78bfa;  /* soft accent */
  --aurel-violet-3:  #e9d5ff;  /* gleam */
  --aurel-cream:     #faf6ef;
  --aurel-rose:      #e11d48;  /* error-only */
}

/* ── root ──────────────────────────────────────────────────────── */
.aurel-avatar {
  position: relative;
  display: inline-block;
  width: var(--aurel-size, 40px);
  height: var(--aurel-size, 40px);
  flex-shrink: 0;
  isolation: isolate;
  /* subtle ambient glow baseline */
  filter: drop-shadow(0 4px 14px rgba(124, 58, 237, 0.12));
  transition: filter 400ms ease, transform 400ms ease;
}

.aurel-avatar--sm { --aurel-size: 40px; --aurel-ring: 2px; --aurel-bg-size: 200%; --aurel-bg-y: 18%; }
.aurel-avatar--md { --aurel-size: 64px; --aurel-ring: 2px; --aurel-bg-size: 165%; --aurel-bg-y: 20%; }
.aurel-avatar--lg { --aurel-size: 112px; --aurel-ring: 3px; --aurel-bg-size: 140%; --aurel-bg-y: 22%; }
.aurel-avatar--xl { --aurel-size: 180px; --aurel-ring: 3px; --aurel-bg-size: 125%; --aurel-bg-y: 24%; }

/* ── halo: conic ring that rotates when thinking ───────────────── */
.aurel-avatar__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      var(--aurel-ink)    0deg,
      var(--aurel-violet) 90deg,
      var(--aurel-violet-3) 180deg,
      var(--aurel-violet) 270deg,
      var(--aurel-ink)    360deg
    );
  padding: var(--aurel-ring, 2px);
  z-index: 1;
  transform: rotate(0deg);
  transition: opacity 300ms ease;
}

.aurel-avatar__halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--aurel-ink);
  transform: scale(0.96);
  z-index: 0;
}

/* ── frame + face portrait ─────────────────────────────────────── */
.aurel-avatar__frame {
  position: absolute;
  inset: var(--aurel-ring, 2px);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  background: #1a1815;
  box-shadow: inset 0 -4px 18px rgba(124, 58, 237, 0.25);
}

.aurel-avatar__face {
  position: absolute;
  inset: 0;
  background-image: var(--aurel-img, url("../img/aurel2.png"));
  background-repeat: no-repeat;
  background-size: var(--aurel-bg-size, 260%) auto;
  background-position: 50% var(--aurel-bg-y, 23%);
  filter: saturate(1.05) contrast(1.03);
  transform-origin: 50% 60%;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}

/* 2.5D depth: a blurred desaturated copy sits BEHIND the sharp face.
   Breathing offset between the two layers creates a parallax feel. */
.aurel-avatar__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aurel-img, url("../img/aurel2.png"));
  background-repeat: no-repeat;
  background-size: calc(var(--aurel-bg-size, 260%) * 1.06) auto;
  background-position: 50% calc(var(--aurel-bg-y, 23%) + 1%);
  filter: blur(3px) saturate(0.8) brightness(0.72);
  transform: scale(1.08);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}

/* soft vignette that gives the portrait depth */
.aurel-avatar__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 15%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(120% 100% at 50% 120%, rgba(23,21,15,0.55) 0%, rgba(23,21,15,0) 55%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}

/* ── orbiting sparks (appear only on thinking + greeting) ──────── */
.aurel-avatar__sparks {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}

.aurel-avatar__sparks span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background: var(--aurel-violet-2);
  box-shadow:
    0 0 10px var(--aurel-violet-2),
    0 0 18px rgba(167,139,250,0.6);
  transform-origin: 0 0;
}

.aurel-avatar__sparks span:nth-child(1) { animation: aurel-orbit 3.2s linear infinite; }
.aurel-avatar__sparks span:nth-child(2) { animation: aurel-orbit 4.1s linear infinite -1.3s; background: var(--aurel-violet-3); box-shadow: 0 0 10px var(--aurel-violet-3); }
.aurel-avatar__sparks span:nth-child(3) { animation: aurel-orbit 5.5s linear infinite -3.0s; width: 4px; height: 4px; }

/* ── states ────────────────────────────────────────────────────── */

/* idle: gentle breath + occasional shimmer across the halo */
.aurel-avatar.is-idle .aurel-avatar__face {
  animation: aurel-breathe 5.6s ease-in-out infinite;
}
.aurel-avatar.is-idle .aurel-avatar__frame::before {
  animation: aurel-back-drift 5.6s ease-in-out infinite;
}
.aurel-avatar.is-idle .aurel-avatar__halo {
  animation: aurel-halo-drift 18s linear infinite;
  opacity: 0.9;
}

/* thinking: halo spins faster, sparks visible, stronger glow */
.aurel-avatar.is-thinking {
  filter: drop-shadow(0 8px 22px rgba(124, 58, 237, 0.45));
}
.aurel-avatar.is-thinking .aurel-avatar__halo {
  animation: aurel-spin 2.4s linear infinite;
  opacity: 1;
}
.aurel-avatar.is-thinking .aurel-avatar__face {
  animation: aurel-tilt 3.2s ease-in-out infinite;
}
.aurel-avatar.is-thinking .aurel-avatar__sparks {
  opacity: 1;
}

/* speaking: pulsing glow, no rotation (calm + expressive) */
.aurel-avatar.is-speaking {
  filter: drop-shadow(0 6px 18px rgba(167, 139, 250, 0.45));
  animation: aurel-speak 0.9s ease-in-out infinite;
}
.aurel-avatar.is-speaking .aurel-avatar__halo {
  animation: aurel-halo-pulse 1.2s ease-in-out infinite;
}

/* greeting: big arrival animation (first mount) */
.aurel-avatar.is-greeting .aurel-avatar__halo {
  animation: aurel-spin 3.6s linear infinite;
}
.aurel-avatar.is-greeting .aurel-avatar__sparks {
  opacity: 1;
}
.aurel-avatar.is-greeting {
  animation: aurel-arrive 900ms cubic-bezier(.2,.8,.2,1) 1 both;
}

/* error: red tint + quick shake */
.aurel-avatar.is-error .aurel-avatar__halo {
  background: conic-gradient(
    from 0deg,
    var(--aurel-ink) 0deg,
    var(--aurel-rose) 90deg,
    #fecaca 180deg,
    var(--aurel-rose) 270deg,
    var(--aurel-ink) 360deg
  );
}
.aurel-avatar.is-error {
  animation: aurel-shake 450ms ease-in-out 1;
  filter: drop-shadow(0 6px 18px rgba(225, 29, 72, 0.4));
}

/* ── keyframes ─────────────────────────────────────────────────── */

@keyframes aurel-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
@keyframes aurel-back-drift {
  /* breathes in counter-phase to the front face → feels parallaxed */
  0%, 100% { transform: scale(1.08) translateY(0); }
  50%      { transform: scale(1.095) translateY(-1.5px); }
}
@keyframes aurel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes aurel-halo-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes aurel-halo-pulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}
@keyframes aurel-tilt {
  0%, 100% { transform: rotate(-1deg) scale(1.01); }
  50%      { transform: rotate(1deg)  scale(1.02); }
}
@keyframes aurel-speak {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes aurel-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes aurel-arrive {
  0%   { transform: scale(0.82); opacity: 0; filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; filter: drop-shadow(0 10px 34px rgba(124,58,237,0.45)); }
}
@keyframes aurel-orbit {
  0%   { transform: rotate(0deg) translateX(calc(var(--aurel-size, 40px) * 0.56)) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(calc(var(--aurel-size, 40px) * 0.56)) rotate(-360deg); }
}

/* ── hero "portrait card" — rectangular, luxe, editorial ───────── */
.aurel-portrait {
  position: relative;
  width: 168px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 48px -18px rgba(124, 58, 237, 0.45),
    0 6px 20px -6px rgba(23, 21, 15, 0.25);
  background: var(--aurel-ink);
  flex-shrink: 0;
  animation: aurel-portrait-in 900ms cubic-bezier(.2,.8,.2,1) 1 both;
}

@media (min-width: 768px) {
  .aurel-portrait { width: 220px; border-radius: 32px; }
}

.aurel-portrait__img,
.aurel-portrait__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  z-index: 1;
}

.aurel-portrait__img {
  background-image: var(--aurel-img, url("../img/aurel2.png"));
  background-repeat: no-repeat;
  /* aspect 4:5 matches the card; show the full clean portrait */
  background-size: 105% auto;
  background-position: 50% 0%;
}

/* Gradient overlay above the image/video, below the caption + crest */
.aurel-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23,21,15,0) 42%, rgba(23,21,15,0.65) 100%),
    radial-gradient(120% 50% at 50% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  z-index: 1;
}

.aurel-portrait__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 20% 80%, rgba(124,58,237,0.55) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(50% 50% at 80% 20%, rgba(167,139,250,0.45) 0%, rgba(167,139,250,0) 60%);
  z-index: -1;
  filter: blur(18px);
  animation: aurel-halo-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

.aurel-portrait__crest {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: rgba(23, 21, 15, 0.55);
  backdrop-filter: blur(8px);
  color: var(--aurel-violet-3);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(233, 213, 255, 0.25);
  z-index: 2;
}
.aurel-portrait__crest svg { width: 10px; height: 10px; }

.aurel-portrait__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: var(--aurel-cream);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aurel-portrait__caption .n {
  font-family: 'Syne', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  line-height: 1;
}
.aurel-portrait__caption .role {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.72);
}

@keyframes aurel-portrait-in {
  0%   { transform: translateY(8px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* ── hero composition ──────────────────────────────────────────── */
.aurel-hero-stage {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .aurel-hero-stage { gap: 18px; }
}

.aurel-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

/* a tiny pulsing "dot" that says Aurel is online */
.aurel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b6354;
}
.aurel-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aurel-violet);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.6);
  animation: aurel-status-pulse 1.8s ease-in-out infinite;
}
@keyframes aurel-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}

/* ── accessibility: reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurel-avatar *,
  .aurel-avatar,
  .aurel-portrait,
  .aurel-portrait__glow,
  .aurel-status::before {
    animation: none !important;
    transition: none !important;
  }
}