/* ============================================================
   SEVEROOS PORTFOLIO — ANIMATIONS
   ============================================================ */

/* ---------- keyframes ---------- */
@keyframes pulseFade{
  0%, 100%{ opacity: .35; }
  50%{ opacity: 1; }
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@keyframes scrollLine{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}

@keyframes floatGlow{
  0%, 100%{ transform: translate(-50%, 0) scale(1); }
  50%{ transform: translate(-50%, -18px) scale(1.05); }
}
.glow{ animation: floatGlow 10s ease-in-out infinite; }

/* ---------- page transition on load ---------- */
@keyframes fadeInPage{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
main{ animation: fadeInPage .8s var(--ease); }

/* ---------- scroll reveal base states ---------- */
.reveal-up{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft);
}
.reveal-up.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* stagger children within a revealed group */
.about-stats .stat.in-view:nth-child(1){ transition-delay: .05s; }
.about-stats .stat.in-view:nth-child(2){ transition-delay: .15s; }
.about-stats .stat.in-view:nth-child(3){ transition-delay: .25s; }

.project-card.in-view:nth-child(1){ transition-delay: .05s; }
.project-card.in-view:nth-child(2){ transition-delay: .12s; }
.project-card.in-view:nth-child(3){ transition-delay: .19s; }
.project-card.in-view:nth-child(4){ transition-delay: .26s; }

.service-card.in-view:nth-child(1){ transition-delay: .05s; }
.service-card.in-view:nth-child(2){ transition-delay: .12s; }
.service-card.in-view:nth-child(3){ transition-delay: .19s; }
.service-card.in-view:nth-child(4){ transition-delay: .26s; }

.note-card.in-view:nth-child(1){ transition-delay: .05s; }
.note-card.in-view:nth-child(2){ transition-delay: .13s; }
.note-card.in-view:nth-child(3){ transition-delay: .21s; }

.gallery-item.in-view:nth-child(1){ transition-delay: .04s; }
.gallery-item.in-view:nth-child(2){ transition-delay: .1s; }
.gallery-item.in-view:nth-child(3){ transition-delay: .16s; }
.gallery-item.in-view:nth-child(4){ transition-delay: .22s; }

/* ---------- hero letter reveal ---------- */
.reveal-char{
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotate(2deg);
  animation: charUp .9s var(--ease-out-soft) forwards;
}
.hero-title .line:nth-child(1) .reveal-char{ animation-delay: .25s; }
.hero-title .line:nth-child(2) .reveal-char:nth-child(1){ animation-delay: .4s; }
.hero-title .line:nth-child(2) .reveal-char:nth-child(2){ animation-delay: .5s; }

@keyframes charUp{
  to{ opacity: 1; transform: translateY(0) rotate(0); }
}

.hero .eyebrow.reveal-up, .hero .hero-sub.reveal-up, .hero .hero-actions.reveal-up{
  transition-delay: .55s;
}

/* ---------- light bulb: power-on sequence, then ambient pulse ---------- */
@keyframes bulbPowerOn{
  0%{ color: var(--text-3); }
  10%{ color: var(--brass); }
  16%{ color: var(--text-3); }
  24%{ color: var(--brass); }
  30%{ color: var(--text-3); }
  40%{ color: var(--brass); }
  100%{ color: var(--brass); }
}
@keyframes bulbGlowOn{
  0%, 8%{ opacity: 0; }
  10%{ opacity: .55; }
  16%{ opacity: 0; }
  24%{ opacity: .65; }
  30%{ opacity: .08; }
  40%{ opacity: .85; }
  100%{ opacity: .85; }
}
@keyframes bulbIconPulse{
  0%, 100%{ filter: drop-shadow(0 0 6px rgba(216,168,87,.55)); }
  50%{ filter: drop-shadow(0 0 15px rgba(216,168,87,.9)); }
}
@keyframes bulbGlowPulse{
  0%, 100%{ opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50%{ opacity: .95; transform: translate(-50%, -50%) scale(1.1); }
}

.bulb-icon{
  animation:
    bulbPowerOn 1.8s steps(1) 2.6s forwards,
    bulbIconPulse 3.2s ease-in-out 4.4s infinite;
}
.bulb-glow{
  animation:
    bulbGlowOn 1.8s ease 2.6s forwards,
    bulbGlowPulse 3.2s ease-in-out 4.4s infinite;
}
.bulb-float{
  animation: bulbFloat 4s ease-in-out 4.4s infinite;
}

@keyframes bulbFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ---------- quick flicker feedback when the bulb is clicked ---------- */
@keyframes bulbClickFlicker{
  0%{ filter: brightness(1); }
  30%{ filter: brightness(2.2); }
  55%{ filter: brightness(.6); }
  100%{ filter: brightness(1); }
}
.bulb-wrap.toggled .bulb-icon{
  animation: bulbClickFlicker .5s steps(2);
}

/* ---------- scale-in utility (used by JS-added class if needed) ---------- */
.scale-in{
  opacity: 0; transform: scale(.92);
  transition: opacity .6s var(--ease-out-soft), transform .6s var(--ease-out-soft);
}
.scale-in.in-view{ opacity: 1; transform: scale(1); }