/* ═══════════════════════════════════════════════════════════
   NEO AI — GHIBLI ANIME STYLE INTRO
   Inspired by Studio Ghibli: dreamy sunset sky, drifting
   clouds, firefly particles, gentle wind, warm palette
   ═══════════════════════════════════════════════════════════ */

/* ─── CONTAINER ─── */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
}

/* ─── SKY — Animated sunset gradient ─── */
.ghibli-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0c1445 0%,
    #1a1a5e 15%,
    #3b2073 25%,
    #6b3fa0 35%,
    #c2508f 48%,
    #e8836c 58%,
    #f4a764 68%,
    #fcd486 78%,
    #fef3c7 90%,
    #fffdf7 100%
  );
  animation: skyShift 4s ease-in-out forwards;
}

@keyframes skyShift {
  0%   { filter: brightness(0.3) saturate(0.5); }
  50%  { filter: brightness(0.7) saturate(0.85); }
  100% { filter: brightness(1) saturate(1); }
}

/* ─── STARS — twinkling ─── */
.ghibli-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 2s) ease-in-out var(--delay, 0s) infinite;
}

.s1  { top: 5%;  left: 10%; --dur: 2.2s; --delay: 0s; }
.s2  { top: 12%; left: 35%; --dur: 1.8s; --delay: 0.4s; width: 3px; height: 3px; }
.s3  { top: 8%;  left: 60%; --dur: 2.5s; --delay: 0.8s; }
.s4  { top: 15%; left: 82%; --dur: 1.6s; --delay: 0.2s; }
.s5  { top: 3%;  left: 48%; --dur: 2s;   --delay: 1s; width: 3px; height: 3px; }
.s6  { top: 18%; left: 20%; --dur: 2.3s; --delay: 0.6s; }
.s7  { top: 7%;  left: 73%; --dur: 1.9s; --delay: 1.2s; }
.s8  { top: 22%; left: 55%; --dur: 2.1s; --delay: 0.3s; }
.s9  { top: 10%; left: 90%; --dur: 1.7s; --delay: 0.9s; width: 3px; height: 3px; }
.s10 { top: 2%;  left: 25%; --dur: 2.4s; --delay: 0.5s; }
.s11 { top: 14%; left: 68%; --dur: 2s;   --delay: 1.1s; }
.s12 { top: 20%; left: 42%; --dur: 1.5s; --delay: 0.7s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* ─── CLOUDS — soft drifting ─── */
.ghibli-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  filter: blur(20px);
}

.c1 {
  width: 350px;
  height: 60px;
  top: 30%;
  animation: cloudDrift 12s ease-in-out -3s infinite;
  background: rgba(255,255,255,0.12);
}

.c2 {
  width: 250px;
  height: 45px;
  top: 40%;
  animation: cloudDrift 15s ease-in-out -7s infinite;
  background: rgba(248,180,180,0.1);
}

.c3 {
  width: 400px;
  height: 55px;
  top: 52%;
  animation: cloudDriftReverse 18s ease-in-out -5s infinite;
  background: rgba(255,220,180,0.12);
  filter: blur(25px);
}

.c4 {
  width: 200px;
  height: 35px;
  top: 25%;
  animation: cloudDrift 10s ease-in-out -2s infinite;
  background: rgba(200,180,255,0.08);
}

.c5 {
  width: 300px;
  height: 50px;
  top: 60%;
  animation: cloudDriftReverse 14s ease-in-out -8s infinite;
  background: rgba(255,240,200,0.1);
  filter: blur(30px);
}

@keyframes cloudDrift {
  0%   { left: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes cloudDriftReverse {
  0%   { right: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { right: 110%; opacity: 0; }
}

/* ─── FIREFLIES — warm glowing particles ─── */
.ghibli-fireflies {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 6px 2px rgba(253,230,138,0.6), 0 0 15px 4px rgba(253,230,138,0.2);
}

.ff1  { left: 12%; top: 35%; animation: fireflyFloat 4s ease-in-out 0.2s infinite; }
.ff2  { left: 28%; top: 55%; animation: fireflyFloat 3.5s ease-in-out 0.8s infinite; width: 5px; height: 5px; }
.ff3  { left: 45%; top: 40%; animation: fireflyFloat 4.2s ease-in-out 1.4s infinite; }
.ff4  { left: 65%; top: 50%; animation: fireflyFloat 3.8s ease-in-out 0.5s infinite; }
.ff5  { left: 80%; top: 35%; animation: fireflyFloat 4.5s ease-in-out 1.0s infinite; width: 5px; height: 5px; }
.ff6  { left: 18%; top: 65%; animation: fireflyFloat 3.2s ease-in-out 1.6s infinite; }
.ff7  { left: 55%; top: 60%; animation: fireflyFloat 4.8s ease-in-out 0.3s infinite; }
.ff8  { left: 72%; top: 42%; animation: fireflyFloat 3.6s ease-in-out 1.2s infinite; width: 6px; height: 6px; box-shadow: 0 0 8px 3px rgba(253,230,138,0.7), 0 0 20px 6px rgba(253,230,138,0.3); }
.ff9  { left: 35%; top: 30%; animation: fireflyFloat 4.1s ease-in-out 0.9s infinite; }
.ff10 { left: 90%; top: 55%; animation: fireflyFloat 3.4s ease-in-out 1.8s infinite; }
.ff11 { left: 8%;  top: 48%; animation: fireflyFloat 4.6s ease-in-out 0.1s infinite; width: 5px; height: 5px; }
.ff12 { left: 42%; top: 68%; animation: fireflyFloat 3.9s ease-in-out 1.5s infinite; }
.ff13 { left: 60%; top: 28%; animation: fireflyFloat 4.3s ease-in-out 0.7s infinite; }
.ff14 { left: 78%; top: 62%; animation: fireflyFloat 3.3s ease-in-out 2.0s infinite; width: 3px; height: 3px; }
.ff15 { left: 22%; top: 45%; animation: fireflyFloat 4.7s ease-in-out 1.1s infinite; }
.ff16 { left: 50%; top: 52%; animation: fireflyFloat 3.7s ease-in-out 0.6s infinite; width: 6px; height: 6px; box-shadow: 0 0 8px 3px rgba(253,230,138,0.7), 0 0 20px 6px rgba(253,230,138,0.3); }

@keyframes fireflyFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15%  { opacity: 0.8; }
  30%  { transform: translate(8px, -12px) scale(1); }
  50%  { opacity: 1; transform: translate(-5px, -20px) scale(1.2); }
  70%  { transform: translate(10px, -8px) scale(0.9); }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(3px, -25px) scale(0.4); }
}

/* ─── WIND LINES — gentle breeze ─── */
.ghibli-wind {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.wind-line {
  position: absolute;
  height: 1px;
  border-radius: 10px;
  opacity: 0;
}

.w1 {
  width: 120px;
  top: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: windBlow 3s ease-in-out 1s forwards;
}

.w2 {
  width: 180px;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,240,200,0.2), transparent);
  animation: windBlow 3.5s ease-in-out 1.5s forwards;
}

.w3 {
  width: 100px;
  top: 44%;
  background: linear-gradient(90deg, transparent, rgba(200,180,255,0.2), transparent);
  animation: windBlow 2.8s ease-in-out 2s forwards;
}

@keyframes windBlow {
  0%   { left: -15%; opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.6; }
  100% { left: 115%; opacity: 0; }
}

/* ─── LANDSCAPE SILHOUETTE ─── */
.ghibli-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  z-index: 5;
  background: 
    radial-gradient(ellipse 60% 100% at 15% 100%, #1a0a2e 0%, transparent 70%),
    radial-gradient(ellipse 80% 100% at 50% 100%, #120825 0%, transparent 60%),
    radial-gradient(ellipse 50% 100% at 85% 100%, #1a0a2e 0%, transparent 70%);
  opacity: 0;
  animation: landscapeRise 1.5s ease 0.5s forwards;
}

@keyframes landscapeRise {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 0.7; transform: translateY(0); }
}

/* ═══ BRAND CENTER ═══ */
.intro-brand {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ─── Logo — warm glowing orb ─── */
.intro-logo-glow {
  opacity: 0;
  animation: logoWarmIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.intro-logo-glow svg {
  filter: drop-shadow(0 0 20px rgba(253,230,138,0.4)) drop-shadow(0 0 40px rgba(249,168,212,0.2));
  animation: logoBreath 3s ease-in-out 1.3s infinite;
}

@keyframes logoWarmIn {
  0%   { opacity: 0; transform: scale(0) rotate(-60deg); }
  70%  { opacity: 1; transform: scale(1.1) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes logoBreath {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(253,230,138,0.4)) drop-shadow(0 0 40px rgba(249,168,212,0.2)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 30px rgba(253,230,138,0.6)) drop-shadow(0 0 50px rgba(249,168,212,0.3)); transform: scale(1.05); }
}

/* ─── Title — dreamy letter-by-letter ─── */
.intro-title {
  font-family: 'Outfit', sans-serif;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  display: flex;
  gap: 2px;
  position: relative;
}

.gchar {
  display: inline-block;
  opacity: 0;
  background: linear-gradient(
    180deg,
    #fef3c7 0%,
    #fde68a 25%,
    #f9a8d4 50%,
    #c084fc 75%,
    #818cf8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(253,230,138,0.3));
  animation: gcharReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.6s + var(--i) * 0.1s) forwards;
}

.gchar.gspace {
  width: 18px;
}

@keyframes gcharReveal {
  0%   { opacity: 0; transform: translateY(25px) scale(0.7); filter: blur(6px) drop-shadow(0 0 15px rgba(253,230,138,0.3)); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); filter: blur(0) drop-shadow(0 0 20px rgba(253,230,138,0.5)); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 0 15px rgba(253,230,138,0.3)); }
}

/* ─── Tagline ─── */
.intro-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0);
  letter-spacing: 0.15em;
  margin: 0;
  animation: tagFadeIn 0.8s ease 1.4s forwards;
}

@keyframes tagFadeIn {
  0%   { color: rgba(255,255,255,0); transform: translateY(8px); }
  100% { color: rgba(254,243,199,0.7); transform: translateY(0); }
}

/* ═══ DISSOLVE OUT ═══ */
.intro-splash.dissolving .ghibli-sky {
  animation: skyFadeOut 1.6s ease forwards;
}

.intro-splash.dissolving .intro-brand {
  animation: brandDreamOut 1.4s cubic-bezier(0.4, 0, 0, 1) forwards;
}

.intro-splash.dissolving .ghibli-clouds,
.intro-splash.dissolving .ghibli-fireflies,
.intro-splash.dissolving .ghibli-stars,
.intro-splash.dissolving .ghibli-wind,
.intro-splash.dissolving .ghibli-landscape {
  animation: elemFadeOut 1s ease forwards;
}

@keyframes skyFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes brandDreamOut {
  0%   { transform: translate(-50%, -50%) scale(1); filter: blur(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2); filter: blur(8px); opacity: 0; }
}

@keyframes elemFadeOut {
  to { opacity: 0; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .intro-title { font-size: 48px; }
  .intro-tagline { font-size: 12px; }
  .intro-logo-glow svg { width: 60px; height: 60px; }
  .cloud { filter: blur(15px); }
  .ghibli-landscape { height: 12%; }
}