/* ==========================================================================
   Pixel2Motion Logo Animation - 钢铁私塾 INOX ACADEMY
   Personality: Precise, Confident, Metallic
   Usage context: Header reveal (page load) + hover micro-interaction
   Timeline: 1600ms total (Anticipation 320ms : Action 800ms : Follow-through 480ms)
   Principles applied: Staging, Slow In/Slow Out, Timing, Follow Through, Appeal,
   Secondary Action (shine), Overlapping Action (staggered atoms/letters)
   ========================================================================== */

/* Motion tokens */
:root {
  --p2m-duration: 1600ms;
  --p2m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --p2m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --p2m-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --p2m-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Logo color tokens - Classic (wine) theme default */
  --logo-frame-top: #8B2635;
  --logo-frame-bot: #5C1A24;
  --logo-frame-stroke: #4A151D;
  --logo-accent: #D4A853;
  --logo-accent-light: #E8D5A3;
  --logo-accent-dark: #B8860B;
  --logo-border: rgba(212,168,83,0.4);
  --logo-hex-fill: rgba(212,168,83,0.08);
}

/* Professional (Coursera blue) theme logo colors */
body.theme-coursera {
  --logo-frame-top: #0056d2;
  --logo-frame-bot: #003d99;
  --logo-frame-stroke: #003d99;
  --logo-accent: #5b9bd5;
  --logo-accent-light: #9dc3e6;
  --logo-accent-dark: #0056d2;
  --logo-border: rgba(0,86,210,0.3);
  --logo-hex-fill: rgba(0,86,210,0.06);
}

/* Ensure inline SVG logo displays correctly */
.brand-logo svg {
  display: block;
  height: 100%;
  width: auto;
}

/* ==========================================================================
   REPLAY MECHANISM - remove and re-add .logo-animated class to replay
   ========================================================================== */
.brand-logo.logo-replay {
  animation: none !important;
}

/* ==========================================================================
   INITIAL STATE - All parts hidden/positioned for animation start
   ========================================================================== */

/* Mark frame: start scaled down, slight opacity */
.logo-animated #mark-frame {
  transform-origin: 32px 32px;
  transform-box: fill-box;
  transform: scale(0.6);
  opacity: 0;
  animation: frame-reveal 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

/* Inner border: start transparent, scale slightly */
.logo-animated #mark-inner-border {
  transform-origin: 32px 32px;
  transform-box: fill-box;
  transform: scale(0.7);
  opacity: 0;
  animation: border-reveal 400ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards;
}

/* Crystal group: start slightly transparent */
.logo-animated #crystal-group {
  opacity: 0;
  animation: crystal-fade 300ms cubic-bezier(0.16, 1, 0.3, 1) 550ms forwards;
}

/* Hexagon: stroke draw-on animation */
.logo-animated #hexagon {
  stroke-dashoffset: 108;
  animation: hex-draw 500ms cubic-bezier(0.65, 0, 0.35, 1) 600ms forwards;
}

/* Center atom: pop first */
.logo-animated #atom-center {
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0);
  opacity: 0;
  animation: atom-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 850ms forwards;
}

/* Outer atoms: stagger clockwise from top */
.logo-animated #atom-0,
.logo-animated #atom-1,
.logo-animated #atom-2,
.logo-animated #atom-3,
.logo-animated #atom-4,
.logo-animated #atom-5 {
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0);
  opacity: 0;
}
.logo-animated #atom-0 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 920ms forwards; }
.logo-animated #atom-1 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 960ms forwards; }
.logo-animated #atom-2 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1000ms forwards; }
.logo-animated #atom-3 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1040ms forwards; }
.logo-animated #atom-4 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1080ms forwards; }
.logo-animated #atom-5 { animation: atom-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1120ms forwards; }

/* Accent line: wipe from left */
.logo-animated #mark-accent {
  animation: accent-wipe 350ms cubic-bezier(0.16, 1, 0.3, 1) 1150ms forwards;
}

/* Mark text (icon version): fade in */
.logo-animated #mark-text {
  animation: text-fade 300ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms forwards;
}

/* Metallic shine: sweeps across after assembly */
.logo-animated #mark-shine {
  opacity: 0;
  transform: translateX(-30px);
  animation:
    shine-fade 600ms cubic-bezier(0.65, 0, 0.35, 1) 1300ms forwards,
    shine-move 600ms linear 1300ms forwards;
}

/* Wordmark group: fade in (horizontal logo version) */
.logo-animated #wordmark {
  opacity: 0;
  transform: translateX(-5px);
  animation: wordmark-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}

/* Wordmark line: wipe */
.logo-animated #wordmark-line {
  animation: accent-wipe 400ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
}

/* English text: slight delay */
.logo-animated #wordmark-en {
  opacity: 0;
  animation: text-fade 350ms cubic-bezier(0.16, 1, 0.3, 1) 1150ms forwards;
}

/* Chinese characters: subtle stagger */
.logo-animated #cn-1,
.logo-animated #cn-2,
.logo-animated #cn-3,
.logo-animated #cn-4 {
  opacity: 0;
  transform: translateY(3px);
  animation: cn-letter 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.logo-animated #cn-1 { animation-delay: 950ms; }
.logo-animated #cn-2 { animation-delay: 1000ms; }
.logo-animated #cn-3 { animation-delay: 1050ms; }
.logo-animated #cn-4 { animation-delay: 1100ms; }

/* ==========================================================================
   KEYFRAMES (literal easings as required by pixel2motion spec)
   ========================================================================== */

@keyframes frame-reveal {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; } /* ease-bounce overshoot */
  100% { transform: scale(1); opacity: 1; }
}

@keyframes border-reveal {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes crystal-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hex-draw {
  0%   { stroke-dashoffset: 108; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes atom-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.3); opacity: 1; } /* overshoot for appeal */
  100% { transform: scale(1); opacity: 1; }
}

@keyframes accent-wipe {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes shine-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shine-move {
  0%   { transform: translateX(-30px); }
  100% { transform: translateX(30px); }
}

@keyframes wordmark-fade {
  0%   { opacity: 0; transform: translateX(-5px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes text-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes cn-letter {
  0%   { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HOVER MICRO-INTERACTION (subtle, for header logo)
   ========================================================================== */

.brand-logo.logo-hover {
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-logo.logo-hover:hover {
  transform: scale(1.05);
}

.brand-logo.logo-hover:hover #crystal-group {
  transform: translate(32px, 32px) rotate(12deg);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-logo.logo-hover #crystal-group {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   REDUCED MOTION - instant final state (accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .logo-animated #mark-frame,
  .logo-animated #mark-inner-border,
  .logo-animated #crystal-group,
  .logo-animated #hexagon,
  .logo-animated #atom-center,
  .logo-animated #atom-0,
  .logo-animated #atom-1,
  .logo-animated #atom-2,
  .logo-animated #atom-3,
  .logo-animated #atom-4,
  .logo-animated #atom-5,
  .logo-animated #mark-accent,
  .logo-animated #mark-text,
  .logo-animated #mark-shine,
  .logo-animated #wordmark,
  .logo-animated #wordmark-line,
  .logo-animated #wordmark-en,
  .logo-animated #cn-1,
  .logo-animated #cn-2,
  .logo-animated #cn-3,
  .logo-animated #cn-4 {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    clip-path: none !important;
  }
}