/* =========================================================
   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.
   ========================================================= */

/* NOTE: overflow-x was intentionally NOT put on body/.home-page here — doing so is a
   well-known cause of broken position:fixed behavior on mobile Safari (iOS), which would
   break the site header's mobile nav panel. The hero section below already contains all
   of its own decorative elements (particles, molecules, glows, floating cards) via its
   own overflow:hidden, so no page-level overflow containment is needed. */

@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); }