/* ============================================================
   ARIA — Animations & Scroll Effects
   ============================================================ */

/* ---- Fade/Reveal Utilities ---- */
/* ---- Fade/Reveal Utilities (Cinematic Upgrade) ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  filter: blur(15px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px) scale(0.97);
  filter: blur(15px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px) scale(0.97);
  filter: blur(15px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(20px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Stagger children (Cinematic) */
.stagger>* {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  filter: blur(10px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger.visible>* {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.stagger.visible>*:nth-child(1) { transition-delay: 0.1s; }
.stagger.visible>*:nth-child(2) { transition-delay: 0.2s; }
.stagger.visible>*:nth-child(3) { transition-delay: 0.3s; }
.stagger.visible>*:nth-child(4) { transition-delay: 0.4s; }
.stagger.visible>*:nth-child(5) { transition-delay: 0.5s; }
.stagger.visible>*:nth-child(6) { transition-delay: 0.6s; }
.stagger.visible>*:nth-child(n+7) { transition-delay: 0.7s; }

/* ---- Hero Entrance Animations ---- */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(60px) skewY(2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

@keyframes heroSubIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes curtainReveal {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes textBlurIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.1) translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }
}

@keyframes maskReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.hero__title {
  animation: textBlurIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.hero__title .outline {
  display: inline-block;
  animation: maskReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

.hero__eyebrow {
  animation: fadeInUp 0.8s ease 0.3s both;
}

.hero__subtitle {
  animation: heroSubIn 1s ease 1s both;
}

.hero__actions {
  animation: fadeInUp 0.8s ease 1.3s both;
}

.hero__scroll {
  animation: fadeIn 1s ease 1.8s both;
}

/* ---- Photo Entrance Animations (Beyonce.com Style) ---- */

/* Desktop Hero Image */
.hero__img-long {
  opacity: 0;
  transform: scale(0.95) translateX(60px); /* Cinematic scale-up + slide */
  filter: blur(25px);
  clip-path: inset(0 100% 0 0); /* Wave reveal from left to right */
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__img-long.is-loaded {
  opacity: 1;
  transform: scale(1) translateX(0);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

/* Mobile Hero Stack */
.hero__mobile-img-wrap {
  overflow: hidden; /* ensure clean reveal */
}

.hero__mobile-img {
  opacity: 0;
  transform: scale(0.95) translateY(40px); /* Scale-up + rise */
  filter: blur(15px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__mobile-img.is-loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* Cinematic Entrance Applications */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 10000;
  transform-origin: top;
  animation: curtainReveal 1.4s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
  pointer-events: none;
}

body.index-page .page-curtain {
  display: none !important;
}

.speaking-hero__title {
  animation: textBlurIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.speaking-hero__outline {
  display: inline-block;
  animation: maskReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.section-label.reveal {
  animation: fadeInUp 1s ease 1s both;
}

.section-subtitle.reveal {
  animation: fadeInUp 1s ease 1.4s both;
}

/* ---- Navbar Link Animations ---- */
@keyframes navLinkIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(15px) skewY(2deg);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) skewY(0);
    clip-path: inset(0 0 0 0);
  }
}

body:not(.index-page) .navbar__desktop-link {
  animation: navLinkIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body:not(.index-page) .navbar__desktop-link:nth-child(1) { animation-delay: 1.4s; }
body:not(.index-page) .navbar__desktop-link:nth-child(2) { animation-delay: 1.5s; }
body:not(.index-page) .navbar__desktop-link:nth-child(3) { animation-delay: 1.6s; }
body:not(.index-page) .navbar__desktop-link:nth-child(4) { animation-delay: 1.7s; }
body:not(.index-page) .navbar__desktop-link:nth-child(5) { animation-delay: 1.8s; }
body:not(.index-page) .navbar__desktop-link:nth-child(6) { animation-delay: 1.9s; }
body:not(.index-page) .navbar__desktop-link:nth-child(7) { animation-delay: 2.0s; }
body:not(.index-page) .navbar__desktop-link:nth-child(8) { animation-delay: 2.1s; }

/* ---- Navbar Intro Animation (Index Page) ---- */
body.index-page .navbar:not(.navbar--intro-anim) .navbar__desktop-links,
body.index-page .navbar:not(.navbar--intro-anim) .navbar__logo,
body.index-page .navbar:not(.navbar--intro-anim) .navbar__toggle {
  opacity: 0;
  pointer-events: none;
}

body.index-page .navbar.navbar--intro-anim .navbar__desktop-link {
  opacity: 0;
  animation: navLinkIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Elegant staggered delays for index navbar links */
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(1) { animation-delay: 0.0s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(2) { animation-delay: 0.08s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(3) { animation-delay: 0.16s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(4) { animation-delay: 0.24s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(5) { animation-delay: 0.32s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(6) { animation-delay: 0.40s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(7) { animation-delay: 0.48s; }
body.index-page .navbar.navbar--intro-anim .navbar__desktop-link:nth-child(8) { animation-delay: 0.56s; }

body.index-page .navbar.navbar--intro-anim .navbar__logo,
body.index-page .navbar.navbar--intro-anim .navbar__toggle {
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* ---- Gold Shimmer Text ---- */
.shimmer-text {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 40%, var(--black) 50%, var(--gold-light) 60%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ---- Typewriter Cursor ---- */
.typewriter::after {
  content: '|';
  color: var(--gold);
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

/* ---- Marquee (Robust) ---- */
.marquee-track {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.5rem 0;
  background: transparent;
}

.marquee-inner {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee-inner:hover {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding: 0 4rem;
  flex-shrink: 0;
}

.marquee-item img {
  height: 40px;
  width: auto;
  filter: grayscale(1) brightness(2);
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.marquee-item img:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

.marquee-sep {
  color: var(--gold);
  font-size: 1rem;
  opacity: 0.5;
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ---- Hover Image Reveal ---- */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-hover-zoom:hover img {
  transform: scale(1.08);
}

/* ---- Gold Line Divider Animation ---- */
@keyframes lineGrow {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

.line-grow {
  animation: lineGrow 1.2s ease forwards;
}

/* ---- Pulse ---- */
@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.4)
  }

  50% {
    box-shadow: 0 0 0 12px rgba(255, 45, 85, 0)
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ---- Spin (loader) ---- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* ---- Slide In ---- */
@keyframes slideInRight {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0)
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(100%)
  }
}

/* ---- Page Transition ---- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

.page-transition.enter {
  animation: ptEnter 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.page-transition.exit {
  animation: ptExit 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes ptEnter {
  from {
    transform: scaleY(0);
    transform-origin: bottom
  }

  to {
    transform: scaleY(1);
    transform-origin: bottom
  }
}

@keyframes ptExit {
  from {
    transform: scaleY(1);
    transform-origin: top
  }

  to {
    transform: scaleY(0);
    transform-origin: top
  }
}

/* ---- Toast Notifications ---- */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  min-width: 280px;
  animation: toastIn 0.3s ease forwards;
  box-shadow: var(--shadow);
}

.toast.removing {
  animation: toastOut 0.3s ease forwards;
}

.toast--success {
  border-left-color: #27ae60;
}

.toast--error {
  border-left-color: #e74c3c;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(30px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0)
  }

  to {
    opacity: 0;
    transform: translateX(30px)
  }
}

/* ---- Video Overlay Play Button ---- */
.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  transition: background var(--transition);
  cursor: pointer;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-btn__icon {
  width: 64px;
  height: 64px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--black);
  transition: transform var(--transition), box-shadow var(--transition);
}

.play-btn:hover .play-btn__icon {
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(255, 45, 85, 0.5);
}

/* ---- Countdown ---- */
.countdown {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.countdown__unit {
  text-align: center;
}

.countdown__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1;
}

.countdown__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.countdown__sep {
  font-size: 2rem;
  color: var(--text-muted);
  margin-top: -0.5rem;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  color: var(--white-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.lightbox__close:hover {
  color: var(--gold);
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--white-muted);
  cursor: pointer;
  padding: 1rem;
  transition: color var(--transition-fast);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__prev {
  left: 1.5rem;
}

.lightbox__next {
  right: 1.5rem;
}

.lightbox__prev:hover,
.lightbox__next:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---- Floating Overlapping Image Elements & Animations ---- */
@keyframes premiumFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes premiumFloatReverse {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(15px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.floating-image {
  animation: premiumFloat 6s ease-in-out infinite;
}

.floating-image--reverse {
  animation: premiumFloatReverse 7s ease-in-out infinite;
}

.floating-image-badge {
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-image-badge:hover {
  transform: scale(1.05) translateY(-5px) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25) !important;
}