/*
 * Lớp hiệu ứng bổ sung cho trang chủ.
 * Tất cả selector được đặt tên riêng để không thay đổi intro, dữ liệu hoặc bố cục CMS.
 */

.portal-motion-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

body.portal-home.site-background-enabled .site-animated-background {
  opacity: .76;
  filter: saturate(1.08) contrast(1.035);
}

.portal-motion-ambient::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34%;
  pointer-events: none;
  opacity: .8;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0 16%,
    rgba(14,165,233,.3) 25%,
    transparent 39%,
    rgba(255,214,51,.24) 53%,
    transparent 68%,
    rgba(229,34,42,.2) 82%,
    transparent 100%
  );
  filter: blur(44px);
  animation: portal-motion-aura-spin 26s linear infinite;
}

.portal-motion-grid {
  position: absolute;
  z-index: 1;
  inset: -12%;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%,#000 0,rgba(0,0,0,.72) 42%,transparent 78%);
  mask-image: radial-gradient(circle at 50% 42%,#000 0,rgba(0,0,0,.72) 42%,transparent 78%);
  animation: portal-motion-grid-drift 34s linear infinite;
}

.portal-motion-orb {
  position: absolute;
  z-index: 2;
  width: clamp(220px,32vw,560px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .8;
  filter: blur(16px);
  mix-blend-mode: normal;
  will-change: transform;
}

.portal-motion-orb-blue {
  top: -17%;
  left: -8%;
  background: radial-gradient(circle,rgba(18,153,255,.92) 0,rgba(37,99,235,.46) 38%,transparent 72%);
  animation: portal-motion-orb-blue 17s ease-in-out infinite alternate;
}

.portal-motion-orb-gold {
  top: 30%;
  right: -15%;
  width: clamp(180px,27vw,470px);
  background: radial-gradient(circle,rgba(255,214,51,.78) 0,rgba(255,146,28,.3) 38%,transparent 72%);
  animation: portal-motion-orb-gold 21s ease-in-out infinite alternate;
}

.portal-motion-orb-red {
  bottom: -22%;
  left: 26%;
  width: clamp(180px,25vw,430px);
  background: radial-gradient(circle,rgba(229,34,42,.55) 0,rgba(219,39,119,.23) 38%,transparent 72%);
  animation: portal-motion-orb-red 24s ease-in-out infinite alternate;
}

.portal-motion-particles {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .68;
}

@keyframes portal-motion-aura-spin {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes portal-motion-grid-drift {
  from { transform: translate3d(-2%,-2%,0) rotate(-1deg); }
  to { transform: translate3d(4%,4%,0) rotate(1.5deg); }
}

@keyframes portal-motion-orb-blue {
  from { transform: translate3d(-4%,-3%,0) scale(.92); }
  to { transform: translate3d(38%,24%,0) scale(1.12); }
}

@keyframes portal-motion-orb-gold {
  from { transform: translate3d(7%,-7%,0) scale(.9); }
  to { transform: translate3d(-42%,30%,0) scale(1.14); }
}

@keyframes portal-motion-orb-red {
  from { transform: translate3d(-12%,12%,0) scale(.9); }
  to { transform: translate3d(35%,-31%,0) scale(1.1); }
}

/* Hiệu ứng thấy ngay ở khu vực đầu trang; không đổi kích thước hay vị trí nội dung. */
body.portal-home.site-background-motion .stitch-hero-background {
  transform-origin: center 44%;
  will-change: transform,filter;
  animation: portal-motion-hero-breathe 11s ease-in-out infinite alternate !important;
}

body.portal-home.site-background-motion .stitch-hero::before {
  opacity: .88;
  background:
    linear-gradient(112deg,transparent 14%,rgba(255,255,255,.28) 34%,transparent 50%),
    linear-gradient(-45deg,rgba(0,86,179,.4),rgba(56,189,248,.28),rgba(0,86,179,.2),rgba(255,214,51,.14));
  background-size: 240% 100%,400% 400%;
  mix-blend-mode: screen;
  animation: portal-motion-hero-light 8s ease-in-out infinite !important;
}

body.portal-home.site-background-motion .stitch-hero-pattern {
  opacity: .25;
  animation: portal-motion-hero-pattern 15s linear infinite !important;
}

body.portal-home.site-background-motion .stitch-hero h1 {
  animation: portal-motion-title-glow 4.2s ease-in-out infinite;
}

@keyframes portal-motion-hero-breathe {
  from { transform: scale(1.015); filter: saturate(1.02) brightness(.98); }
  to { transform: scale(1.085); filter: saturate(1.12) brightness(1.055); }
}

@keyframes portal-motion-hero-light {
  0%,100% { background-position: 140% 0,0 50%; }
  48%,56% { background-position: -70% 0,100% 50%; }
}

@keyframes portal-motion-hero-pattern {
  to { background-position: 48px 48px; }
}

@keyframes portal-motion-title-glow {
  0%,100% { text-shadow: 0 6px 24px rgba(0,25,65,.38),0 0 0 rgba(125,211,252,0); }
  50% { text-shadow: 0 8px 30px rgba(0,25,65,.48),0 0 24px rgba(125,211,252,.7); }
}

/* Nội dung chỉ ẩn sau khi JavaScript sẵn sàng, nên trang vẫn đầy đủ nếu JS bị tắt. */
html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal] {
  opacity: 0;
  transition:
    opacity .72s cubic-bezier(.165,.84,.44,1) var(--portal-motion-delay,0ms),
    transform .78s cubic-bezier(.165,.84,.44,1) var(--portal-motion-delay,0ms);
  will-change: opacity,transform;
}

html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal="up"] {
  transform: translate3d(0,30px,0);
}

html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal="left"] {
  transform: translate3d(-30px,0,0);
}

html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal="right"] {
  transform: translate3d(30px,0,0);
}

html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal="fade"] {
  transform: none;
}

html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal].portal-motion-in-view {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Ánh sáng phản hồi theo con trỏ, không gán transform nên không xung đột hover có sẵn. */
.portal-home .portal-motion-glare {
  position: relative;
  isolation: isolate;
}

.portal-home .portal-motion-glare::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    300px circle at var(--portal-motion-x,50%) var(--portal-motion-y,50%),
    rgba(255,255,255,.38),
    rgba(125,211,252,.12) 34%,
    transparent 66%
  );
  transition: opacity .28s ease;
}

.portal-home .portal-motion-glare:hover::after { opacity: .78; }

.portal-home .portal-card-image img,
.portal-home .portal-book img,
.portal-home .portal-story-image img,
.portal-home .portal-info-list img,
.portal-home .portal-place-card > img {
  transition: transform .6s cubic-bezier(.165,.84,.44,1),filter .4s ease;
}

.portal-home .portal-news-card:hover .portal-card-image img,
.portal-home .portal-book:hover img,
.portal-home .portal-story-panel:hover .portal-story-image img,
.portal-home .portal-info-list > a:hover img,
.portal-home .portal-place-card:hover > img {
  filter: saturate(1.08) contrast(1.025) brightness(1.025);
}

.portal-home .portal-heading-center > span {
  background-size: 220% 100%;
  animation: portal-motion-heading-line 3.8s ease-in-out infinite;
}

@keyframes portal-motion-heading-line {
  0%,100% { background-position: 0 50%; box-shadow: 0 0 0 rgba(8,119,223,0); }
  50% { background-position: 100% 50%; box-shadow: 0 0 18px rgba(8,119,223,.34); }
}

.portal-home .stitch-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portal-home .stitch-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -50%;
  bottom: -50%;
  left: -45%;
  width: 28%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform: skewX(-18deg) translateX(-180%);
  transition: transform .7s ease,opacity .25s ease;
}

.portal-home .stitch-button:hover::after {
  opacity: .72;
  transform: skewX(-18deg) translateX(720%);
}

.portal-home .feedback-bubble,
.portal-home .tthc-chat-bubble {
  isolation: isolate;
}

.portal-home .feedback-bubble::before,
.portal-home .tthc-chat-bubble::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7px;
  border: 2px solid currentColor;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: portal-motion-bubble-ring 2.6s ease-out infinite;
}

.portal-home .feedback-bubble::before { animation-delay: 1.05s; }

@keyframes portal-motion-bubble-ring {
  0% { opacity: 0; transform: scale(.9); }
  22% { opacity: .38; }
  78%,100% { opacity: 0; transform: scale(1.16); }
}

.portal-home .site-motion-marquee-track { animation-duration: 26s; }
.portal-home .site-motion-marquee:hover .site-motion-marquee-track { animation-play-state: paused; }

/* Con trỏ phát sáng của bản mẫu: giữ nguyên mũi tên hệ thống và chỉ bổ sung lớp phản hồi. */
.portal-motion-cursor-dot,
.portal-motion-cursor-glow,
.portal-motion-cursor-trail {
  display: none;
}

@media (any-hover: hover) and (any-pointer: fine) {
  body.portal-home > .portal-motion-cursor-dot,
  body.portal-home > .portal-motion-cursor-glow {
    display: block;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    opacity: 0;
    border-radius: 50%;
    transform: translate3d(-100px,-100px,0) translate(-50%,-50%);
    transition: opacity .16s ease,width .24s cubic-bezier(.34,1.56,.64,1),height .24s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background .2s ease,box-shadow .2s ease;
    will-change: transform,width,height,opacity;
  }

  body.portal-home > .portal-motion-cursor-dot {
    z-index: 9999 !important;
    width: 8px;
    height: 8px;
    background: var(--site-effect-blue,#0757b5);
    box-shadow: 0 0 7px rgba(255,255,255,.95),0 0 17px var(--site-effect-blue,#0757b5);
  }

  body.portal-home > .portal-motion-cursor-glow {
    z-index: 9998 !important;
    width: 46px;
    height: 46px;
    border: 1.5px solid color-mix(in srgb,var(--site-effect-blue,#0757b5) 74%,transparent);
    background: radial-gradient(circle,rgba(255,255,255,.18) 0,color-mix(in srgb,var(--site-effect-blue,#0757b5) 16%,transparent) 34%,transparent 72%);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--site-effect-blue,#0757b5) 10%,transparent),0 0 22px color-mix(in srgb,var(--site-effect-blue,#0757b5) 34%,transparent),inset 0 0 0 1px rgba(255,214,51,.4);
  }

  html.portal-motion-cursor-ready body.portal-home > .portal-motion-cursor-dot { opacity: .96; }
  html.portal-motion-cursor-ready body.portal-home > .portal-motion-cursor-glow { opacity: .88; }

  body.portal-home > .portal-motion-cursor-glow.is-hovering {
    width: 68px;
    height: 68px;
    border-color: var(--site-effect-gold,#ffd633);
    background: radial-gradient(circle,rgba(255,255,255,.2) 0,color-mix(in srgb,var(--site-effect-gold,#ffd633) 24%,transparent) 38%,transparent 72%);
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--site-effect-gold,#ffd633) 12%,transparent),0 0 28px color-mix(in srgb,var(--site-effect-gold,#ffd633) 42%,transparent),inset 0 0 0 1px rgba(255,255,255,.58);
  }

  body.portal-home > .portal-motion-cursor-glow.is-pressed {
    width: 36px;
    height: 36px;
    border-color: #fff;
  }

  body.portal-home.portal-intro-active > .portal-motion-cursor-dot,
  body.portal-home.portal-intro-active > .portal-motion-cursor-glow {
    opacity: 0 !important;
  }

  body.portal-home > .portal-motion-cursor-trail {
    display: block;
    position: fixed !important;
    z-index: 9997 !important;
    top: 0 !important;
    left: 0 !important;
    width: 7px;
    height: 7px;
    margin: 0 !important;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none !important;
    background: linear-gradient(135deg,#fff,var(--site-effect-gold,#ffd633) 42%,var(--site-effect-blue,#0757b5));
    box-shadow: 0 0 12px color-mix(in srgb,var(--site-effect-blue,#0757b5) 48%,transparent);
    will-change: transform,opacity;
  }
}

@media (max-width: 680px) {
  .portal-motion-grid { background-size: 44px 44px; opacity: .28; }
  .portal-motion-orb { width: 310px; filter: blur(22px); opacity: .62; }
  .portal-motion-particles { opacity: .46; }
  .portal-home .portal-motion-glare::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.portal-home > .portal-motion-cursor-dot,
  body.portal-home > .portal-motion-cursor-glow {
    transition-duration: .01ms;
  }

  .portal-home .portal-heading-center > span,
  .portal-home .feedback-bubble::before,
  .portal-home .tthc-chat-bubble::before {
    animation: none !important;
  }

  body.portal-home.site-background-motion .portal-motion-ambient::before,
  body.portal-home.site-background-motion .portal-motion-grid,
  body.portal-home.site-background-motion .portal-motion-orb-blue,
  body.portal-home.site-background-motion .portal-motion-orb-gold,
  body.portal-home.site-background-motion .portal-motion-orb-red,
  body.portal-home.site-background-motion .stitch-hero-background,
  body.portal-home.site-background-motion .stitch-hero::before,
  body.portal-home.site-background-motion .stitch-hero-pattern,
  body.portal-home.motion-effects-only.site-effect-pattern::before,
  body.portal-home.motion-effects-only.site-effect-light::after,
  body.portal-home.motion-effects-only.site-effect-image-zoom .site-animated-background,
  body.portal-home.motion-effects-only .site-motion-marquee-track {
    animation: none !important;
  }

  html.portal-motion-js-ready body.portal-home.site-background-motion [data-portal-motion-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

}