/* ═══════════════════════════════════════════════════════
   OASISVISA — Brand Intro  (v3 · Luxury Center Stack)
   Sequence:
     0.00s  → Darkness
     0.00s  → Ambient light breathes in slowly
     0.28s  → Logo emerges (clean scale + opacity, no blur)
     1.02s  → Gold shine sweeps across logo
     0.95s  → Subtle outer ring materialises
     1.10s  → "OASIS VISA" rises from below
     1.42s  → Gold rule expands
     1.52s  → Tagline appears
     1.80s  → Full scene — hold
     2.40s  → Dissolve → main screen
   ═══════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────── */
#intro {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: #07090F;
  overflow: hidden;
}
#intro.fade-out {
  animation: introOut .65s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* ── Ambient light (single radial, breathes in slowly) ── */
.i-light {
  position: absolute;
  width: clamp(500px,110vw,720px);
  height: clamp(500px,110vw,720px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201,169,110,.10) 0%,
    rgba(30,58,138,.05)   42%,
    transparent           70%);
  opacity: 0;
  animation: iLightIn 1.6s ease 0s forwards;
}
@keyframes iLightIn { to { opacity: 1; } }

/* ── Center stage ────────────────────────────────────── */
.i-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

/* ── Logo wrapper ────────────────────────────────────── */
.i-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(22px,4vw,32px);
}

/* Logo circle */
.i-logo {
  width: clamp(150px,36vw,216px);
  height: clamp(150px,36vw,216px);
  border-radius: 50%; overflow: hidden;
  position: relative;
  opacity: 0;
  animation: iLogoIn .80s cubic-bezier(0,.55,.25,1) .28s forwards;
  box-shadow:
    0 0 0 1px  rgba(201,169,110,.18),
    0 0 40px   rgba(201,169,110,.10),
    0 0 100px  rgba(201,169,110,.05);
}
@keyframes iLogoIn {
  0%   { opacity: 0; transform: scale(.90); }
  100% { opacity: 1; transform: scale(1);   }
}

.i-logo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* Gold shine sweep */
.i-shine {
  position: absolute; top: -50%; left: -100%;
  width: 52%; height: 200%;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,.04) 36%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.04) 64%,
    transparent 100%);
  transform: skewX(-16deg);
  pointer-events: none;
  animation: iShine .58s cubic-bezier(.4,0,.2,1) 1.02s both;
}
@keyframes iShine { from { left: -100%; } to { left: 165%; } }

/* Single outer ring */
.i-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.14);
  opacity: 0;
  animation: iRingIn .55s ease .95s forwards;
}
@keyframes iRingIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ── Brand name ──────────────────────────────────────── */
.i-name {
  display: flex; align-items: baseline; gap: clamp(8px,2vw,14px);
  opacity: 0; transform: translateY(14px);
  animation: iNameUp .65s cubic-bezier(.16,1,.3,1) 1.10s forwards;
}
@keyframes iNameUp {
  to { opacity: 1; transform: translateY(0); }
}

/* "OASIS" — crisp white */
.i-oasis {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(28px,7vw,52px);
  letter-spacing: .20em;
  color: #fff;
  filter: drop-shadow(0 0 18px rgba(201,169,110,.2));
}

/* "VISA" — gold gradient */
.i-visa {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(28px,7vw,52px);
  letter-spacing: .20em;
  background: linear-gradient(160deg, #C9A96E 0%, #F0D898 40%, #C09040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(201,169,110,.38));
}

/* ── Horizontal rule ─────────────────────────────────── */
.i-rule {
  width: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,169,110,.38) 50%, transparent);
  margin: clamp(14px,3vw,20px) 0 clamp(12px,2.5vw,16px);
  animation: iRuleGrow .42s ease 1.42s forwards;
}
@keyframes iRuleGrow { to { width: clamp(90px,20vw,148px); } }

/* ── Tagline ─────────────────────────────────────────── */
.i-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(8.5px,1.8vw,10.5px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: transparent;
  animation: iTagIn .5s ease 1.52s forwards;
}
@keyframes iTagIn { to { color: rgba(255,255,255,.28); } }

/* ── Skip button ─────────────────────────────────────── */
.skip-btn {
  position: absolute; bottom: 24px; right: 20px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: transparent; background: none; border: none;
  cursor: pointer; padding: 10px 6px; z-index: 10;
  transition: color .22s;
  animation: skipShow .3s ease .70s forwards;
}
.skip-btn:hover { color: rgba(255,255,255,.7) !important; }
@keyframes skipShow { to { color: rgba(255,255,255,.24); } }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 420px) {
  .i-name       { gap: 8px; }
  .i-oasis,
  .i-visa       { letter-spacing: .15em; }
  .i-tagline    { letter-spacing: .2em; }
}