/* Shared site styles — keyframes, pseudo-elements, and effects that Tailwind utilities can't express directly. */

html { scroll-behavior: smooth; }

/* Prevent decorative absolute-positioned elements (blobs, sparkles, oversized SVGs)
   from causing horizontal scroll on small viewports. */
html, body { overflow-x: hidden; }
body { max-width: 100vw; }

/* Long unbreakable strings (URLs, emails, addresses) shouldn't overflow on mobile */
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Active nav link ---------- */
/* Keep the same font-weight as other nav links so JS-added active class
   doesn't reflow the menu on page load (visible "jerk"). */
.nav-active { color: #1f6891; position: relative; }
.nav-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 3px;
  background: #f5a623;
  border-radius: 3px;
}
#mobileMenu .nav-active::after { display: none; }
/* Use a border-left that doesn't change layout: apply a transparent 3px border
   to every mobile nav item by default; active items switch only the color. */
#mobileMenu nav a { border-left: 3px solid transparent; padding-left: 10px; }
#mobileMenu .nav-active { border-left-color: #f5a623; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: all .7s ease-out; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Hero background ---------- */
.hero-bg {
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(74, 157, 200, .22), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(20, 163, 163, .18), transparent 55%),
    linear-gradient(180deg, #f6fbfd 0%, #ffffff 70%);
}

/* Ambient blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: float 14s ease-in-out infinite;
  pointer-events: none;
}
.blob.b1 { width: 360px; height: 360px; background: #aed8ea; top: -60px; left: -80px; }
.blob.b2 { width: 280px; height: 280px; background: #f5a623; opacity: .28; bottom: -60px; right: 10%; animation-delay: -5s; }
.blob.b3 { width: 220px; height: 220px; background: #14a3a3; opacity: .22; top: 40%; left: 45%; animation-delay: -9s; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.08); }
}

/* Dotted texture */
.grid-dots {
  background-image: radial-gradient(rgba(31,104,145,.18) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Rotating word ---------- */
.word-rotator { display: inline-grid; vertical-align: bottom; }
.word-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(40%);
  animation: wordCycle 8s infinite;
  color: #0f8686;
}
.word-rotator > span:nth-child(1) { animation-delay: 0s; }
.word-rotator > span:nth-child(2) { animation-delay: 2s; }
.word-rotator > span:nth-child(3) { animation-delay: 4s; }
.word-rotator > span:nth-child(4) { animation-delay: 6s; }
@keyframes wordCycle {
  0%, 20% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-40%); }
}

/* ---------- Photo mosaic tiles ---------- */
.tile { overflow: hidden; border-radius: 1.25rem; box-shadow: 0 20px 50px -20px rgba(25,59,82,.35); }
.tile img { transition: transform .9s ease; }
.tile:hover img { transform: scale(1.06); }
.tile-1 { transform: rotate(-1.5deg); }
.tile-2 { transform: rotate(2deg); }
.tile-3 { transform: rotate(-1deg); }

/* Floating badge bob */
.float-badge { animation: bob 5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Marquee ticker ---------- */
.marquee { display: flex; gap: 3rem; animation: marquee 30s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Hero fits viewport on lg+ screens */
@media (min-width: 1024px) {
  .hero-section {
    height: calc(100vh - 5rem);
    min-height: 620px;
  }
}

/* ---------- Hero entrance animations ---------- */
.fade-up { opacity: 0; transform: translateY(28px); animation: fadeUp .9s cubic-bezier(.22,.61,.36,1) forwards; }
.fade-up.d1 { animation-delay: .10s; }
.fade-up.d2 { animation-delay: .25s; }
.fade-up.d3 { animation-delay: .40s; }
.fade-up.d4 { animation-delay: .55s; }
.fade-up.d5 { animation-delay: .70s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.tile-in { opacity: 0; animation: tileIn 1s cubic-bezier(.22,.61,.36,1) forwards; }
.tile-1.tile-in { transform: translate(40px, 20px) rotate(-1.5deg); animation-delay: .35s; --tilt: -1.5deg; }
.tile-2.tile-in { transform: translate(40px, -20px) rotate(2deg); animation-delay: .55s; --tilt: 2deg; }
.tile-3.tile-in { transform: translate(40px, 20px) rotate(-1deg); animation-delay: .75s; --tilt: -1deg; }
@keyframes tileIn { to { opacity: 1; transform: translate(0,0) rotate(var(--tilt, 0deg)); } }

/* SVG underline draw-in */
.underline-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawUnderline 1.2s ease-out .9s forwards; }
@keyframes drawUnderline { to { stroke-dashoffset: 0; } }

/* Shine sweep on main tile */
.tile-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.5s ease-out 1.4s;
  z-index: 2;
  pointer-events: none;
}
@keyframes shine { to { transform: translateX(120%); } }

/* Pop-in */
.pop-in { opacity: 0; transform: scale(.85); animation: popIn .6s cubic-bezier(.34,1.56,.64,1) 1.2s forwards; }
@keyframes popIn { to { opacity: 1; transform: scale(1); } }

/* CTA glow */
.cta-glow { position: relative; }
.cta-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(245,166,35,.6), transparent);
  opacity: 0;
  animation: ctaGlow 3s ease-in-out 2s infinite;
  z-index: -1;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0; transform: scale(.9); }
  50% { opacity: .6; transform: scale(1.05); }
}

/* "Do" cards */
.do-card { transition: transform .4s ease, box-shadow .4s ease; }
.do-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(25,59,82,.35); }
.do-card .cover { transition: transform .7s ease; }
.do-card:hover .cover { transform: scale(1.08); }

/* Partner logo treatment */
.partner { filter: grayscale(1); opacity: .75; transition: all .3s ease; }
.partner:hover { filter: none; opacity: 1; transform: translateY(-3px); }