/* v2 global styles — animations, reveal, layout helpers */

:root {
  --ing-orange: #c4421a;
  --ing-orange-brand: #e84e1b;
  --ing-orange-700: #b93d13;
  --ing-orange-900: #9f3210;
  --ing-black: #000;
  --ing-gray-50: #fafafa;
  --ing-gray-100: #f3f3f3;
  --ing-gray-200: #e5e5e5;
  --ing-gray-300: #d4d4d4;
  --ing-gray-500: #6a6a6a;
  --ing-gray-700: #3a3a3a;
  --ing-gray-900: #111;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; }
body { font-family: "Roboto", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font-family: inherit; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Nested reveals: force visible. Their parent already handled the animation.
   High-specificity selector overrides the `.reveal.delay-N` rules below. */
.reveal .reveal,
.reveal.is-visible .reveal,
.reveal .reveal.delay-1,
.reveal .reveal.delay-2,
.reveal .reveal.delay-3,
.reveal .reveal.delay-4,
.reveal .reveal.delay-5 {
  opacity: 1 !important;
  transform: none !important;
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }
.reveal.delay-5 { transition-delay: 400ms; }

/* Pulsing "live" dot */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: livepulse 1.8s infinite;
}
.live-dot.orange { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.live-dot.orange { animation-name: livepulse-w; }
@keyframes livepulse-w {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Hero waves */
.hero-waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-waves svg { position: absolute; width: 200%; height: 100%; left: 0; top: 0; }
.hero-waves .w1 { animation: wave-x 28s linear infinite; opacity: 0.25; }
.hero-waves .w2 { animation: wave-x 44s linear infinite reverse; opacity: 0.15; }
.hero-waves .w3 { animation: wave-x 62s linear infinite; opacity: 0.10; }
@keyframes wave-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Grid dots for black surfaces */
.grid-bg {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Section base */
.section { padding: 112px 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 6px; font-size: 15px; font-weight: 500;
  text-decoration: none; letter-spacing: 0.01em;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 160ms var(--ease);
  border: none; cursor: pointer;
}
.btn-primary, a.btn-primary { background: var(--ing-orange); color: #fff; }
.btn-primary:hover, a.btn-primary:hover { background: var(--ing-orange-700); color: #fff; }
.btn-primary:active, a.btn-primary:active { background: var(--ing-orange-900); color: #fff; }
.btn-on-orange, a.btn-on-orange { background: #fff; color: var(--ing-orange); }
.btn-on-orange:hover, a.btn-on-orange:hover { background: #f3f3f3; color: var(--ing-orange); }
.btn-ghost, a.btn-ghost { color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost-dark, a.btn-ghost-dark { color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-ghost-dark:hover, a.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); color: #fff; }

/* Eyebrow */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ing-orange); margin-bottom: 20px;
}
.eyebrow.on-dark { color: #fff; opacity: 0.7; }

/* Focus */
:focus-visible { outline: 2px solid var(--ing-orange); outline-offset: 3px; border-radius: 4px; }

/* Mobile */
@media (max-width: 820px) {
  .section { padding: 72px 0; }
  .container { padding: 0 20px; }
}