/* =========================================================
   UNISOLV — HOMEPAGE-ONLY Premium Visual Layer
   Loaded exclusively by index.php via the $extra_head hook.
   Every rule here is either scoped to .home-page or keyed off
   classes that only ever appear in index.php's markup, so
   nothing here can leak into other pages.
   ========================================================= */

.home-page { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   HERO — premium animated scientific environment
   ========================================================= */
.hero.hero-premium {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background: linear-gradient(125deg, #1E1233 0%, #34205C 28%, #53329B 55%, #3B2166 78%, #1E1233 100%);
  background-size: 260% 260%;
  animation: heroGradientShift 22s ease-in-out infinite alternate;
  isolation: isolate;
}
@keyframes heroGradientShift {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 40% 100%; }
}

/* soft ambient light glows */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; will-change: transform; }
.hero-glow-1 {
  width: 520px; height: 520px; left: -140px; top: -120px;
  background: radial-gradient(circle, rgba(1,180,210,0.35) 0%, rgba(1,180,210,0) 70%);
  animation: glowDrift1 16s ease-in-out infinite alternate;
}
.hero-glow-2 {
  width: 620px; height: 620px; right: -180px; bottom: -160px;
  background: radial-gradient(circle, rgba(168,145,225,0.32) 0%, rgba(168,145,225,0) 70%);
  animation: glowDrift2 19s ease-in-out infinite alternate;
}
@keyframes glowDrift1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,30px) scale(1.12); } }
@keyframes glowDrift2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-30px,-40px) scale(1.08); } }

/* particle canvas layer */
.hero-particles { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }

/* =========================================================
   HERO SLIDES / CAROUSEL
   ========================================================= */
.hero-slides { position: relative; z-index: 2; width: 100%; }
.hero-slide {
  position: absolute; inset: 0; width: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.9s ease;
  display: flex; align-items: center;
}
.hero-slide.is-active {
  position: relative; opacity: 1; visibility: visible; pointer-events: auto;
}
.hero-slide:not(.is-active) .hero-content > * { transform: translateY(16px); opacity: 0; }

.hero-grid {
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
  padding: 148px 24px 132px;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.hero-content { flex: 1 1 480px; }
.hero-visual { flex: 1 1 420px; }

.hero-content { color: #fff; max-width: 600px; }
.hero-content .eyebrow { color: var(--accent, #01B4D2); }

.hero-headline { color: #fff; margin-bottom: 20px; }
.hero-headline .line { display: block; }
.hero-headline .line-accent {
  background: linear-gradient(100deg, #01B4D2 0%, #A891E1 55%, #01B4D2 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: headlineSheen 6s ease-in-out infinite;
}
@keyframes headlineSheen { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

.hero-slide .lede { color: rgba(255,255,255,0.78); max-width: 540px; margin-bottom: 30px; }
.hero-slide .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* staggered text entrance, driven purely by CSS on .is-active */
.hero-slide.is-active .reveal-item {
  animation: heroItemIn 0.75s cubic-bezier(.21,.85,.32,1) both;
}
.hero-slide.is-active .reveal-1 { animation-delay: .05s; }
.hero-slide.is-active .reveal-2 { animation-delay: .18s; }
.hero-slide.is-active .reveal-3 { animation-delay: .34s; }
.hero-slide.is-active .reveal-4 { animation-delay: .50s; }
@keyframes heroItemIn {
  from { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* =========================================================
   HERO VISUAL — scientific orb + molecular network + cards
   ========================================================= */
.hero-visual {
  position: relative; height: 520px;
  display: flex; align-items: center; justify-content: center;
}

.molecule-scene {
  position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none;
}
.molecule-scene .bg-ring {
  position: absolute; border: 1px solid rgba(255,255,255,0.08); border-radius: 50%;
}
.molecule-scene .bg-ring-1 { width: 92%; height: 92%; top: 4%; left: 4%; animation: sceneSpin 90s linear infinite; }
.molecule-scene .bg-ring-2 { width: 68%; height: 68%; top: 16%; left: 16%; animation: sceneSpin 60s linear infinite reverse; }
@keyframes sceneSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* large translucent hexagon/benzene-ring style structures, purely decorative */
.molecule-scene .hex {
  position: absolute; width: 220px; height: 220px; opacity: 0.16;
  background: conic-gradient(from 0deg, transparent 0 60deg, rgba(1,180,210,0.5) 60deg 62deg, transparent 62deg 120deg, rgba(168,145,225,0.5) 120deg 122deg, transparent 122deg 180deg, rgba(1,180,210,0.5) 180deg 182deg, transparent 182deg 240deg, rgba(168,145,225,0.5) 240deg 242deg, transparent 242deg 300deg, rgba(1,180,210,0.5) 300deg 302deg, transparent 302deg 360deg);
  border-radius: 50%;
  animation: hexFloat 26s ease-in-out infinite;
}
.molecule-scene .hex-1 { top: -6%; right: -4%; animation-delay: 0s; }
.molecule-scene .hex-2 { bottom: -8%; left: -6%; width: 180px; height: 180px; animation-delay: -9s; animation-duration: 32s; }
@keyframes hexFloat {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(-12px, 14px) rotate(20deg); }
}

/* central scientific orb */
.sci-orb-wrap {
  position: relative; width: 380px; height: 380px; z-index: 2;
  animation: orbBob 7s ease-in-out infinite;
}
@keyframes orbBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.sci-orb-glow {
  position: absolute; inset: -30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(1,180,210,0.35) 0%, rgba(83,50,155,0.25) 45%, transparent 72%);
  filter: blur(26px);
  animation: orbPulse 5s ease-in-out infinite;
}
@keyframes orbPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.sci-orb-glass {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 32%, rgba(168,145,225,0.10) 60%, rgba(30,18,51,0.25) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 60px rgba(1,180,210,0.12), 0 30px 70px rgba(10,5,25,0.45);
}

.sci-orb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sci-orb-rotor { transform-origin: 190px 190px; animation: sceneSpin 46s linear infinite; }
.sci-orb-rotor-rev { transform-origin: 190px 190px; animation: sceneSpin 34s linear infinite reverse; }

.atom-node { animation: nodePulse 3.6s ease-in-out infinite; transform-origin: center; }
.atom-node.n2 { animation-delay: .5s; }
.atom-node.n3 { animation-delay: 1s; }
.atom-node.n4 { animation-delay: 1.5s; }
.atom-node.n5 { animation-delay: 2s; }
.atom-node.n6 { animation-delay: 2.5s; }
@keyframes nodePulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

.bond-line { stroke-dasharray: 6 5; animation: bondFlow 3s linear infinite; opacity: 0.55; }
@keyframes bondFlow { to { stroke-dashoffset: -22; } }

.bond-pulse {
  offset-path: path('M96,120 C150,60 250,60 300,120');
  animation: travel 4.5s linear infinite;
}
.bond-pulse.p2 { offset-path: path('M90,260 C150,320 250,320 305,255'); animation-duration: 5.5s; animation-delay: 1.1s; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* floating glassmorphism info cards */
.float-card {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(10,5,25,0.35);
  color: #fff;
  animation: cardFloat 6s ease-in-out infinite;
}
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #01B4D2); flex-shrink: 0; box-shadow: 0 0 10px rgba(1,180,210,0.9); }
.float-card .fc-title { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; line-height: 1.3; }
.float-card .fc-sub { font-size: 0.68rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.float-card-1 { top: 6%; left: -4%; animation-delay: 0s; }
.float-card-2 { top: 14%; right: -8%; animation-delay: -2s; animation-duration: 7s; }
.float-card-3 { bottom: 10%; left: -8%; animation-delay: -4s; animation-duration: 6.5s; }
.float-card-4 { bottom: 2%; right: -2%; animation-delay: -1s; animation-duration: 7.5s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* =========================================================
   SLIDE 2 — Analytical Excellence: chromatogram trace + scan
   ========================================================= */
.chrom-trace {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: chromDraw 4.5s ease-out infinite;
}
.chrom-trace-2 { animation-delay: .35s; animation-duration: 4.8s; }
@keyframes chromDraw {
  0%   { stroke-dashoffset: 900; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.scan-line {
  opacity: 0;
  animation: scanSweep 4.5s ease-in-out infinite;
}
@keyframes scanSweep {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: .55; }
  92%  { opacity: .55; }
  100% { transform: translateX(268px); opacity: 0; }
}

/* =========================================================
   SLIDE 3 — Quality & Reliability: precision control gauge
   ========================================================= */
.gauge-rotor { transform-origin: 190px 190px; animation: sceneSpin 70s linear infinite; }
.gauge-arc { opacity: 0.85; }
.check-mark {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: checkDraw 3.5s ease-out infinite;
}
@keyframes checkDraw {
  0%   { stroke-dashoffset: 70; }
  35%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* =========================================================
   SLIDE 4 — Research & Innovation: node network + spark core
   ========================================================= */
.research-core {
  animation: coreSpark 2.6s ease-in-out infinite;
  transform-origin: 190px 190px;
}
@keyframes coreSpark {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.35); }
}
.bond-pulse.p3 { offset-path: path('M190,190 L300,90'); animation-duration: 4s; animation-delay: .6s; }
.bond-pulse.p4 { offset-path: path('M190,190 L230,320'); animation-duration: 5s; animation-delay: 1.6s; }
.hero-slide[data-slide="3"] .bond-pulse { offset-path: path('M190,190 L80,100'); }

/* mouse parallax targets (transform applied via CSS vars set in JS) */
.hero-premium .molecule-scene,
.hero-premium .sci-orb-wrap,
.hero-premium .float-card,
.hero-premium .hero-particles {
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
.hero-premium .sci-orb-wrap { transform: translate3d(calc(var(--px, 0) * 0.6px), calc(var(--py, 0) * 0.6px), 0) translateY(0); }
.hero-premium .float-card-1 { transform: translate3d(calc(var(--px,0) * 1.4px), calc(var(--py,0) * 1.4px), 0); }
.hero-premium .float-card-2 { transform: translate3d(calc(var(--px,0) * -1.2px), calc(var(--py,0) * 1.1px), 0); }
.hero-premium .float-card-3 { transform: translate3d(calc(var(--px,0) * 1.1px), calc(var(--py,0) * -1.2px), 0); }
.hero-premium .float-card-4 { transform: translate3d(calc(var(--px,0) * -1.3px), calc(var(--py,0) * -1.1px), 0); }

/* scroll-out effect */
.hero-premium.is-scrolled .hero-content { opacity: 0.75; transform: translateY(-14px); transition: opacity .4s ease, transform .4s ease; }
.hero-premium.is-scrolled .sci-orb-wrap { transform: scale(0.94); transition: transform .4s ease; }
.hero-premium .hero-content { transition: opacity .4s ease, transform .4s ease; }

/* =========================================================
   HERO CONTROLS
   ========================================================= */
.hero-controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 0 24px 40px; max-width: 1240px; margin: -76px auto 0;
}
.hero-arrow {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s; backdrop-filter: blur(10px);
}
.hero-arrow:hover { background: rgba(1,180,210,0.25); transform: translateY(-2px); }

.hero-pagination { display: flex; align-items: center; gap: 10px; }
.hero-dot {
  position: relative; width: 46px; height: 5px; border-radius: 100px;
  background: rgba(255,255,255,0.2); border: none; cursor: pointer; overflow: hidden; padding: 0;
}
.hero-dot .dot-progress {
  position: absolute; inset: 0; width: 0%; background: var(--accent, #01B4D2); border-radius: 100px;
}
.hero-dot.active .dot-progress { animation: dotProgress linear forwards; animation-duration: var(--autoplay-duration, 7000ms); }
.hero-dot.active { background: rgba(255,255,255,0.32); }
@keyframes dotProgress { from { width: 0%; } to { width: 100%; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; padding: 128px 20px 40px; text-align: left; }
  .hero-visual { height: 360px; margin-top: 20px; }
  .sci-orb-wrap { width: 260px; height: 260px; }
  .float-card { padding: 9px 12px; }
  .float-card .fc-title { font-size: 0.72rem; }
  .hero-controls { margin-top: -30px; padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .hero.hero-premium { min-height: auto; }
  .hero-visual { height: 280px; }
  .sci-orb-wrap { width: 210px; height: 210px; }
  .float-card-2, .float-card-4 { display: none; } /* fewer floating layers on small phones */
  .hero-glow-1, .hero-glow-2 { filter: blur(50px); }
}

/* =========================================================
   SCROLL-REVEAL (below-hero sections)
   ========================================================= */
.home-page [data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.21,.7,.3,1), transform .7s cubic-bezier(.21,.7,.3,1);
  will-change: opacity, transform;
}
.home-page [data-reveal="fade-up"]    { transform: translateY(28px); }
.home-page [data-reveal="fade-left"]  { transform: translateX(-28px); }
.home-page [data-reveal="fade-right"] { transform: translateX(28px); }
.home-page [data-reveal="scale"]      { transform: scale(0.94); }
.home-page [data-reveal].is-visible   { opacity: 1; transform: none; }

/* =========================================================
   FEATURED PRODUCTS — slider upgrade
   ========================================================= */
.product-slider-outer { position: relative; }
.product-slider {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 6px 22px; margin: 0 -6px; scrollbar-width: none; -ms-overflow-style: none;
}
.product-slider::-webkit-scrollbar { display: none; }
.product-slider .product-card {
  flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; min-width: 0;
}
.product-slider .thumb { overflow: hidden; }
.product-slider .thumb img { transition: transform .55s ease; }
.product-slider .product-card:hover .thumb img { transform: scale(1.08); }

.slider-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: -6px; margin-bottom: 8px; }
.slider-arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-soft, #E6E0F2);
  background: #fff; color: var(--ink, #1E1233); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.slider-arrow:hover { background: var(--primary, #53329B); color: #fff; border-color: transparent; }
.slider-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.slider-dots .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-soft, #E6E0F2); border: none; cursor: pointer; transition: all .2s; }
.slider-dots .s-dot.active { background: var(--accent, #01B4D2); width: 20px; border-radius: 100px; }

@media (max-width: 980px) {
  .product-slider .product-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 640px) {
  .product-slider .product-card { flex: 0 0 88%; }
}

/* =========================================================
   Card stagger helper (industries / capabilities grids)
   ========================================================= */
.home-page .grid[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Animated quality process line */
.quality-line { position: relative; }
.quality-line::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, var(--accent, #01B4D2), var(--light, #A891E1));
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s ease;
}
.quality-line.is-visible::before { transform: scaleX(1); }