/* =====================================================================
   enhance.css — visual polish layer for OriAutomations
   Loaded AFTER the inline <style>, so it overrides where needed.
   Everything here is additive and degrades gracefully.
   ===================================================================== */

/* ---------- 0. Merged problem cards (desc folded in) ------------------ */
.problem-card .problem-desc {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
}
.problem-card { min-height: 184px; }
.problem-card > span { margin-top: 16px; }

/* ---------- 1. Palette refinement -------------------------------------
   Pull away from the over-used teal→purple "AI template" gradient.
   Teal stays the brand; the second stop shifts toward electric cyan/blue.
   Purple is kept only as a rare accent (the photo ring), not everywhere. */
:root {
  --accent: #0ea5e9;                       /* sky/cyan instead of purple   */
  --accent-glow: rgba(14, 165, 233, 0.32);
  --gradient-accent: linear-gradient(135deg, #00d9b8 0%, #0aa6c9 52%, #2f6bff 100%);
  --gradient-text: linear-gradient(120deg, #5eead4 0%, #7dd3fc 55%, #a5b4fc 100%);
  --gradient-hero: radial-gradient(ellipse at top right, #14304a 0%, #0a1628 42%, #050b18 100%);
  --rare-purple: #7c3aed;                  /* used sparingly, on purpose   */
}

/* ---------- 2. Animated hero grid / dot field -------------------------
   The static .grid-overlay gets slow parallax drift + a brighter dot mesh
   layered on top, masked so it fades toward the edges. */
.hero .grid-overlay {
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridDrift 26s linear infinite;
}
.hero .grid-overlay::after {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(rgba(125, 211, 252, 0.35) 1.1px, transparent 1.6px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 5%, transparent 60%);
  mask-image: radial-gradient(ellipse at 70% 40%, black 5%, transparent 60%);
  opacity: 0.5;
  animation: gridDrift 38s linear infinite reverse;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 54px 54px; }
}

/* ---------- 3. Headline gradient drift -------------------------------- */
h1 .accent,
.stat-num,
.section-tag {
  background-size: 220% auto;
  animation: textShimmer 9s ease-in-out infinite;
}
@keyframes textShimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* ---------- 4. Tilt + sheen on cards ---------------------------------- */
.problem-card,
.service-card,
.fit-card,
.process-card {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
/* moving sheen — position driven by --mx/--my set in JS */
.tilt-sheen {
  position: relative;
  overflow: hidden;
}
.tilt-sheen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
.tilt-sheen.is-tilting::before { opacity: 1; }

/* ---------- 5. Glass nav + scrolled state ---------------------------- */
nav {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
nav.scrolled {
  background: rgba(6, 13, 28, 0.62);
  border-bottom-color: rgba(94, 234, 212, 0.18);
  box-shadow: 0 10px 40px rgba(2, 8, 20, 0.45);
}

/* ---------- 6. Scroll progress bar ----------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right center;   /* RTL: fills from the right */
  background: linear-gradient(90deg, #2f6bff, #00d9b8 60%, #5eead4);
  box-shadow: 0 0 12px rgba(0, 217, 184, 0.6);
  z-index: 200;
  pointer-events: none;
}
html[dir="ltr"] #scroll-progress { transform-origin: left center; }

/* ---------- 7. Cursor spotlight (dark sections) ---------------------- */
.spotlight-host { position: relative; }
.spotlight-host > .spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    420px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(94, 234, 212, 0.10),
    rgba(47, 107, 255, 0.06) 35%,
    transparent 60%);
}
.spotlight-host.spot-active > .spotlight { opacity: 1; }
/* keep real content above the spotlight layer */
.hero > .container,
.portfolio-cta > * ,
footer > .container { position: relative; z-index: 1; }

/* ---------- 8. Grain / noise overlay (dark sections) ----------------- */
.grain-host { position: relative; }
.grain-host > .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- 9. Animated primary CTA (conic border) ------------------- */
.btn-primary {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--cta-angle, 0deg),
    #00d9b8, #2f6bff, #7c3aed, #00d9b8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  animation: ctaSpin 4s linear infinite;
}
.btn-primary:hover::before { opacity: 1; }
@property --cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ctaSpin {
  to { --cta-angle: 360deg; }
}
/* soft pulse ring on the WhatsApp pill so the key action draws the eye */
.whatsapp-cta:not(.nav-cta) {
  position: relative;
}
.whatsapp-cta:not(.nav-cta)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: waPulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- 10. Process flow-line ----------------------------------- */
.process-grid { position: relative; }
.flow-line {
  position: absolute;
  top: 54px;                 /* aligns with centre of the .process-num */
  left: 8%;
  right: 8%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(0, 217, 184, 0.25), rgba(47, 107, 255, 0.25));
  overflow: visible;
}
.flow-line::before {
  content: '';
  position: absolute;
  top: -1px;
  height: 4px;
  width: 90px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #5eead4, #7dd3fc, transparent);
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.9));
  animation: flowPulse 3.4s ease-in-out infinite;
}
@keyframes flowPulse {
  0%   { left: 0;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 90px); opacity: 0; }
}
.process-card { position: relative; z-index: 1; background-clip: padding-box; }
/* hide the connector once the cards stack (single column) */
@media (max-width: 760px) {
  .flow-line { display: none; }
}

/* =====================================================================
   Reduced-motion: silence everything that moves.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero .grid-overlay,
  .hero .grid-overlay::after,
  h1 .accent,
  .stat-num,
  .section-tag,
  .btn-primary::before,
  .whatsapp-cta::after,
  .flow-line::before {
    animation: none !important;
  }
  #scroll-progress { transition: none; }
  .problem-card, .service-card, .fit-card, .process-card { transition: box-shadow 0.2s ease; }
  .spotlight-host > .spotlight,
  .tilt-sheen::before { display: none; }
}