/* ── Font Awesome: glyph content cho các icon dùng trên trang ── */
.fa-arrow-right:before{content:"\f061"}
.fa-arrow-trend-up:before{content:"\e098"}
.fa-bars:before{content:"\f0c9"}
.fa-bolt:before{content:"\f0e7"}
.fa-brain:before{content:"\f5dc"}
.fa-building:before{content:"\f1ad"}
.fa-bullseye:before{content:"\f140"}
.fa-calendar:before{content:"\f133"}
.fa-circle-check:before{content:"\f058"}
.fa-code:before{content:"\f121"}
.fa-globe:before{content:"\f0ac"}
.fa-lightbulb:before{content:"\f0eb"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-map:before{content:"\f279"}
.fa-palette:before{content:"\f53f"}
.fa-quote-left:before{content:"\f10d"}
.fa-quote-right:before{content:"\f10e"}
.fa-rocket:before{content:"\f135"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-trophy:before{content:"\f091"}
.fa-user-group:before{content:"\f500"}
.fa-xmark:before{content:"\f00d"}

/* ── Scroll reveal (thay cho framer-motion initial/whileInView) ── */
[data-reveal] {
  opacity: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ryy, 0deg));
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── TiltCard (thay cho framer-motion mousemove tilt + glare) ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.tilt-card__glare {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  mix-blend-mode: overlay;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
  width: 200%;
  height: 200%;
  margin-left: -50%;
  margin-top: -50%;
  will-change: transform;
}
.tilt-card:hover .tilt-card__glare {
  opacity: 1;
}

/* ── Floating / continuous loops (thay cho framer-motion animate={{...}} infinite) ── */
@keyframes float-rotate-a {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
}
.animate-float-rotate-a { animation: float-rotate-a 5s ease-in-out infinite; }

@keyframes float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float-a { animation: float-a 3s ease-in-out .5s infinite; }

@keyframes float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
.animate-float-b { animation: float-b 3.5s ease-in-out 1s infinite; }

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-mascot-bob { animation: mascot-bob 4s ease-in-out infinite; }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
.animate-wiggle { animation: wiggle 5s ease-in-out infinite; }

@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.animate-sweep { animation: sweep 3s linear infinite; }

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: var(--dot-op, 0.2); }
  50% { transform: scale(1.5); opacity: 1; }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes pulse-blob-a {
  0%, 100% { transform: scale(1); opacity: .1; }
  50% { transform: scale(1.2); opacity: .2; }
}
.animate-pulse-blob-a { animation: pulse-blob-a 10s ease-in-out infinite; }

@keyframes pulse-blob-b {
  0%, 100% { transform: scale(1); opacity: .1; }
  50% { transform: scale(1.3); opacity: .25; }
}
.animate-pulse-blob-b { animation: pulse-blob-b 12s ease-in-out 2s infinite; }

@keyframes blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(100px, -100px) scale(1.2); }
  50% { transform: translate(0, 100px) scale(.8); }
  75% { transform: translate(-100px, -50px) scale(1.1); }
}
.animate-blob-a { animation: blob-a 25s linear infinite; }

@keyframes blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-150px, 150px) scale(.8); }
  50% { transform: translate(0, -50px) scale(1.2); }
  75% { transform: translate(100px, 100px) scale(.9); }
}
.animate-blob-b { animation: blob-b 30s linear infinite; }

@keyframes blob-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, 100px) scale(1.1); }
  50% { transform: translate(-100px, 50px) scale(.9); }
  75% { transform: translate(50px, -100px) scale(1.2); }
}
.animate-blob-c { animation: blob-c 20s linear infinite; }

@keyframes particle-float {
  0% { transform: translate(-20px, -20px); opacity: .1; }
  50% { transform: translate(20px, 20px); opacity: .8; }
  100% { transform: translate(-20px, -20px); opacity: .1; }
}

/* ── StorytellerMascot: hiện/ẩn ── */
#storyteller {
  transition: opacity .35s ease, transform .35s ease;
}
#storyteller.storyteller-hidden {
  opacity: 0;
  transform: translateX(100px) scale(.8);
  pointer-events: none;
}

/* Word-by-word fade-in cho phần chữ mascot (thay cho typewriter framer-motion) */
#storyteller-text .word {
  display: inline-block;
  margin-right: .25em;
  opacity: 0;
  animation: word-in .2s ease forwards;
}
@keyframes word-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-float-rotate-a,
  .animate-float-a,
  .animate-float-b,
  .animate-mascot-bob,
  .animate-wiggle,
  .animate-sweep,
  .animate-pulse-dot,
  .animate-pulse-blob-a,
  .animate-pulse-blob-b,
  .animate-blob-a,
  .animate-blob-b,
  .animate-blob-c {
    animation: none;
  }
}