/* ============================================================
   TRUONG YEN – Premium Effects (Safe – không override style.css)
   ============================================================ */

/* ── 1. HERO ORBS: floating glow (không chạm hero-title, hero-bg) ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  animation: floatOrb linear infinite;
  z-index: 1;
}
.hero-orb-1 {
  width: 320px; height: 320px;
  top: -40px; right: 8%;
  background: radial-gradient(circle, rgba(255,102,0,0.14) 0%, transparent 70%);
  animation-duration: 14s;
}
.hero-orb-2 {
  width: 220px; height: 220px;
  bottom: 12%; left: 3%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -6s;
}
.hero-orb-3 {
  width: 160px; height: 160px;
  top: 38%; right: 22%;
  background: radial-gradient(circle, rgba(255,140,60,0.08) 0%, transparent 70%);
  animation-duration: 24s;
  animation-delay: -10s;
}
@keyframes floatOrb {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  25%      { transform: translateY(-25px) translateX(12px) scale(1.06); }
  50%      { transform: translateY(-10px) translateX(-8px) scale(0.97); }
  75%      { transform: translateY(-35px) translateX(16px) scale(1.04); }
}

/* ── 2. SCROLL INDICATOR: Bounce ── */
.scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  50%      { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* ── 3. NAVIGATION: Hover underline slide ── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #FF6600, #ffb380);
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
  border-radius: 2px;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ── 4. BUTTONS: 3D lift + shine sweep ── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.25s ease !important;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-gold:hover, .btn-primary:hover {
  box-shadow: 0 8px 30px rgba(255,102,0,0.5), 0 0 0 3px rgba(255,102,0,0.15) !important;
}
.btn-outline-white:hover {
  box-shadow: 0 8px 30px rgba(255,255,255,0.15), 0 0 0 3px rgba(255,255,255,0.1) !important;
}

/* ── 5. PRODUCT CARDS: Hover lift ── */
.product-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease !important;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 20px 60px rgba(92,26,8,0.2), 0 8px 24px rgba(255,102,0,0.15) !important;
}
.product-card img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
.product-card:hover img { transform: scale(1.06) !important; }

/* ── 6. STAT ITEMS: Pop + underline ── */
.stat-item {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
  position: relative;
}
.stat-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: linear-gradient(90deg, #FF6600, #ffb380);
  border-radius: 2px;
  transition: width 0.45s ease;
}
.stat-item:hover { transform: translateY(-5px) !important; }
.stat-item:hover::after { width: 55%; }

/* ── 7. SECTION LABEL: Animated dot ── */
.section-label { position: relative; }
.section-label::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: #FF6600;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* ── 8. STATS SECTION: Animated gradient bg ── */
.stats-section {
  background: linear-gradient(135deg, #1a0800 0%, #3a1104 35%, #271003 65%, #1a0800 100%) !important;
  background-size: 300% 300%;
  animation: gradShift 14s ease infinite;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(255,102,0,0.07) 0%, transparent 50%),
              radial-gradient(ellipse at 75% 50%, rgba(201,168,76,0.05) 0%, transparent 50%);
  pointer-events: none;
  animation: rotateBg 35s linear infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 9. CTA BANNER: Dynamic gradient ── */
.cta-banner {
  background: linear-gradient(135deg, #1a0600 0%, #3d1008 25%, #6b2010 50%, #3d1008 75%, #1a0600 100%) !important;
  background-size: 300% 300%;
  animation: ctaGrad 9s ease infinite;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255,102,0,0.13) 0%, transparent 60%),
              radial-gradient(ellipse 60% 60% at 80% 50%, rgba(201,168,76,0.07) 0%, transparent 60%);
  animation: ctaGlow 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ctaGrad {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ctaGlow {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ── 10. HEADER: Glassmorphism on scroll ── */
.header { transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important; }


/* ── 11. REVEAL: Smooth slide-up ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.42s; }
[data-delay="5"] { transition-delay: 0.55s; }

/* ── 12. FEATURE BOX: Hover lift ── */
.feature-box {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
}
.feature-box:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(92,26,8,0.18) !important;
}
.feature-icon { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) !important; }
.feature-box:hover .feature-icon { transform: rotate(-8deg) scale(1.15) !important; }

/* ── 13. GALLERY SHINE SWEEP ── */
.gallery-card, .project-card { position: relative; overflow: hidden; }
.gallery-card::after, .project-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transition: left 0.6s ease;
  pointer-events: none;
}
.gallery-card:hover::after, .project-card:hover::after { left: 150%; }

/* ── 14. HOTLINE: Phone bell animation ── */
.nav-hotline svg { animation: phoneBell 4s ease-in-out infinite; }
@keyframes phoneBell {
  0%,60%,100% { transform: rotate(0deg); }
  65%  { transform: rotate(-14deg); }
  70%  { transform: rotate(14deg); }
  75%  { transform: rotate(-10deg); }
  80%  { transform: rotate(8deg); }
  85%  { transform: rotate(-4deg); }
  90%  { transform: rotate(0deg); }
}

/* ── 15. NUMBER GLOW on reveal ── */
@keyframes numberGlow {
  0%   { text-shadow: 0 0 0 transparent; }
  40%  { text-shadow: 0 0 25px rgba(255,102,0,0.45); }
  100% { text-shadow: 0 0 0 transparent; }
}
.stat-item.revealed .count-num { animation: numberGlow 1.5s ease-out; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero-orb-1 { width: 180px; height: 180px; }
  .hero-orb-2 { width: 130px; height: 130px; }
  .hero-orb-3 { display: none; }
}

/* ── Floating Girl Animation ── */
.floating-girl {
  animation: floatGirl 4s ease-in-out infinite;
}
@keyframes floatGirl {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}