/* Minimal, smooth global transitions inspired by requested effects */

/* Page Curtain Transition (Kyle Brumm inspired) */
.transition-cover {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #25a849, #208243);
  transform: translateY(100%);
  z-index: 9999;
  pointer-events: none;
}
.transition-cover.show {
  animation: curtain-in 600ms ease forwards;
}
.transition-cover.hide {
  animation: curtain-out 700ms ease forwards;
}
@keyframes curtain-in { from { transform: translateY(100%);} to { transform: translateY(0);} }
@keyframes curtain-out { from { transform: translateY(0);} to { transform: translateY(-100%);} }

/* Page Transition Loader (subtle bar bottom) */
.transition-loader {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #25a849, #208243, #229e47);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 10000;
}
.transition-loader.active {
  animation: loadbar 1.2s ease forwards;
}
@keyframes loadbar { to { transform: scaleX(1); background-position: 100% 0; } }

/* Portal Effect Hero Reveal (radial mask) */
.portal-reveal {
  --r: 0%;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 var(--r), transparent calc(var(--r) + 0.5%));
          mask: radial-gradient(circle at 50% 50%, #000 var(--r), transparent calc(var(--r) + 0.5%));
}
.portal-animate {
  animation: portal 900ms ease-out forwards;
}
@keyframes portal {
  0% { --r: 0%; }
  100% { --r: 140%; }
}

/* Motion Blur Showcase (subtle on hero image) */
.motion-blur-enter { filter: blur(8px); opacity: 0; transform: translateY(16px); }
.motion-blur-enter.in-view { filter: blur(0); opacity: 1; transform: translateY(0); transition: filter 600ms ease, opacity 600ms ease, transform 600ms ease; }

/* Translate hover utilities (Cassandra Rossal vibe) */
.lift-hover { transition: transform 300ms ease, box-shadow 300ms ease; }
.lift-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }

/* Kontext stack effect (Hakim El Hattab inspired) - subtle parallax layers */
.kontext {
  position: relative;
  perspective: 1000px;
}
.kontext .layer {
  position: absolute; inset: 0; pointer-events: none;
}
.kontext .layer.back {
  background: radial-gradient(1200px 400px at 80% -10%, rgba(37,168,73,0.08), transparent), radial-gradient(1000px 300px at 10% 110%, rgba(32,130,67,0.08), transparent);
  transform: translateZ(-200px) scale(1.2);
}
.kontext .layer.front { transform: translateZ(0); }

/* Subtle fade/slide for global reveals */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }