/* ============================================================
   Coriaum — Chemicals & Lab Products
   Custom styles & animations (layout is Tailwind utilities)
   Palette is kept to the original blue scheme.
   ============================================================ */

:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
}

html { scroll-behavior: smooth; }

/* Anchor targets clear the fixed header */
section[id] { scroll-margin-top: 5rem; }

/* Squared aesthetic — zero corner radius on every box (SVG shapes are unaffected) */
*, *::before, *::after { border-radius: 0 !important; }

body {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo-text {
  font-family: 'Inter', system-ui, Arial, sans-serif !important;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.logo-text { letter-spacing: -0.015em; }

/* Scroll progress bar */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, #3b82f6, #1e40af);
  box-shadow: 0 0 12px rgba(37,99,235,.6);
  transition: width .1s linear;
}

/* ---------- Header ---------- */
#header { transition: background .3s, backdrop-filter .3s, box-shadow .3s, padding .3s; }
.backdrop-blur { background: rgba(255,255,255,.72); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -18px rgba(30,58,138,.5); }
.not-blur     { background: transparent; backdrop-filter: none; box-shadow: none; }

/* Animated nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-800));
  border-radius: 2px; transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after { width: 100%; }

/* ---------- Gradient text ---------- */
.text-gradient {
  background: linear-gradient(90deg, var(--blue-900), var(--blue-600), var(--blue-800));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 7s ease infinite;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ---------- Decorative blobs ---------- */
.blob { filter: blur(55px); opacity: .5; animation: blobFloat 16s ease-in-out infinite; }

/* ---------- Eye-catch: rising bubbles (SVG circles) ---------- */
.bubble { transform-box: fill-box; transform-origin: center; animation: bubbleRise 6s ease-in infinite; }

/* ---------- Cards ---------- */
.card-hover { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.card-hover:hover { transform: translateY(-10px); box-shadow: 0 28px 55px -22px rgba(30,58,138,.5); }

.img-zoom { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.group:hover .img-zoom { transform: scale(1.09); }

.icon-badge { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.group:hover .icon-badge { transform: translateY(-5px) scale(1.08) rotate(-4deg); }

/* ---------- Animated atom (hero accent) ---------- */
.atom-orbit { transform-box: fill-box; transform-origin: center; }
.atom-orbit.o1 { animation: spinSlow 12s linear infinite; }
.atom-orbit.o2 { animation: spinSlow 9s linear infinite reverse; }
.atom-orbit.o3 { animation: spinSlow 16s linear infinite; }

/* ---------- Hero image crossfade ---------- */
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.3s ease, transform 6s ease; transform: scale(1.04); }
.hero-slide.active { opacity: 1; transform: scale(1); }

/* ---------- Floating animation ---------- */
.floaty      { animation: floaty 7s ease-in-out infinite; }
.floaty-slow { animation: floaty 10s ease-in-out infinite; }

/* ---------- Partner / brand logos (uniform, colourise on hover) ---------- */
.partner-card { transition: transform .35s ease, box-shadow .35s ease; }
.partner-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px -24px rgba(30,58,138,.55); }
.partner-logo {
  filter: grayscale(1) opacity(.55);
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.partner-card:hover .partner-logo { filter: grayscale(0) opacity(1); transform: scale(1.05); }

/* ---------- Testimonials carousel ---------- */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.t-dot { width: 9px; height: 9px; background: #cbd5e1; transition: width .3s ease, background .3s ease; }
.t-dot.active { width: 26px; background: var(--blue-700); }

/* ---------- Pulsing ring (live dot) ---------- */
.pulse-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--blue-500); animation: pulseRing 2.4s cubic-bezier(.4,0,.2,1) infinite;
}

/* ---------- Buttons ---------- */
.btn-primary { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .3s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 35px -14px rgba(29,78,216,.7); }
.btn-primary:active { transform: translateY(0) scale(.97); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- Inputs ---------- */
.field { transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.field:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,.18); background: #fff; }

/* ---------- Marquee (industries strip / subtle) ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(30,58,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,138,.06) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ---------- Keyframes ---------- */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes blobFloat {
  0%,100%{ transform: translate(0,0) scale(1); }
  33%    { transform: translate(22px,-26px) scale(1.12); }
  66%    { transform: translate(-18px,16px) scale(.92); }
}
@keyframes bubbleRise {
  0%   { transform: translate(0,30px) scale(.35); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(10px,-160px) scale(1); }
  85%  { opacity: .65; }
  100% { transform: translate(-8px,-380px) scale(1.3); opacity: 0; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0%{transform:scale(.7);opacity:.7} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}