.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  filter: blur(2px);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

@keyframes underlineDraw{
  to{transform: scaleX(1)}
}
@keyframes slowFloat{
  from{transform: translate3d(-8px,-10px,0)}
  to{transform: translate3d(10px,8px,0)}
}
@keyframes mouseDot{
  0%{opacity:.1; transform: translate(-50%, 0)}
  45%{opacity:1}
  100%{opacity:.1; transform: translate(-50%, 12px)}
}
@keyframes outlineDraw{
  to{transform: scaleX(1)}
}

/* Intro overlay */
.intro{
  position:fixed;
  inset:0;
  z-index:999;
  background: radial-gradient(1100px 700px at 30% 20%, rgba(255,213,106,.14), transparent 60%),
              linear-gradient(180deg, #05060a, #070812);
  display:flex;
  align-items:center;
  justify-content:center;
}
.intro.is-hidden{
  opacity:0;
  transform: scale(1.015);
  pointer-events:none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.intro__inner{
  position:relative;
  width: min(780px, calc(100% - 40px));
  height: min(520px, calc(100% - 40px));
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,8,11,.45);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  overflow:hidden;
}
.intro__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity:.18;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
}
.intro__logoWrap{
  position:absolute;
  left:50%;
  top:48%;
  transform: translate(-50%, -50%);
  width: min(320px, 70vw);
  aspect-ratio: 1/1;
  display:grid;
  place-items:center;
}
.intro__logo{
  width:100%;
  height:auto;
  opacity:.0;
  transform: scale(.96);
  filter: drop-shadow(0 0 24px rgba(255,213,106,.10));
  /* reveal via clip-path to simulate a "draw" */
  clip-path: inset(0 0 100% 0);
}
.intro__scan{
  position:absolute;
  inset: -30% -10%;
  background: linear-gradient(90deg, transparent, rgba(255,213,106,.10), rgba(247,185,11,.18), transparent);
  transform: translateX(-120%) rotate(8deg);
  opacity:.0;
  pointer-events:none;
}
.intro__glow{
  position:absolute;
  inset:-35%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,213,106,.18), transparent 55%);
  opacity:0;
  filter: blur(0px);
  pointer-events:none;
}
.intro__particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.intro__hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  color: rgba(233,238,249,.75);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
}

/* Intro active stages */
.intro.stage-1 .intro__logo{
  opacity:1;
  clip-path: inset(0 0 0 0);
  transition: opacity .2s var(--ease), clip-path 1.15s var(--ease);
}
.intro.stage-1 .intro__scan{
  opacity:1;
  transform: translateX(120%) rotate(8deg);
  transition: transform 1.1s var(--ease), opacity .2s var(--ease);
}
.intro.stage-2 .intro__glow{
  opacity:1;
  animation: glowPulse .9s var(--ease) 1;
}
@keyframes glowPulse{
  0%{transform: scale(.92); opacity:.0}
  45%{transform: scale(1.0); opacity:1}
  100%{transform: scale(1.12); opacity:.0}
}

/* Cinematic hint: tiny grain (very subtle) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  opacity:.035;
  mix-blend-mode: overlay;
}