/* ======================= home.css (Home page only) ======================= */

/* ---- HERO ---- */
.hero-alpha{
  min-height: 100vh;
  /* đổi ảnh nền thành video => bỏ background image */
  background: none;
  position: relative;
  color:#fff;
  border-bottom-left-radius: 50% 8%;
  border-bottom-right-radius: 50% 8%;
  overflow:hidden;
  background-attachment: scroll; /* bỏ fixed */
}

/* Video background */
.hero-alpha .hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  transform: translateZ(0);
  filter: saturate(.95) brightness(.85);
  pointer-events:none;
}

/* Gradient overlay stays on top of video */
.hero-alpha::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,34,.90) 0%, rgba(17,20,44,.85) 35%, rgba(17,20,44,.70) 100%);
  pointer-events:none;
  z-index:1;
}

/* Ensure hero content is above overlays */
.hero-alpha > .container{
  position:relative;
  z-index:2;
}

.hero-title{
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 1.05;
  letter-spacing:.2px;
  color:#f7f8fb;
  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}

/* Decorative concentric rings (bottom-right) */
.hero-rings{
  position:absolute;
  inset:auto -15% -10% auto;
  width:min(90vw, 1200px);
  height:min(90vh, 900px);
  background:
    radial-gradient(120% 120% at 100% 10%, rgba(255,255,255,.06) 0 1px, transparent 1px) no-repeat,
    radial-gradient(120% 120% at 95% 15%, rgba(120,180,255,.30) 0 1px, transparent 1px) no-repeat,
    radial-gradient(120% 120% at 90% 20%, rgba(255,255,255,.65) 0 1px, transparent 1px) no-repeat,
    radial-gradient(120% 120% at 85% 25%, rgba(120,220,230,.55) 0 1px, transparent 1px) no-repeat;
  background-size: 100% 100%, 92% 92%, 84% 84%, 76% 76%;
  mix-blend-mode: screen;
  opacity:.55; pointer-events:none;
  z-index:2;
}

@media (max-width: 991.98px){
  .hero-alpha{ padding-top:4rem; padding-bottom:3rem; }
  .hero-rings{ opacity:.45; }
}

/* Giữ nguyên block này nhưng hero-alpha không còn background image nên không ảnh hưởng.
   Nếu muốn “parallax-ish fallback” cho video thì thường không dùng background-attachment. */
@media (min-width: 992px){
  .hero-alpha{ background-attachment: fixed; } /* parallax-ish fallback */
}

/* ---- Summit block (chiều cao ~ 2/3 màn hình, nền hình) ---- */
.hero-summit{
  min-height: 66vh;
  /* background: url("https://alphacore.com/wp-content/uploads/2025/04/AlphaCore-Wealth-Summit-background.jpg") center center / cover no-repeat; */
  position: relative;
  color:#fff;
  overflow:hidden;
}
.hero-summit::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
@media (max-width: 991.98px){
  .hero-summit{ padding-top:4rem; padding-bottom:3rem; }
}
@media (min-width: 992px){
  .hero-summit{ background-attachment: fixed; }
}

/* ---- Core Difference section ---- */
.section-core{ background:#fff; }
.text-core-title{ color:#1d2240; }
.text-core-body{ color: var(--core-body); }
.text-core-accent{ color: var(--core-accent); }

.core-media{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden; background:#0f1331;
  box-shadow: var(--shadow-lg); isolation:isolate;
}
.core-media img{ display:block; filter: saturate(.9) brightness(.85); }
.core-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 105% 0%, rgba(120,180,255,.25) 0 20%, transparent 22%) no-repeat,
    radial-gradient(120% 120% at 115% 20%, rgba(255,255,255,.28) 0 20%, transparent 22%) no-repeat,
    radial-gradient(120% 120% at 125% 40%, rgba(120,220,230,.22) 0 20%, transparent 22%) no-repeat;
  mix-blend-mode: screen; pointer-events:none;
}


.core-link{ color: var(--core-accent); }
.core-link:hover{ text-decoration: underline; }

@media (max-width: 991.98px){
  .display-4{ font-size: calc(2rem + 1.5vw); }
  .core-media{ border-radius:16px; }
}