/* =========================================================
   Ojas Global Services — custom styles
   (Utility classes live in tailwind.css; this file holds the
   base styles, animations and small custom components.)
   ========================================================= */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  /* fixed header height */
  overflow-x: clip;
  /* decorative rings/blobs may extend past the viewport edge */
}

body {
  margin: 0;
  background: #f8f5ee;
  color: #0e2841;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #b69b59;
  color: #0e2841;
}

/* ---------- Film-grain overlay ---------- */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Outlined gold text (marquee) ---------- */
.text-outline-gold {
  color: transparent;
  -webkit-text-stroke: 1.2px #b69b59;
}

.consulting-image-banner {
  height: 220px;
}

.consulting-image-banner img {
  object-position: center 45%;
}

.leadership-name {
  font-size: 2.025rem;
  line-height: 1;
}

.leadership-credentials {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.leadership-credentials-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.leadership-credential-primary {
  padding: 0.65em;
  font-size: 14px;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .consulting-image-banner {
    height: 340px;
  }

  .leadership-name {
    font-size: 3.375rem;
  }
}

@media (min-width: 1100px) {
  .leadership-credentials-primary {
    flex-wrap: nowrap;
  }
}

.footer-navigation-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .footer-navigation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-navigation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Animations ---------- */
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 70s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 28s linear infinite;
}

.animate-spin-slower {
  animation: spin-slow 60s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

  .animate-marquee,
  .animate-spin-slow,
  .animate-spin-slower {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Scroll-reveal (driven by js/main.js) ----------
   Elements with data-from start hidden (only when JS is running)
   and are revealed by main.js. Without JS everything stays visible. */
.js [data-from]:not(.anim-ready) {
  visibility: hidden;
}

/* ---------- Contact form ---------- */
.select-chevron {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23172C5B' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>");
  background-size: 14px;
  background-position: right 1rem center;
  background-repeat: no-repeat;
}

button[disabled] {
  cursor: progress;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  max-width: min(92vw, 380px);
  padding: 14px 18px;
  border-radius: 14px;
  background: #0e2841;
  color: #f8f5ee;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-left: 4px solid #b69b59;
  box-shadow: 0 20px 50px -20px rgba(14, 40, 65, 0.6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  border-left-color: #e0685a;
}

.toast[hidden] {
  display: none;
}
/* ---------- Moved from inline styles in index.html ---------- */
/* Scroll progress bar: starts empty, JS (main.js) updates transform on scroll */
[data-scroll-progress] {
  transform: scaleX(0);
}

/* Floating emblem: 3D perspective wrapper + tilt target */
.emblem-wrap {
  perspective: 800px;
}

[data-tilt] {
  transform-style: preserve-3d;
}

[data-tilt] > img {
  transform: translateZ(40px);
}