/* ════════════════════════════════════════════
   HALE SITE — SHARED VISUAL ENHANCEMENTS
   Applied across all pages · Apr 2026
════════════════════════════════════════════ */

/* ── ORB MOTION ── */
.hero-orb, .orb1, .orb2, .orb3 {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hero-orb-1, .orb1 { animation-name: orbA; animation-duration: 18s; }
.hero-orb-2, .orb2 { animation-name: orbB; animation-duration: 22s; }
.hero-orb-3, .orb3 { animation-name: orbC; animation-duration: 16s; }
@keyframes orbA { from{transform:translate(0,0)}   to{transform:translate(-36px,28px)} }
@keyframes orbB { from{transform:translate(0,0)}   to{transform:translate(28px,-18px)} }
@keyframes orbC { from{transform:translate(0,0)}   to{transform:translate(-18px,22px)} }

/* ── STAGGER DELAYS ── */
.reveal-s1 { transition-delay: 0.05s !important; }
.reveal-s2 { transition-delay: 0.18s !important; }
.reveal-s3 { transition-delay: 0.31s !important; }
.reveal-s4 { transition-delay: 0.44s !important; }
.reveal-s5 { transition-delay: 0.57s !important; }

/* ── SECTION DIVIDER LINE ── */
.he-divider {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,114,133,0.22), transparent);
  margin: 0 auto;
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
}
.he-divider.visible { width: 65%; }

/* ── CARD HOVER LIFT — universal ── */
.pillar,
.problem-card,
.wwd-work-card,
.wwd-tile,
.product-card,
.offering,
.feature-card,
.talk-card,
.tool-card,
.fg-card,
.dim-card {
  transition: transform 0.28s cubic-bezier(0.34,1.1,0.64,1),
              box-shadow 0.28s ease,
              background 0.28s ease !important;
}
.pillar:hover,
.problem-card:hover,
.wwd-tile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(26,26,36,0.09) !important;
  background: #fff !important;
  z-index: 1;
}
.wwd-work-card:hover,
.product-card:hover,
.offering:hover,
.feature-card:hover,
.talk-card:hover,
.tool-card:hover,
.fg-card:hover,
.dim-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(26,26,36,0.08) !important;
}

/* Pillar top accent grows on hover */
.pillar::before { transition: height 0.28s ease !important; }
.pillar:hover::before { height: 5px !important; }

/* ── STAT POP ── */
@keyframes hePop {
  0%   { transform: scale(0.78); opacity: 0; }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1);    opacity: 1; }
}
.he-stat-animated { animation: hePop 0.65s cubic-bezier(0.34,1.2,0.64,1) both; }

/* ── DRAW-IN LINE (for section borders, pull quotes) ── */
.he-draw-line {
  width: 0; height: 2px;
  background: currentColor;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1) 0.1s;
}
.he-draw-line.visible { width: 100%; }

/* ── GHOST LETTERFORM (for origin/etymology blocks) ── */
.he-ghost-letter {
  position: relative;
  overflow: hidden;
}
.he-ghost-letter::before {
  content: attr(data-ghost);
  position: absolute; top: -10px; right: -10px;
  font-family: 'Lora', Georgia, serif;
  font-size: 220px; font-weight: 600;
  opacity: 0.04; line-height: 1;
  pointer-events: none; user-select: none;
  letter-spacing: -0.05em; z-index: 0;
}

/* ── PULL QUOTE BORDER DRAW ── */
.he-pull-quote {
  border-left: 2px solid transparent;
  transition: border-color 0.5s ease 0.3s;
}
.he-pull-quote.visible {
  border-color: currentColor;
}

/* ── DIAGRAM (hero illustration base) ── */
.he-hero-diagram {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: heDiagramIn 1.3s ease 0.9s forwards;
}
@keyframes heDiagramIn {
  from { opacity: 0; transform: var(--diagram-from, scale(0.95)); }
  to   { opacity: 1; transform: var(--diagram-to, scale(1)); }
}
@media (max-width: 900px) { .he-hero-diagram { display: none; } }

.he-edge {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: heEdgeDraw 1s ease forwards;
}
.he-edge-1 { animation-delay: 1.3s; }
.he-edge-2 { animation-delay: 1.6s; }
.he-edge-3 { animation-delay: 1.9s; }
.he-edge-4 { animation-delay: 2.2s; }
@keyframes heEdgeDraw { to { stroke-dashoffset: 0; } }

@keyframes heNodePulse {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 0.85; }
}
.he-node { animation: heNodePulse 3s ease-in-out infinite; }
.he-node-1 { animation-delay: 0s; }
.he-node-2 { animation-delay: 1s; }
.he-node-3 { animation-delay: 2s; }