/* ============================================
   Ghost Automotive — Intro + Transition
   Ghost draws → brand reveals → screen wipes away → site appears
   ============================================ */

/* ====== INTRO ====== */
.intro{
  position:fixed;inset:0;z-index:9998;background:#000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:1.5rem;
}

/* Ghost draws in */
.intro__ghost{width:160px;height:auto;opacity:0;animation:ghostIn 1.2s cubic-bezier(.2,0,.2,1) .2s forwards}
.intro__ghost path{stroke:#fff;fill:none;stroke-width:5;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.6s ease .4s forwards}
.intro__ghost .eye{fill:#fff;opacity:0;filter:drop-shadow(0 0 0px #fff);animation:eyeGlow .8s ease 1.7s forwards}

/* Letters */
.intro__text{
  display:flex;gap:.12em;
  font-family:var(--font-h);font-size:2.2rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.2em;color:#fff;
}
.intro__letter{opacity:0;transform:translateY(20px)}
.intro__letter.in{animation:letterUp .3s cubic-bezier(.2,0,.2,1) forwards}

.intro__sub{
  font-family:var(--font-h);font-size:.55rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4em;color:#555;opacity:0;
}
.intro__sub.in{animation:fadeIn .4s ease forwards}

.intro__line{width:0;height:1px;background:#fff}
.intro__line.in{animation:lineGrow .5s cubic-bezier(.4,0,.2,1) forwards}

/* Wipe out — the whole intro slides up and away */
.intro.wipe{
  animation:wipeUp .8s cubic-bezier(.6,0,.2,1) forwards;
}

@keyframes ghostIn{
  0%{opacity:0;transform:translateY(15px) scale(.9)}
  60%{opacity:1;transform:translateY(-3px) scale(1.02)}
  100%{opacity:1;transform:none}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes eyeGlow{
  0%{opacity:0;filter:drop-shadow(0 0 0px #fff)}
  50%{opacity:1;filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 25px rgba(255,255,255,.5))}
  100%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
}
@keyframes letterUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes lineGrow{to{width:50px}}
@keyframes wipeUp{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-100vh);opacity:1}
}

/* ====== SITE REVEAL AFTER INTRO ====== */
.hdr--waiting{opacity:0;transform:translateY(-30px)}
.hdr--reveal{animation:dropIn .6s cubic-bezier(.2,0,.2,1) forwards}

.hero--waiting{opacity:0;transform:scale(1.04)}
.hero--reveal{animation:zoomSettle 1s cubic-bezier(.2,0,.2,1) forwards}

@keyframes dropIn{to{opacity:1;transform:none}}
@keyframes zoomSettle{
  0%{opacity:0;transform:scale(1.04)}
  40%{opacity:1}
  100%{opacity:1;transform:none}
}

/* ====== GHOST CURSOR ====== */
.ghost-float{
  position:fixed;z-index:9990;pointer-events:none;opacity:0;
  width:34px;height:auto;transition:opacity .5s;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.06));
}
.ghost-float.vis{opacity:.1}
.ghost-float path{stroke:#fff;fill:none;stroke-width:5}
.ghost-float .eye{fill:#fff}
@media(max-width:1023px){.ghost-float{display:none}}

/* Word reveal removed — was causing bounce on slide change */