/* enderfx.css — motion + flavor layer for Ender AI.
   Three features, all progressive-enhancement (nothing breaks if JS is off):
     1. Scroll-reveal    — Hamilton-style fade/slide-up as content enters view.
     2. Fun-fact ribbon  — Bedrock loading-screen style rotating tips.
     3. Chat mob arena   — pixel-art BABY (bobblehead) mobs brawling on top of
                           the chat input: creeper / zombie / skeleton / spider.
   All of it yields to `prefers-reduced-motion`. */

/* ----------------------------------------------------------------------
   1. SCROLL REVEAL (Hamilton-style fade/slide-up)
   ---------------------------------------------------------------------- */
.mc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.16,.84,.28,1),
              transform .62s cubic-bezier(.16,.84,.28,1);
  will-change: opacity, transform;
}
.mc-reveal.is-in { opacity: 1; transform: none; }
.mc-reveal.mc-reveal--d1 { transition-delay: .06s; }
.mc-reveal.mc-reveal--d2 { transition-delay: .12s; }
.mc-reveal.mc-reveal--d3 { transition-delay: .18s; }
.mc-reveal.mc-reveal--d4 { transition-delay: .24s; }

.mc-main .mc-page-intro { animation: mcPageIn .5s cubic-bezier(.16,.84,.28,1) both; }
@keyframes mcPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------
   2. FUN-FACT RIBBON  (bottom-center pill, rotates)
   ---------------------------------------------------------------------- */
#mc-funfact {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(560px, 92vw);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--mc-font-pixel, 'VT323', monospace);
  font-size: 15px;
  line-height: 1.25;
  color: #fdf6d8;
  background: rgba(24, 28, 22, 0.92);
  border: 2px solid #0c0f0a;
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  pointer-events: auto;
}
#mc-funfact .mc-ff-label { color: #ffd93b; font-weight: 700; white-space: nowrap; }
#mc-funfact .mc-ff-text { transition: opacity .35s ease; }
#mc-funfact.mc-ff-swap .mc-ff-text { opacity: 0; }
#mc-funfact .mc-ff-x { margin-left: 6px; color: #8a9187; cursor: pointer; font-size: 14px; }
#mc-funfact .mc-ff-x:hover { color: #ff6b6b; }
/* Keep the ribbon clear of the chat input (where the mobs live). */
body:has(.chat-form) #mc-funfact { bottom: auto; top: 14px; }

/* ----------------------------------------------------------------------
   3. CHAT MOB PARADE — squared pixel mini-figures with in-game faces.
   All four (creeper / zombie / skeleton / spider) patrol back and forth
   across the top of the chat input, each in its own lane at its own pace
   (spider runs, creeper strolls). No fighting, no flashes.
   Three nested transforms: .mc-mob patrols (translateX),
   .mc-mob-hop does the step bounce (translateY), <g class="mc-head"> the
   little head wobble.
   ---------------------------------------------------------------------- */
.mc-mob-arena {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  height: 40px;
  margin-bottom: -3px;
  pointer-events: none;
  z-index: 5;
}
.mc-mob {
  position: absolute;
  bottom: 0;
  height: 38px;
  will-change: transform;
  animation: mcPatrol var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.mc-mob-hop {
  display: block;
  animation: mcHop var(--hop, .5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.mc-mob svg {
  height: 38px;
  width: auto;
  display: block;
  shape-rendering: crispEdges;   /* hard pixel edges — no anti-alias blur */
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.32));
}
.mc-mob .mc-head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mcBob var(--hop, .5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes mcPatrol {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--range, 90px)); }
}
@keyframes mcHop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
@keyframes mcBob {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ----------------------------------------------------------------------
   4. LANDO-STYLE CINEMATIC PACK — speed + bold transitions.
      a. Telemetry speed-bar   — neon progress line as you scroll.
      b. Navigation sweep      — diagonal accent panel wipes across on nav.
      c. Heading clip-wipe     — big headings reveal via a left-to-right mask.
   ---------------------------------------------------------------------- */

/* a. telemetry speed-bar (scroll progress) */
#mc-speedbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 9998;
  background: linear-gradient(90deg, var(--mc-accent, #38e07b), #eaff00);
  box-shadow: 0 0 8px var(--mc-accent, #38e07b), 0 0 2px #fff;
  transition: width .08s linear;
  pointer-events: none;
}

/* b. cinematic navigation sweep (papaya/neon racing wipe) */
#mc-sweep {
  position: fixed;
  top: 0; bottom: 0;
  left: -25vw; right: -25vw;
  z-index: 9999;
  pointer-events: none;
  display: none;
  transform: translateX(-135%) skewX(-7deg);
  background: linear-gradient(100deg,
      transparent 0 4%,
      var(--mc-accent, #38e07b) 4% 9%,
      #0c130f 9% 100%);
}
#mc-sweep.is-cover {
  display: block;
  animation: mcSweep .9s cubic-bezier(.72, 0, .24, 1) forwards;
}
@keyframes mcSweep {
  from { transform: translateX(-135%) skewX(-7deg); }
  to   { transform: translateX(0)     skewX(-7deg); }
}

/* cherry-blossom petals drifting through the cutscene */
#mc-petals {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}
.mc-petal {
  position: absolute;
  top: -8%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 32% 28%, #ffe3ec 0 30%, #ff9ebd 70%, #f57ba3 100%);
  border-radius: 150% 0 150% 0;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 1px rgba(180, 60, 100, .25));
  animation: mcPetal var(--pd, 1.1s) linear var(--pdl, 0s) forwards;
}
@keyframes mcPetal {
  0%   { transform: translateY(-12vh) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .96; }
  100% { transform: translateY(96vh) translateX(var(--px, 24px)) rotate(560deg); opacity: .85; }
}

/* hover lift on interactive cards/tiles (subtle racing polish) */
.mc-card, .mc-choice-card, .mc-tile {
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
.mc-card:hover, .mc-choice-card:hover, .mc-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .28);
}

/* ambient cherry-blossom scene (Ender Chat page): blocky tree centred behind
   the chat, petals drifting in front. Chat panels are transparent so the tree
   shows through; message bubbles keep their own background for readability. */
.chat-shell { position: relative; }
.chat-shell > .chat-header,
.chat-shell > .chat-body,
.chat-shell > .chat-form { position: relative; z-index: 1; }
.mc-sakura       { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mc-sakura-front { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.mc-tree {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  height: min(56%, 380px);
  width: auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  opacity: .9;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12));
}
.mc-petal-amb {
  position: absolute;
  top: -6%;
  border-radius: 150% 0 150% 0;
  background: radial-gradient(circle at 32% 28%, #ffe3ec 0 30%, #ff9ebd 70%, #f57ba3 100%);
  filter: drop-shadow(0 1px 1px rgba(180, 60, 100, .2));
  opacity: 0;
  will-change: transform, opacity;
  animation: mcPetalAmb var(--pd, 8s) linear var(--pdl, 0s) infinite;
}
@keyframes mcPetalAmb {
  0%   { transform: translateY(-8%) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  90%  { opacity: .95; }
  100% { transform: translateY(108%) translateX(var(--px, 30px)) rotate(600deg); opacity: 0; }
}

/* c. heading clip-wipe reveal (bold cinematic typography) */
.mc-wipe { clip-path: inset(0 100% 0 0); }
.mc-wipe.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path .8s cubic-bezier(.16, .84, .28, 1);
}

/* d. Eye of Ender cutscene — spins 360 then shatters into fragments */
#mc-eye-cut { position: fixed; inset: 0; z-index: 10002; pointer-events: none; }
.mc-eye {
  position: absolute;
  left: 50%; top: 50%;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 0 10px #45e6a3) drop-shadow(0 0 3px #d6fff0);
  animation: mcEyeSpin .64s cubic-bezier(.45, 0, .25, 1) forwards;
}
.mc-eye svg { width: 100%; height: 100%; display: block; }
@keyframes mcEyeSpin {
  0%   { transform: rotate(0deg)   scale(.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: rotate(360deg) scale(1.18); opacity: 1; }
}
.mc-frag {
  position: absolute;
  left: 50%; top: 50%;
  margin: -4px 0 0 -4px;
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(69, 230, 163, .7);
  animation: mcFrag .5s cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes mcFrag {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--tr, 180deg)) scale(.4); opacity: 0; }
}

/* Eye of Ender behind the ENDER AI logo — top-left, larger, sits BEHIND the
   title text (z-index:-1 inside the logo's own stacking context) and spins
   every ~9s. Text gets a shadow so it stays legible over the orb. */
.mc-logo.mc-has-eye {
  position: relative;
  z-index: 0;                       /* new stacking context so the eye can go behind */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.mc-brand-eye {
  position: absolute;
  top: -11px; left: -10px;
  width: 40px; height: 40px;
  opacity: .6;
  z-index: -1;                      /* behind the title, above the sidebar bg */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(69, 230, 163, .55));
  transform-origin: 50% 50%;
  animation: mcBrandSpin 9s ease-in-out infinite;
}
.mc-brand-eye svg { width: 100%; height: 100%; display: block; }
@keyframes mcBrandSpin {
  0%, 84% { transform: rotate(0deg); }
  100%    { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------
   Reduced motion: keep everything visible, kill the movement.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mc-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .mc-main .mc-page-intro { animation: none; }
  #mc-funfact .mc-ff-text { transition: none; }
  .mc-mob, .mc-mob-hop, .mc-mob .mc-head { animation: none !important; }
  #mc-sweep { display: none !important; }
  #mc-speedbar { transition: none; }
  .mc-wipe { clip-path: none !important; }
  .mc-petal-amb { display: none !important; }   /* keep the static tree, drop drift */
  #mc-eye-cut { display: none !important; }
  .mc-brand-eye { animation: none !important; }  /* eye stays, no spin */
}