/* over lay */
.entry-logo {
  display: flex;
  align-items: center;
  color: #f2f3f7;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: .04em;
}

.entry-logo span {
  display: inline-block;

  animation:
    neon-letter-flicker
    var(--flicker-duration)
    steps(1)
    infinite;

  animation-delay: var(--flicker-delay);
}


/* Mỗi chữ một nhịp khác nhau */

.entry-logo span:nth-child(1)  { --flicker-delay: .10s; --flicker-duration: 2.1s; }
.entry-logo span:nth-child(2)  { --flicker-delay: .42s; --flicker-duration: 2.8s; }
.entry-logo span:nth-child(3)  { --flicker-delay: .18s; --flicker-duration: 2.4s; }
.entry-logo span:nth-child(4)  { --flicker-delay: .67s; --flicker-duration: 3.0s; }
.entry-logo span:nth-child(5)  { --flicker-delay: .31s; --flicker-duration: 2.6s; }
.entry-logo span:nth-child(6)  { --flicker-delay: .91s; --flicker-duration: 2.9s; }
.entry-logo span:nth-child(7)  { --flicker-delay: .53s; --flicker-duration: 2.2s; }
.entry-logo span:nth-child(8)  { --flicker-delay: .14s; --flicker-duration: 3.1s; }
.entry-logo span:nth-child(9)  { --flicker-delay: .73s; --flicker-duration: 2.5s; }
.entry-logo span:nth-child(10) { --flicker-delay: .27s; --flicker-duration: 2.8s; }
.entry-logo span:nth-child(11) { --flicker-delay: .84s; --flicker-duration: 2.3s; }
.entry-logo span:nth-child(12) { --flicker-delay: .46s; --flicker-duration: 3.2s; }
.entry-logo span:nth-child(13) { --flicker-delay: .20s; --flicker-duration: 2.4s; }
.entry-logo span:nth-child(14) { --flicker-delay: .61s; --flicker-duration: 2.7s; }


@keyframes neon-letter-flicker {

  /* sáng bình thường */

  0%,
  72%,
  100% {
    opacity: 1;

    text-shadow:
      0 0 4px #ffffff,
      0 0 9px #ffffffaa,
      0 0 22px #ffffff55;
  }


  /* tắt nhẹ */

  73% {
    opacity: .25;
    text-shadow:
      0 0 2px #ffffff44;
  }


  /* bật lại */

  74% {
    opacity: 1;
  }


  /* chập điện */

  76% {
    opacity: .5;
    text-shadow:
      0 0 3px #ffffff66;
  }

  77% {
    opacity: .08;
    text-shadow: none;
  }

  78% {
    opacity: 1;

    text-shadow:
      0 0 5px #ffffff,
      0 0 13px #ffffffbb,
      0 0 28px #ffffff55;
  }


  /* flicker nhỏ */

  89% {
    opacity: .7;
  }

  90% {
    opacity: 1;
  }
}

/* =========================================================
   PAGE ENTER — phần thân hiện ngay khi vào trang (motion hơn)
   ========================================================= */

:root {
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-punch: cubic-bezier(.16, 1, .3, 1);
}

@keyframes page-main-enter {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 54px, 0) scale(.96) rotateZ(-.6deg);
  }

  55% {
    opacity: 1;
    filter: blur(0px);
  }

  /* overshoot: vọt lên quá vị trí nghỉ rồi mới ổn định */
  76% {
    transform: translate3d(0, -10px, 0) scale(1.012) rotateZ(.25deg);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0);
  }
}

@keyframes fade-rise {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform:
      translate3d(var(--fr-x, 0), var(--fr-y, 36px), 0)
      rotateZ(var(--fr-rz, 0deg))
      scale(var(--fr-s, .95));
  }

  55% {
    opacity: 1;
    filter: blur(0px);
  }

  78% {
    transform:
      translate3d(calc(var(--fr-x, 0px) * -0.15), -8px, 0)
      rotateZ(calc(var(--fr-rz, 0deg) * -0.6))
      scale(1.015);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform:
      translate3d(0, 0, 0)
      rotateZ(0)
      scale(1);
  }
}

.bento-page > .bento-main {
  animation: page-main-enter 700ms var(--ease-punch) both;
  transform-origin: center top;
  will-change: transform, opacity, filter;
}

/* about-extended (Journey/Interests/CTA) không chạy ở đây —
   nó đã có scroll-reveal riêng (.about-reveal), nên để nguyên. */


/* ---------------------------------------------------------
   HERO — kicker, heading, đoạn giới thiệu
   --------------------------------------------------------- */

.bento-kicker {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(-16px, 0, 0);
  animation: hero-kicker-in 520ms var(--ease-punch) both;
  animation-delay: 120ms;
}

@keyframes hero-kicker-in {
  0%   { opacity: 0; filter: blur(4px); transform: translate3d(-16px, 0, 0); }
  60%  { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0); }
}

.bento-hero h1 {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 46px, 0) scale(.94);
  animation: hero-heading-in 820ms var(--ease-bounce) both;
  animation-delay: 200ms;
  will-change: transform, opacity, filter;
}

@keyframes hero-heading-in {
  0%   { opacity: 0; filter: blur(14px); transform: translate3d(0, 46px, 0) scale(.94); }
  55%  { opacity: 1; filter: blur(0px); }
  75%  { transform: translate3d(0, -8px, 0) scale(1.012); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0) scale(1); }
}

/* "intent." — bật sáng lên sau khi cả dòng chữ đã hiện */
.bento-hero h1 em {
  display: inline-block;
  transform-origin: left center;
  animation: hero-em-pop 620ms var(--ease-bounce) both;
  animation-delay: 620ms;
}

@keyframes hero-em-pop {
  0%   { transform: scale(.8); filter: blur(3px) brightness(1.6); }
  55%  { transform: scale(1.12); filter: blur(0px) brightness(1.35); }
  78%  { transform: scale(.97); }
  100% { transform: scale(1); filter: blur(0px) brightness(1); }
}

.bento-hero > div > p {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 20px, 0);
  animation: hero-text-in 600ms var(--ease-punch) both;
  animation-delay: 460ms;
}

@keyframes hero-text-in {
  0%   { opacity: 0; filter: blur(5px); transform: translate3d(0, 20px, 0); }
  60%  { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0); }
}


/* ---------------------------------------------------------
   HERO ORBIT — avatar + 3 badge lơ lửng
   --------------------------------------------------------- */

.orbit-avatar {
  opacity: 0;
  filter: blur(10px);
  transform: scale(.6) rotate(-8deg);
  animation:
    orbit-avatar-in 850ms var(--ease-bounce) both,
    orbit-glow-pulse 3.2s ease-in-out infinite;
  animation-delay: 260ms, 1110ms;
  will-change: transform, opacity, filter;
}

@keyframes orbit-avatar-in {
  0%   { opacity: 0; filter: blur(10px); transform: scale(.6) rotate(-8deg); }
  55%  { opacity: 1; filter: blur(0px); }
  75%  { transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; filter: blur(0px); transform: scale(1) rotate(0deg); }
}

@keyframes orbit-glow-pulse {
  0%, 100% { box-shadow: 0 0 24px 4px rgba(139, 110, 255, .22); }
  50%      { box-shadow: 0 0 42px 10px rgba(139, 110, 255, .4); }
}

.orbit-tag {
  --ot-x: 0px;
  --ot-y: 26px;
  --ot-rz: 0deg;

  opacity: 0;
  filter: blur(6px);
  transform: translate3d(var(--ot-x), var(--ot-y), 0) rotate(var(--ot-rz)) scale(.6);

  animation:
    orbit-tag-in 700ms var(--ease-bounce) both,
    orbit-tag-float 3.6s ease-in-out infinite;

  will-change: transform, translate, opacity, filter;
}

@keyframes orbit-tag-in {
  0%   { opacity: 0; filter: blur(6px); transform: translate3d(var(--ot-x), var(--ot-y), 0) rotate(var(--ot-rz)) scale(.6); }
  55%  { opacity: 1; filter: blur(0px); }
  78%  { transform: translate3d(calc(var(--ot-x) * -0.15), calc(var(--ot-y) * -0.2), 0) rotate(calc(var(--ot-rz) * -0.4)) scale(1.08); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* lơ lửng nhẹ nhàng sau khi đã bay vào — dùng property `translate`
   (khác với `transform` ở trên) nên 2 animation không đè lên nhau */
@keyframes orbit-tag-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* React — bay từ trên-trái vào */
.orbit-tag.t1 { --ot-x: -34px; --ot-y: -18px; --ot-rz: -8deg; animation-delay: 520ms, 1220ms; }

/* JS — bay từ phải vào */
.orbit-tag.t2 { --ot-x:  30px; --ot-y:   6px; --ot-rz:  6deg; animation-delay: 600ms, 1300ms; }

/* UI/UX — bay từ dưới-trái vào */
.orbit-tag.t3 { --ot-x: -30px; --ot-y:  24px; --ot-rz: -6deg; animation-delay: 680ms, 1380ms; }


/* ---------------------------------------------------------
   BENTO GRID — 5 card (ABOUT_ME, MY_STACK, STATUS, STATS, QUOTE)
   --------------------------------------------------------- */

.bento-grid.about-grid .bento-card {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 34px, 0) scale(.94);
  animation: bento-card-in 700ms var(--ease-bounce) both;
  will-change: transform, opacity, filter;
}

@keyframes bento-card-in {
  0%   { opacity: 0; filter: blur(6px); transform: translate3d(0, 34px, 0) scale(.94); }
  55%  { opacity: 1; filter: blur(0px); }
  75%  { transform: translate3d(0, -6px, 0) scale(1.015); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0) scale(1); }
}

.bento-grid.about-grid .identity-card      { animation-delay: 520ms; }
.bento-grid.about-grid .stack-card         { animation-delay: 600ms; }
.bento-grid.about-grid .availability-card  { animation-delay: 680ms; }
.bento-grid.about-grid .stats-card         { animation-delay: 760ms; }
.bento-grid.about-grid .quote-card         { animation-delay: 840ms; }


/* footer — vào sau cùng, nảy nhẹ */

.bento-page > .site-footer {
  --fr-y: 40px;
  --fr-s: .95;

  animation:
    fade-rise
    750ms
    var(--ease-bounce)
    both;

  animation-delay: 900ms;

  will-change: transform, opacity, filter;
}


/* =========================================================
   ABOUT — SCROLL REVEAL (motion hơn: overshoot + blur-in)
   ========================================================= */

.about-reveal {
  --ar-x: 0px;
  --ar-y: 46px;
  --ar-rz: 0deg;
  --ar-s: .94;
  --ar-blur: 8px;

  opacity: 0;

  transform:
    translate3d(var(--ar-x), var(--ar-y), 0)
    rotateZ(var(--ar-rz))
    scale(var(--ar-s));

  filter: blur(var(--ar-blur));

  will-change: transform, opacity, filter;
}

.about-reveal.is-visible {
  animation: about-reveal-in 900ms var(--ease-bounce) both;
}

@keyframes about-reveal-in {
  0% {
    opacity: 0;
    filter: blur(var(--ar-blur));
    transform:
      translate3d(var(--ar-x), var(--ar-y), 0)
      rotateZ(var(--ar-rz))
      scale(var(--ar-s));
  }

  55% {
    opacity: 1;
    filter: blur(0px);
  }

  /* overshoot: đi quá điểm nghỉ một chút rồi bật lại */
  72% {
    transform:
      translate3d(calc(var(--ar-x) * -0.14), calc(var(--ar-y) * -0.16), 0)
      rotateZ(calc(var(--ar-rz) * -0.6))
      scale(calc(var(--ar-s) + .035));
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  }
}

/* left */
.about-reveal.from-left {
  --ar-x: -70px;
  --ar-y: 26px;
  --ar-rz: -3deg;
  --ar-s: .93;
}

/* right */
.about-reveal.from-right {
  --ar-x: 70px;
  --ar-y: 26px;
  --ar-rz: 3deg;
  --ar-s: .93;
}

/* bottom (mới) — dùng cho block muốn "trồi" lên mạnh hơn */
.about-reveal.from-bottom {
  --ar-x: 0px;
  --ar-y: 60px;
  --ar-rz: 0deg;
  --ar-s: .9;
}

/* section heading */
.about-section-head.about-reveal {
  --ar-x: -46px;
  --ar-y: 22px;
  --ar-rz: -1.4deg;
  --ar-s: .95;
}

/* CTA — pop mạnh hơn, giống nút "nảy" vào */
.about-cta.about-reveal {
  --ar-x: 0;
  --ar-y: 54px;
  --ar-rz: -1.6deg;
  --ar-s: .88;
  --ar-blur: 4px;

  transform-origin: center center;
}

.about-cta.about-reveal.is-visible {
  animation: about-cta-pop 1000ms var(--ease-bounce) both;
}

@keyframes about-cta-pop {
  0% {
    opacity: 0;
    filter: blur(var(--ar-blur));
    transform:
      translate3d(0, var(--ar-y), 0)
      rotateZ(var(--ar-rz))
      scale(var(--ar-s));
  }

  50% {
    opacity: 1;
    filter: blur(0px);
  }

  70% {
    transform:
      translate3d(0, -8px, 0)
      rotateZ(1.1deg)
      scale(1.045);
  }

  85% {
    transform:
      translate3d(0, 2px, 0)
      rotateZ(-.4deg)
      scale(.985);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  }
}


/* =========================================================
   TIMELINE — cascade mạnh hơn, trượt dài hơn
   ========================================================= */

.journey-grid .timeline-item {
  opacity: 0;

  transform:
    translate3d(-42px, 18px, 0)
    rotateZ(-2.2deg)
    scale(.96);

  filter: blur(3px);

  will-change: transform, opacity, filter;
}

.journey-grid.is-visible .timeline-item {
  animation: timeline-in 720ms var(--ease-bounce) both;
}

@keyframes timeline-in {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(-42px, 18px, 0) rotateZ(-2.2deg) scale(.96);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  78% {
    transform: translate3d(6px, -3px, 0) rotateZ(.6deg) scale(1.015);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  }
}

.journey-grid.is-visible .timeline-item:nth-child(1) { animation-delay: 40ms; }
.journey-grid.is-visible .timeline-item:nth-child(2) { animation-delay: 140ms; }
.journey-grid.is-visible .timeline-item:nth-child(3) { animation-delay: 240ms; }
.journey-grid.is-visible .timeline-item:nth-child(4) { animation-delay: 340ms; }


/* =========================================================
   PRINCIPLES
   ========================================================= */

.principles-card .principle {
  opacity: 0;

  transform:
    translate3d(42px, 18px, 0)
    rotateZ(2.2deg)
    scale(.96);

  filter: blur(3px);

  will-change: transform, opacity, filter;
}

.principles-card.is-visible .principle {
  animation: principle-in 720ms var(--ease-bounce) both;
}

@keyframes principle-in {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(42px, 18px, 0) rotateZ(2.2deg) scale(.96);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
  }
  78% {
    transform: translate3d(-6px, -3px, 0) rotateZ(-.6deg) scale(1.015);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  }
}

.principles-card.is-visible .principle:nth-child(1) { animation-delay: 0ms; }
.principles-card.is-visible .principle:nth-child(2) { animation-delay: 100ms; }
.principles-card.is-visible .principle:nth-child(3) { animation-delay: 200ms; }
.principles-card.is-visible .principle:nth-child(4) { animation-delay: 300ms; }


/* =========================================================
   INTERESTS — pop-in kiểu "nảy" (elastic), lệch trục rõ hơn
   ========================================================= */

.interests-grid .interest-card {
  --ic-x: 0px;
  --ic-y: 44px;
  --ic-rz: 2.5deg;

  opacity: 0;

  transform:
    translate3d(var(--ic-x), var(--ic-y), 0)
    rotateZ(var(--ic-rz))
    scale(.9);

  filter: blur(4px);

  transition: border-color 250ms ease;
  will-change: transform, opacity, filter;
}

.interests-grid.is-visible .interest-card {
  animation: interest-in 780ms var(--ease-bounce) both;
}

@keyframes interest-in {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform:
      translate3d(var(--ic-x), var(--ic-y), 0)
      rotateZ(var(--ic-rz))
      scale(.9);
  }
  55% {
    opacity: 1;
    filter: blur(0px);
  }
  75% {
    transform:
      translate3d(calc(var(--ic-x) * -0.2), -6px, 0)
      rotateZ(calc(var(--ic-rz) * -0.5))
      scale(1.04);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) rotateZ(0) scale(1);
  }
}

/* individual starting positions — lệch mạnh hơn cho cảm giác "toả ra" */
.interests-grid .interest-card:nth-child(1) { --ic-x: -34px; --ic-rz: -3.2deg; }
.interests-grid .interest-card:nth-child(2) { --ic-y: 54px;  --ic-rz: 1.8deg;  }
.interests-grid .interest-card:nth-child(3) { --ic-y: 54px;  --ic-rz: -1.8deg; }
.interests-grid .interest-card:nth-child(4) { --ic-x: 34px;  --ic-rz: 3.2deg;  }

.interests-grid.is-visible .interest-card:nth-child(1) { animation-delay: 20ms; }
.interests-grid.is-visible .interest-card:nth-child(2) { animation-delay: 90ms; }
.interests-grid.is-visible .interest-card:nth-child(3) { animation-delay: 160ms; }
.interests-grid.is-visible .interest-card:nth-child(4) { animation-delay: 230ms; }


/* =========================================================
   HOVER — nhún nhẹ hơn, đàn hồi hơn
   ========================================================= */

.interest-card {
  transition:
    transform 400ms var(--ease-bounce),
    border-color 250ms ease;
}

.interest-card:hover {
  transform:
    translate3d(0, -8px, 0)
    rotateZ(-.6deg)
    scale(1.025);
}


/* =========================================================
   PERFORMANCE
   ========================================================= */

.about-reveal,
.timeline-item,
.principle,
.interest-card {
  backface-visibility: hidden;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

/* =========================================================
   PROJECTS PAGE — WORK HEADING (kicker, heading, filters)
   ========================================================= */

.work-heading .bento-kicker {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(-16px, 0, 0);
  animation: hero-kicker-in 520ms var(--ease-punch) both;
  animation-delay: 120ms;
}

.work-heading h1 {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 46px, 0) scale(.94);
  animation: hero-heading-in 820ms var(--ease-bounce) both;
  animation-delay: 200ms;
  will-change: transform, opacity, filter;
}

/* "made." — bật sáng lên sau khi cả dòng đã hiện */
.work-heading h1 em {
  display: inline-block;
  transform-origin: left center;
  animation: hero-em-pop 620ms var(--ease-bounce) both;
  animation-delay: 620ms;
}

.work-heading > div > p {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 20px, 0);
  animation: hero-text-in 600ms var(--ease-punch) both;
  animation-delay: 460ms;
}

/* filter chips — bay vào từ phải, sau đoạn mô tả */

.filters {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(24px, 0, 0);
  animation: filters-in 620ms var(--ease-punch) both;
  animation-delay: 560ms;
}

@keyframes filters-in {
  0%   { opacity: 0; filter: blur(5px); transform: translate3d(24px, 0, 0); }
  60%  { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0); }
}

.filter {
  transition:
    transform 320ms var(--ease-bounce),
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.filter:hover {
  transform: translate3d(0, -2px, 0);
}

.filter:active {
  transform: translate3d(0, 0, 0) scale(.96);
}


/* =========================================================
   PROJECTS PAGE — PROJECT BENTO (cards)
   ========================================================= */

.project-bento .project-card,
.project-bento .build-card {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 40px, 0) scale(.95);
  animation: project-card-in 760ms var(--ease-bounce) both;
  will-change: transform, opacity, filter;
}

@keyframes project-card-in {
  0%   { opacity: 0; filter: blur(6px); transform: translate3d(0, 40px, 0) scale(.95); }
  55%  { opacity: 1; filter: blur(0px); }
  75%  { transform: translate3d(0, -7px, 0) scale(1.014); }
  100% { opacity: 1; filter: blur(0px); transform: translate3d(0, 0, 0) scale(1); }
}

/* card lớn (Mori Studio) hiện trước tiên, các card sau lệch nhịp */
.project-bento .project-card.large { animation-delay: 620ms; }
.project-bento .project-card:nth-of-type(2) { animation-delay: 720ms; }
.project-bento .project-card:nth-of-type(3) { animation-delay: 820ms; }
.project-bento .build-card { animation-delay: 920ms; }

/* hover — nhấc nhẹ, đàn hồi */

.project-card,
.build-card {
  transition:
    transform 380ms var(--ease-bounce),
    border-color 250ms ease;
}

.project-card:hover {
  transform: translate3d(0, -8px, 0) scale(1.012);
}

.build-card:hover {
  transform: translate3d(0, -6px, 0);
}

/* nút mũi tên "↗" / "Start a conversation →" nảy nhẹ khi hover thẻ */
.project-copy > a,
.build-card > a {
  display: inline-block;
  transition: transform 300ms var(--ease-bounce);
}

.project-card:hover .project-copy > a,
.build-card:hover > a {
  transform: translate3d(4px, 0, 0);
}


/* footer trang Projects vào muộn hơn (nhiều card hơn) — dùng sibling
   selector để không đè delay của footer trang About (2 trang chung 1 file) */
.projects-main + .site-footer {
  animation-delay: 1080ms;
}


/* =========================================================
   REDUCED MOTION — bổ sung phần Projects
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .bento-page > .bento-main,
  .bento-page > .site-footer,
  .bento-kicker,
  .bento-hero h1,
  .bento-hero h1 em,
  .bento-hero > div > p,
  .orbit-avatar,
  .orbit-tag,
  .bento-grid.about-grid .bento-card,
  .about-reveal,
  .about-reveal.from-left,
  .about-reveal.from-right,
  .about-reveal.from-bottom,
  .about-cta.about-reveal,
  .journey-grid .timeline-item,
  .principles-card .principle,
  .interests-grid .interest-card {
    opacity: 1;
    transform: none;
    translate: none;
    filter: none;
    animation: none;
    transition: none;
    box-shadow: none;
  }
}

/* =========================================================
   CONTACT PAGE — HERO (kicker, heading, mô tả)
   ========================================================= */

.contact-hero .bento-kicker {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(-16px, 0, 0);
  animation: hero-kicker-in 520ms var(--ease-punch) both;
  animation-delay: 120ms;
}

.contact-hero h1 {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 46px, 0) scale(.94);
  animation: hero-heading-in 820ms var(--ease-bounce) both;
  animation-delay: 200ms;
  will-change: transform, opacity, filter;
}

/* "worth opening." — bật sáng sau khi cả dòng đã hiện */
.contact-hero h1 em {
  display: inline-block;
  transform-origin: left center;
  animation: hero-em-pop 620ms var(--ease-bounce) both;
  animation-delay: 620ms;
}

.contact-hero > h1 + p {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 20px, 0);
  animation: hero-text-in 600ms var(--ease-punch) both;
  animation-delay: 460ms;
}


/* =========================================================
   CONTACT PAGE — GRID (mail, status, social, location)
   ========================================================= */

.contact-grid .bento-card {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 34px, 0) scale(.94);
  animation: bento-card-in 700ms var(--ease-bounce) both;
  will-change: transform, opacity, filter;
}

.contact-grid .mail-card         { animation-delay: 520ms; }
.contact-grid .contact-status    { animation-delay: 600ms; }
.contact-grid .social-card       { animation-delay: 680ms; }
.contact-grid .location-card     { animation-delay: 760ms; }

/* hover — card nhấc nhẹ, mũi tên trượt ra */

.contact-grid .bento-card {
  transition:
    transform 380ms var(--ease-bounce),
    border-color 250ms ease;
}

.mail-card:hover,
.contact-grid .bento-card:hover {
  transform: translate3d(0, -8px, 0);
}

.mail-card i {
  display: inline-block;
  transition: transform 300ms var(--ease-bounce);
}

.mail-card:hover i {
  transform: translate3d(4px, -4px, 0);
}

.social-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.social-card a i {
  display: inline-block;
  transition: transform 280ms var(--ease-bounce);
}

.social-card a:hover i {
  transform: translate3d(3px, -3px, 0);
}


/* footer trang Contact — cùng nhịp mặc định 900ms (đã đủ vì grid ít card hơn) */


/* =========================================================
   REDUCED MOTION — bổ sung phần Contact
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contact-hero .bento-kicker,
  .contact-hero h1,
  .contact-hero h1 em,
  .contact-hero > h1 + p,
  .contact-grid .bento-card,
  .mail-card i,
  .social-card a i {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-heading .bento-kicker,
  .work-heading h1,
  .work-heading h1 em,
  .work-heading > div > p,
  .filters,
  .filter,
  .project-bento .project-card,
  .project-bento .build-card,
  .project-card,
  .build-card,
  .project-copy > a,
  .build-card > a {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}