/* ===== Keyframes ===== */

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes text-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes blob-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes bounce-y {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

@keyframes float-hieroglyph {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: .5; }
  80% { opacity: .5; }
  100% { transform: translateY(-40px) rotate(15deg); opacity: 0; }
}

@keyframes float-dust {
  0% { transform: translate(0, 0); opacity: 0; }
  50% { opacity: .8; }
  100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

@keyframes float-contact-particle {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(var(--ds, 1)); }
}

/* ===== Loader ===== */
.loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .8s ease-in-out;
}
.loader.is-hidden { opacity: 0; pointer-events: none; }
.loader-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.loader-svg { margin-bottom: 1rem; overflow: visible; }
.loader-text {
  stroke: var(--emerald-500);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: transparent;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 8px rgba(16,185,129,.8)) drop-shadow(0 0 15px rgba(16,185,129,.4));
  animation: loader-draw 3s ease-in-out forwards, loader-fill 1s ease-in-out 2s forwards;
}
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-fill { to { fill: var(--emerald-500); fill-opacity: 1; } }

.loader-bar-track {
  position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%);
  height: 2px; width: 8rem; background: var(--slate-800); border-radius: 999px; overflow: hidden;
  opacity: 0; animation: loader-bar-appear .5s ease 2.5s forwards;
}
@keyframes loader-bar-appear { to { opacity: 1; } }
.loader-bar-fill {
  height: 100%; width: 0%; background: var(--emerald-400);
  box-shadow: 0 0 15px #34d399;
  animation: loader-bar-fill 3s linear forwards;
}
@keyframes loader-bar-fill { to { width: 100%; } }

/* ===== Navbar ===== */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.5rem 0; transition: all .3s ease; }
.navbar.is-scrolled { background: rgba(2,6,23,.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.05); padding: 1rem 0; }
.navbar.is-scrolled.menu-open { background: transparent; border-bottom-color: transparent; }

.logo-btn.shake { animation: logo-shake .8s steps(9); }
.logo-btn.pulse .logo-box { animation: logo-box-pulse .4s ease-in-out infinite; }
.logo-btn.burst .logo-box { animation: logo-box-burst 1s ease-in-out infinite; }

@keyframes logo-shake {
  0%, 100% { transform: translate(0,0) rotate(0); }
  11% { transform: translate(-2px,-1px) rotate(-1deg); }
  22% { transform: translate(2px,1px) rotate(1deg); }
  33% { transform: translate(-1.5px,-.8px) rotate(-.6deg); }
  44% { transform: translate(1.5px,.8px) rotate(.6deg); }
  55% { transform: translate(-2px,-1px) rotate(-1deg); }
  66% { transform: translate(2px,1px) rotate(1deg); }
  77% { transform: translate(-1.5px,-.8px) rotate(-.6deg); }
}

@keyframes logo-box-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes logo-box-burst {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

/* Mobile menu wipe */
.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: circle(0% at 100% 0%);
  opacity: 0;
  transition: clip-path .5s ease-in-out, opacity .5s ease-in-out;
  pointer-events: none;
}
.mobile-menu.is-open { clip-path: circle(150% at 100% 0%); opacity: 1; pointer-events: auto; }

/* Page transition (logo easter egg) */
.page-transition {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.page-transition.is-active { opacity: 1; }
.page-transition-bg {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom right, rgba(5,150,105,.2), rgba(2,6,23,.8), rgba(6,78,59,.2));
}
.transition-lines, .transition-particles { position: absolute; inset: 0; }
.transition-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--emerald-400), transparent);
  transform: scaleY(0); opacity: 0;
  animation: transition-line-anim 1.5s ease-in-out forwards;
}
@keyframes transition-line-anim {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: .9; }
  80% { transform: scaleY(.8); opacity: .5; }
  100% { transform: scaleY(0); opacity: 0; }
}
.transition-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 999px; background: var(--emerald-400);
  box-shadow: 0 0 20px rgba(16,185,129,1), 0 0 40px rgba(16,185,129,.5);
  transform: scale(0); opacity: 0;
  animation: transition-particle-anim 1.2s ease-out forwards;
}
@keyframes transition-particle-anim {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(var(--ps, 1)); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.transition-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; opacity: 0; animation: transition-text-in .8s ease .5s forwards;
}
@keyframes transition-text-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-10deg); } to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
.transition-title {
  font-family: 'Cinzel', serif; font-size: clamp(3rem, 8vw, 6rem); color: var(--emerald-400); margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(16,185,129,.8), 0 0 60px rgba(16,185,129,.4);
  opacity: 0; transform: translateY(50px); animation: transition-fade-up .8s ease .8s forwards;
}
.transition-subtitle {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.25rem, 3vw, 1.875rem);
  color: rgba(255,255,255,.9); letter-spacing: .05em;
  opacity: 0; transform: translateY(30px); animation: transition-fade-up .8s ease 1.2s forwards;
}
@keyframes transition-fade-up { to { opacity: 1; transform: translateY(0); } }
.transition-rule {
  height: 4px; width: 0; margin: 1.5rem auto 0;
  background: linear-gradient(to right, transparent, var(--emerald-400), transparent);
  animation: transition-rule-grow 1.2s ease 1.6s forwards;
}
@keyframes transition-rule-grow { to { width: 100%; } }

/* Hero */
.hero-blob { position: absolute; border-radius: 999px; pointer-events: none; filter: blur(128px); }
.hero-blob--a { top: 25%; left: 25%; width: 24rem; height: 24rem; background: rgba(5,150,105,.2); animation: blob-pulse 4s ease-in-out infinite; }
.hero-blob--b { bottom: 25%; right: 25%; width: 24rem; height: 24rem; background: rgba(13,148,136,.2); animation: blob-pulse 7s ease-in-out infinite; }
.hero-content { opacity: 0; transform: translateY(20px); animation: hero-in .8s ease-out .1s forwards; }
@keyframes hero-in { to { opacity: 1; transform: translateY(0); } }
.hero-actions { opacity: 0; transform: scale(.8); animation: hero-in-scale .5s ease .5s forwards; }
@keyframes hero-in-scale { to { opacity: 1; transform: scale(1); } }
.hero-socials { opacity: 0; animation: fade-in 1s ease .9s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.hero-scroll-hint { animation: bounce-y 2s ease-in-out infinite; }
.hero-title-gradient {
  background: linear-gradient(90deg, var(--emerald-400), var(--teal-400), var(--emerald-400));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-gradient 4s ease infinite;
}