/* Hiệu ứng dùng chung, không tác động lên logo hoặc ẩn nội dung mặc định. */
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 80; height: 3px; pointer-events: none; }
.reading-progress > span { display: block; width: 100%; height: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; }
.motion-enabled .site-header { transition: box-shadow var(--interaction-duration,240ms) ease; }
.motion-enabled .site-header.is-scrolled { box-shadow: 0 5px 20px color-mix(in srgb,var(--ink) 6%,transparent); }
.motion-enabled .site-header .nav-link { position: relative; }
.motion-enabled .site-header .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--cyan-text); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--interaction-duration,240ms) ease; }
.motion-enabled .site-header .nav-link[aria-current] { color: var(--cyan-text); }
.motion-enabled .site-header .nav-link[aria-current]::after,
.motion-enabled .site-header .nav-link:focus-visible::after { transform: scaleX(1); }
.motion-enabled .mobile-nav .nav-link { align-self: flex-start; }
.motion-enabled .button { position: relative; overflow: hidden; isolation: isolate; }
.button-ripple { position: absolute; pointer-events: none; border-radius: 50%; background: color-mix(in srgb,var(--white) 45%,transparent); animation: touch-warmth 560ms ease-out forwards; }
.motion-enabled .button:active:not(:disabled) { transform: translateY(1px); }
.motion-enabled :is(.section-heading,.program-section-heading,.join-intro) h2 { position: relative; }
.motion-enabled :is(.section-heading,.program-section-heading,.join-intro) h2::after { content: ''; position: absolute; left: 0; bottom: -12px; width: 42px; height: 3px; background: var(--cyan); border-right: 8px solid var(--orange); border-radius: 3px; transform-origin: left; }
.motion-accents :is(.hero-visual,.program-hero-visual)::after { content: ''; position: absolute; width: 13px; height: 13px; right: 15px; bottom: 48px; border: 1px solid var(--cyan-text); border-radius: 50%; pointer-events: none; background: var(--white); }
.motion-accents :is(.hero-visual,.program-hero-visual)::before { content: ''; position: absolute; width: 6px; height: 6px; left: -5px; top: 15%; border-radius: 50%; background: var(--orange); pointer-events: none; }
.motion-accents .shop-promise-card { position: relative; overflow: hidden; }
.motion-accents .shop-promise-card::after { content: ''; position: absolute; right: -34px; bottom: -36px; width: 104px; height: 104px; border: 1px solid color-mix(in srgb,var(--orange) 45%,transparent); border-radius: 50%; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled :is(.hero-copy,.program-hero-copy) { animation: none; }
  .motion-enabled :is(.hero-eyebrow,.hero-line,.hero-description,.hero-actions,.gala-shortcut,.hero-scroll),
  .motion-enabled .program-hero-copy > *,
  .motion-enabled .shop-hero-grid > div:first-child > * { animation: gentle-reveal var(--reveal-duration,600ms) cubic-bezier(.2,.65,.3,1) var(--intro-delay,0ms) backwards; }
  .motion-enabled .hero-line:first-child,
  .motion-enabled :is(.program-hero-copy,.shop-hero-grid > div:first-child) > :nth-child(2) { --intro-delay: 60ms; }
  .motion-enabled .hero-line:nth-child(2),
  .motion-enabled :is(.program-hero-copy,.shop-hero-grid > div:first-child) > :nth-child(3) { --intro-delay: 120ms; }
  .motion-enabled .hero-description,
  .motion-enabled :is(.program-hero-copy,.shop-hero-grid > div:first-child) > :nth-child(4) { --intro-delay: 180ms; }
  .motion-enabled :is(.hero-actions,.gala-shortcut),
  .motion-enabled :is(.program-hero-copy,.shop-hero-grid > div:first-child) > :nth-child(5) { --intro-delay: 240ms; }
  .motion-enabled .hero-scroll { --intro-delay: 300ms; }
  .motion-enabled :is(.hero-visual,.program-hero-visual,.shop-promise-card) { animation: visual-arrive 850ms cubic-bezier(.2,.65,.3,1) 100ms backwards; }
  .motion-accents :is(.hero-visual,.program-hero-visual)::after { animation: small-ember var(--decoration-duration,4400ms) ease-in-out 1; }
  .motion-accents :is(.hero-visual,.program-hero-visual)::before { animation: small-ember var(--decoration-duration,4400ms) ease-in-out 1 reverse; }
  .motion-enabled .reveal-in h2::after { animation: line-arrive 650ms ease-out var(--reveal-delay,0ms) backwards; }
  .motion-enabled :is(.mobile-menu:not([hidden]),.gallery-dialog[open]) { animation: dialog-arrive 220ms ease-out; }
  .motion-enabled :is(.management-details[open] > ul,.transparency[open] > .transparency-content) { animation: gentle-reveal 250ms ease-out; }
  .motion-enabled :is(.activity-card,.program-group,.program-card,.shop-product,.join-option,.gala-form-panel,.shop-promise-card) { transition: transform var(--interaction-duration,240ms) ease,box-shadow var(--interaction-duration,240ms) ease,border-color var(--interaction-duration,240ms) ease; }
  .motion-enabled :is(.activity-photo,.program-media,.shop-product-photo) > img,
  .motion-enabled .season-mark { transition: scale 450ms ease,rotate 450ms ease; }
  .motion-enabled .filter-button { transition: background-color 180ms ease,color 180ms ease,box-shadow 180ms ease; }
  .motion-enabled .filter-button:active { box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--cyan) 30%,transparent); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .site-header .nav-link:hover::after { transform: scaleX(1); }
  .motion-enabled :is(.activity-card,.program-group,.program-card,.shop-product,.join-option):hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--cyan) 38%,var(--white)); box-shadow: 0 12px 30px color-mix(in srgb,var(--cyan-text) 8%,transparent); }
  .motion-enabled :is(.gala-form-panel,.shop-promise-card):hover { box-shadow: 0 10px 30px color-mix(in srgb,var(--cyan-text) 7%,transparent); }
  .motion-enabled :is(.activity-card,.program-group,.program-card,.shop-product):hover :is(.activity-photo,.program-media,.shop-product-photo) > img { scale: 1.025; }
  .motion-enabled .program-group:hover .season-mark { scale: 1.04; rotate: -4deg; }
}
@keyframes touch-warmth { from { transform: scale(0); opacity: .8; } to { transform: scale(1); opacity: 0; } }
@keyframes visual-arrive { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes small-ember { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes line-arrive { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) {
  .reading-progress { height: 2px; }
  .motion-enabled :is(.section-heading,.program-section-heading,.join-intro) h2::after { width: 34px; }
  .motion-accents :is(.hero-visual,.program-hero-visual)::before { left: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .motion-enabled *, .motion-enabled *::before, .motion-enabled *::after { animation: none !important; transition: none !important; }
  .motion-enabled :is(.button,.activity-card,.program-group,.program-card,.shop-product,.join-option,.season-mark),
  .motion-enabled :is(.activity-photo,.program-media,.shop-product-photo) > img { transform: none !important; scale: 1 !important; rotate: none !important; }
}