/* Portal-wide custom styles that complement Tailwind */

/* AOS's pre-animation state for directional effects (fade-left, fade-right,
   zoom-in-left, ...) translates elements off their final position -- until
   an element scrolls into view and AOS adds .aos-animate, it sits shifted
   outside its box, which was making the whole page wider than the viewport
   and forcing horizontal scroll on mobile. Decorative absolutely-positioned
   .blob elements are also deliberately placed partly off-canvas. Both are
   contained here rather than at every use site. */
html, body { overflow-x: hidden; max-width: 100%; }

html { scroll-behavior: smooth; }

[x-cloak] { display: none !important; }

/* Animated gradient used by the hero section */
.hero-gradient {
  background: linear-gradient(135deg, #0a1a33 0%, #0f2545 45%, #064e3b 100%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating decorative blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.35;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-25px) scale(1.06); }
}

/* Card hover elevation */
.card-lift { transition: transform .3s ease, box-shadow .3s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(10, 26, 51, .25); }

/* Scroll indicator bounce */
.scroll-indicator { animation: bounce 2s infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Simple skeleton shimmer for lazy content */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Landing-page photo & animation styles ---------- */

/* Slow Ken Burns zoom for hero background photos */
.kenburns { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(1.5%, -1.5%); }
}

/* Framed hero photo composition */
.photo-frame { position: relative; }
.photo-frame::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(16,185,129,.55), rgba(59,130,246,.35));
  transform: rotate(-3deg);
  z-index: -1;
  animation: framePulse 6s ease-in-out infinite;
}
@keyframes framePulse {
  0%, 100% { transform: rotate(-3deg) scale(1); opacity: .8; }
  50% { transform: rotate(-2deg) scale(1.02); opacity: 1; }
}

/* Gentle vertical float for badges / chips over photos */
.float-slow { animation: floatSlow 5s ease-in-out infinite; }
.float-slower { animation: floatSlow 7s ease-in-out infinite reverse; }
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Polaroid-style gallery collage */
.polaroid {
  background: #fff;
  padding: .6rem .6rem 2.2rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px -10px rgba(10, 26, 51, .3);
  transition: transform .35s ease, box-shadow .35s ease, z-index 0s;
}
.polaroid:hover { transform: scale(1.06) rotate(0deg) !important; z-index: 20; box-shadow: 0 24px 50px -12px rgba(10, 26, 51, .4); }

/* Shine sweep across photos on hover */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.shine:hover::after { left: 130%; }

/* Gradient headline text */
.gradient-text {
  background: linear-gradient(90deg, #10b981, #6ee7b7, #3b82f6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientSlide 5s linear infinite;
}
@keyframes gradientSlide { to { background-position: 200% center; } }

/* Slow spin for decorative rings */
.spin-slow { animation: spinSlow 24s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }