/* OttoCore animations · scroll reveals, motion, decorative */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pulseBox {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 67, 0, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255, 67, 0, 0); }
}
@keyframes blinkCaret {
  50% { opacity: 0; }
}
@keyframes rowHighlight {
  0% { background: rgba(255, 67, 0, 0); }
  30% { background: rgba(255, 67, 0, 0.08); }
  100% { background: rgba(255, 67, 0, 0); }
}
@keyframes slideStreamIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes planeArc {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in { transition-delay: .08s; }
.reveal-delay-2.in { transition-delay: .16s; }
.reveal-delay-3.in { transition-delay: .24s; }
.reveal-delay-4.in { transition-delay: .32s; }

/* Hero background decoration */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-bg .slash-watermark {
  position: absolute; top: -20px; right: -40px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 340px; line-height: 0.85;
  color: transparent; letter-spacing: -0.05em;
  -webkit-text-stroke: 1px var(--color-border);
  user-select: none; opacity: .6;
}
.hero-bg .slash-watermark span { color: transparent; -webkit-text-stroke: 1px rgba(255,67,0,0.35); }
.hero-bg .grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 800px 600px at 80% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 800px 600px at 80% 40%, black 0%, transparent 70%);
  opacity: 0.5;
}
.hero > .container { position: relative; z-index: 1; }

/* Cursor-follow dot */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; background: var(--color-ignite);
  border-radius: 50%; pointer-events: none; z-index: 9999;
  opacity: 0; box-shadow: 0 0 12px rgba(255, 67, 0, 0.6);
  transition: opacity .2s;
}
.cursor-dot.on { opacity: 0.9; }

/* Composer animations */
.composer { animation: scaleIn .9s cubic-bezier(.2,.7,.2,1) both; }
.composer .rr { animation: slideStreamIn .5s cubic-bezier(.2,.7,.2,1) both; }
.composer .rr:nth-child(1) { animation-delay: .2s; }
.composer .rr:nth-child(2) { animation-delay: .4s; }
.composer .rr:nth-child(3) { animation-delay: .6s; }
.composer .rr:nth-child(4) { animation-delay: .8s; }
.composer .rr.row-pulse { animation: rowHighlight 2.2s ease-out infinite; animation-delay: 1.2s; }

/* Live pulse dot */
.live-pulse { display: inline-block; width: 8px; height: 8px; background: var(--color-ignite); border-radius: 50%; position: relative; }
.live-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--color-ignite); animation: pulseBox 1.6s ease-out infinite;
  opacity: 0.8;
}

/* Marquee (client logos / stats strip) */
.marquee { overflow: hidden; position: relative; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.marquee .track { display: flex; gap: 0; animation: ticker 40s linear infinite; white-space: nowrap; width: max-content; }
.marquee .item { padding: 22px 48px; font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-ink); border-right: 1px solid var(--color-border); display: flex; align-items: center; gap: 16px; }
.marquee .item.smoke { color: var(--color-smoke); }
.marquee .item .slash { color: var(--color-ignite); }
.marquee .item .ico { width: 10px; height: 10px; background: var(--color-ink); }
.marquee:hover .track { animation-play-state: paused; }

/* Count-up visual */
.countup { font-variant-numeric: tabular-nums; }

/* Back office enhancements */
.boffice .stat { position: relative; overflow: hidden; }
.boffice .stat.glow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--color-ignite);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.boffice .stat.glow.in::after { transform: scaleX(1); }
.boffice .tbl tbody tr { transition: background .2s; }
.boffice .tbl tbody tr:hover { background: var(--color-ghost); }

/* Segment cards — ignite underline on hover */
.seg { position: relative; overflow: hidden; }
.seg::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--color-ignite); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.seg:hover::after { transform: scaleX(1); }
.seg h3 { transition: transform .4s; }
.seg:hover h3 { transform: translateX(6px); }

/* Verticals cards */
.vcard { position: relative; overflow: hidden; transition: background .25s, transform .3s; }
.vcard:hover { transform: translateY(-2px); }
.vcard .vi { transition: transform .3s; }
.vcard:hover .vi { transform: rotate(-6deg) scale(1.08); }
.vcard::before {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 3px;
  background: var(--color-ignite); transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.vcard:hover::before { width: 100%; }

/* Plan hover lift */
.plan { transition: background .2s, transform .3s; }
.plan:hover { transform: translateY(-4px); }

/* Timeline draw-in */
.timeline::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.timeline.in::before { transform: scaleX(1); }
.tstep .dot { opacity: 0; transform: scale(0); transition: opacity .4s, transform .5s cubic-bezier(.3,1.6,.4,1); }
.timeline.in .tstep:nth-child(1) .dot { transition-delay: .2s; opacity: 1; transform: scale(1); }
.timeline.in .tstep:nth-child(2) .dot { transition-delay: .5s; opacity: 1; transform: scale(1); }
.timeline.in .tstep:nth-child(3) .dot { transition-delay: .8s; opacity: 1; transform: scale(1); }
.timeline.in .tstep:nth-child(4) .dot { transition-delay: 1.1s; opacity: 1; transform: scale(1); }
.timeline.in .tstep:nth-child(5) .dot { transition-delay: 1.4s; opacity: 1; transform: scale(1); animation: pulseBox 2s ease-out 1.8s infinite; }

/* Quote hover */
.quote { transition: transform .3s, border-color .3s; }
.quote:hover { transform: translateY(-4px); border-color: var(--color-ink); }
.quote .q-open { transition: transform .4s; }
.quote:hover .q-open { transform: rotate(-6deg) scale(1.1); }

/* Global presence cells */
.gcell { position: relative; overflow: hidden; transition: background .3s; }
.gcell:hover { background: var(--color-ink-2); }
.gcell::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
  background: var(--color-ignite); transform: scaleY(0); transform-origin: top; transition: transform .4s;
}
.gcell:hover::after { transform: scaleY(1); }
.gcell.hq .live-pulse { position: absolute; top: 20px; right: 22px; }

/* FAQ plus animation */
.faq-q .plus { transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s; }
.faq-item:hover .plus { color: var(--color-ink); }
.faq-item:hover .faq-q .t { transform: translateX(4px); }
.faq-q .t { transition: transform .3s; }

/* Section slash decoration */
.sec-slash-divider {
  padding: 40px 0; text-align: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 80px; letter-spacing: -0.04em; line-height: 1;
  color: var(--color-border); user-select: none;
  overflow: hidden;
}
.sec-slash-divider span { color: var(--color-ignite); }

/* Flight path animation (hero background) */
.flight-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flight-path path { stroke: var(--color-ignite); stroke-width: 1.5; fill: none; stroke-dasharray: 4 6; opacity: 0.35; }
.flight-path .plane {
  fill: var(--color-ignite);
  offset-path: path('M 60,340 Q 400,120 780,240');
  offset-rotate: auto;
  animation: planeArc 7s cubic-bezier(.4,0,.6,1) infinite;
}
.flight-path .plane.p2 {
  offset-path: path('M 80,460 Q 380,600 820,420');
  animation: planeArc 9s cubic-bezier(.4,0,.6,1) infinite;
  animation-delay: 2s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Big number tickers */
.big-ticker { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* Slash ambient (between sections) */
.slash-rail { display: flex; overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.slash-rail .srtrack { display: flex; gap: 48px; animation: ticker 30s linear infinite; padding: 16px 0; white-space: nowrap; }
.slash-rail .srtrack span { font-family: var(--font-code); font-size: 12px; color: var(--color-smoke); letter-spacing: 0.1em; text-transform: uppercase; }
.slash-rail .srtrack span.ig { color: var(--color-ignite); font-weight: 700; }