/* ═══════════════════════════════════════════════
   BLUEPRINT ALIGNED: CINEMATIC 3D LOGO FUSION INTRO
   Visual-preserving Awwwards-level Luxury Styling
   ═══════════════════════════════════════════════ */

/* ─── 1. Overlay Container & Ambient Effects ─── */
.ag-uninterrupted-intro {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #08080C;
  z-index: 99999; /* Place above everything */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.ag-uninterrupted-intro.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Frosted Glass Stage */
.ag-glass-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  backdrop-filter: blur(45px) saturate(115%);
  -webkit-backdrop-filter: blur(45px) saturate(115%);
  background: rgba(8, 8, 12, 0.76);
}

.ag-continuous-content {
  position: relative;
  width: 100%;
  max-width: 650px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Cinematic Film Grain */
.ag-intro-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient Particles */
.ag-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ag-p {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #E6C687 0%, transparent 70%);
  filter: blur(1px);
  will-change: transform, opacity;
}

.ag-p.p1 { width: 4px; height: 4px; top: 20%; left: 15%; opacity: 0.4; animation: agFloatSlow 12s ease-in-out infinite alternate; }
.ag-p.p2 { width: 3px; height: 3px; top: 60%; left: 80%; opacity: 0.3; animation: agFloatSlow 16s ease-in-out infinite alternate-reverse; }
.ag-p.p3 { width: 5px; height: 5px; top: 80%; left: 30%; opacity: 0.25; animation: agFloatSlow 14s ease-in-out infinite alternate; }
.ag-p.p4 { width: 2px; height: 2px; top: 35%; left: 70%; opacity: 0.5; animation: agFloatSlow 10s ease-in-out infinite alternate-reverse; }

@keyframes agFloatSlow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(25px, -35px) scale(1.2); opacity: 0.6; }
  100% { transform: translate(-15px, 20px) scale(0.9); opacity: 0.2; }
}

/* Breathing Hero Light Pass */
.ag-hero-light-pass {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(201, 169, 122, 0.08) 0%, rgba(196, 144, 138, 0.04) 40%, transparent 70%);
  pointer-events: none;
  animation: agLightBreathing 8s ease-in-out infinite alternate;
}

@keyframes agLightBreathing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.12); opacity: 1; }
}

/* Sweeping Light Beam */
.ag-sweeping-light-beam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 253, 246, 0.04) 47%,
    rgba(244, 228, 193, 0.08) 50%,
    rgba(255, 253, 246, 0.04) 53%,
    transparent 65%
  );
  background-size: 300% 100%;
  background-position: 180% 0;
  mix-blend-mode: screen;
  animation: agLightSweepAnim 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes agLightSweepAnim {
  0% { background-position: 180% 0; opacity: 0; }
  10% { opacity: 1; }
  85%, 100% { background-position: -80% 0; opacity: 0; }
}


/* ─── 2. Symmetrical 3D Letters Container ─── */
.ag-acp-discovery {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
  max-width: 420px;
  transform-style: preserve-3d;
  perspective: 1200px;
  animation: agACPDiscoveryPhase 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform, filter;
  z-index: 6;
}

@keyframes agACPDiscoveryPhase {
  0% { opacity: 0; }
  15%, 52% { opacity: 1; filter: blur(0); }
  65%, 100% { opacity: 0; filter: blur(8px); pointer-events: none; }
}

.ag-cinematic-letter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 110px;
  background: transparent !important;
  will-change: transform, opacity;
}

/* Ambient Glow behind each letter */
.ag-char-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 198, 135, 0.45) 0%, rgba(201, 169, 122, 0.12) 50%, transparent 75%);
  filter: blur(22px);
  z-index: 1;
}

/* Metallic Gold Typography Gradient */
.ag-char {
  position: relative;
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 5.6rem;
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF6E2 25%, #E6C687 55%, #C9A97A 80%, #8A6A2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: 
    drop-shadow(0 15px 35px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 20px rgba(230, 198, 135, 0.85))
    drop-shadow(0 0 45px rgba(201, 169, 122, 0.5));
}


/* ─── 3. Symmetrical 3D Motion Paths ─── */
.ag-cinematic-letter.letter-a { animation: agLetterAFusion 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ag-cinematic-letter.letter-c { animation: agLetterCFusion 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ag-cinematic-letter.letter-p { animation: agLetterPFusion 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes agLetterAFusion {
  0% {
    opacity: 0;
    filter: brightness(0.2) blur(16px);
    transform: translate3d(-140px, 0, -220px) scale(0.65);
  }
  24% { opacity: 0.85; }
  38%, 52% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  60% {
    opacity: 0.95;
    filter: brightness(3) blur(1px);
    transform: translate3d(90px, 0, 80px) scale(0.65);
  }
  66%, 100% {
    opacity: 0;
    filter: brightness(7) blur(10px);
    transform: translate3d(120px, 0, 150px) scale(0.02);
  }
}

@keyframes agLetterCFusion {
  0% {
    opacity: 0;
    filter: brightness(0.2) blur(16px);
    transform: translate3d(0, 40px, -260px) scale(0.65);
  }
  24% { opacity: 0.85; }
  38%, 52% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  60% {
    opacity: 0.95;
    filter: brightness(3.5) blur(1px);
    transform: translate3d(0, 0, 80px) scale(0.65);
  }
  66%, 100% {
    opacity: 0;
    filter: brightness(8) blur(10px);
    transform: translate3d(0, 0, 150px) scale(0.02);
  }
}

@keyframes agLetterPFusion {
  0% {
    opacity: 0;
    filter: brightness(0.2) blur(16px);
    transform: translate3d(140px, 0, -220px) scale(0.65);
  }
  24% { opacity: 0.85; }
  38%, 52% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  60% {
    opacity: 0.95;
    filter: brightness(3) blur(1px);
    transform: translate3d(-90px, 0, 80px) scale(0.65);
  }
  66%, 100% {
    opacity: 0;
    filter: brightness(7) blur(10px);
    transform: translate3d(-120px, 0, 150px) scale(0.02);
  }
}


/* ─── 4. Singularity Core Flare & Ring Burst ─── */
.ag-fusion-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF3D1 25%, #C9A97A 60%, transparent 75%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: screen;
  animation: agFusionCoreIgnition 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes agFusionCoreIgnition {
  0%, 55% { transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(4px); }
  63% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; filter: blur(0); }
  72%, 100% { transform: translate(-50%, -50%) scale(3.8); opacity: 0; filter: blur(16px); }
}

.ag-fusion-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(243, 229, 173, 0.9);
  box-shadow: 0 0 35px rgba(201, 169, 122, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  animation: agFusionRingPulse 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes agFusionRingPulse {
  0%, 57% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  64% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  75%, 100% { transform: translate(-50%, -50%) scale(3.0); opacity: 0; }
}


/* ─── 5. Final Brand Discovery (Logo & Typography) ─── */
.ag-brand-discovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.96) translateY(10px);
  animation: agFullBrandDiscovery 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, filter, transform;
}

@keyframes agFullBrandDiscovery {
  0%, 58% {
    opacity: 0;
    filter: blur(16px);
    transform: scale(0.7) translateY(0);
  }
  67% {
    opacity: 0.95;
    filter: blur(2px);
    transform: scale(1.06) translateY(0);
  }
  74%, 100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }
}

/* Logo Image Styling */
.ag-logo-wrapper {
  margin-bottom: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 25px rgba(201, 169, 122, 0.25));
}

.ag-logo-img {
  height: 260px;
  width: auto;
  display: block;
}

/* Brand Name / Typography */
.ag-brand-typography {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.ag-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: #f4e4c1;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(244, 228, 193, 0.22);
}

.ag-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #c9a97a;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
}

/* Tagline words with staggered keyframe entry */
.ag-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.ag-tag-word {
  opacity: 0;
  transform: translateY(6px);
  animation: agTaglineReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ag-tag-dot {
  color: #c9a97a;
  opacity: 0;
  transform: scale(0.6);
  animation: agTaglineReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ag-tag-word:nth-child(1) { animation-delay: 3.7s; }
.ag-tag-dot:nth-child(2) { animation-delay: 3.8s; }
.ag-tag-word:nth-child(3) { animation-delay: 3.9s; }
.ag-tag-dot:nth-child(4) { animation-delay: 4.0s; }
.ag-tag-word:nth-child(5) { animation-delay: 4.1s; }

@keyframes agTaglineReveal {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Growing Champagne Line */
.ag-champagne-line {
  width: 160px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 169, 122, 0.4) 20%,
    #f4e4c1 50%,
    rgba(201, 169, 122, 0.4) 80%,
    transparent
  );
  box-shadow: 0 0 8px rgba(244, 228, 193, 0.3);
  transform: scaleX(0);
  transform-origin: center;
  animation: agChampagneLineGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 3.9s;
}

@keyframes agChampagneLineGrow {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}