/* =============================================================================
   ARC motion kit — styles for /assets/js/arc-motion.js, plus shared "wow"
   components (aurora hero, marquee, editorial rows, page transitions).
   Hidden/transformed start states only apply under html.arc-motion, which is
   removed for reduced motion or if the script never loads.
   ============================================================================= */

/* --- Cross-page transitions (Chrome/Edge/Safari 18+; ignored elsewhere) ----- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: arcVtOut .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: arcVtIn .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes arcVtOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes arcVtIn  { from { opacity: 0; transform: translateY(18px); } }

/* --- Reveal ----------------------------------------------------------------- */
.arc-motion [data-reveal] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter 1s cubic-bezier(.16,1,.3,1), clip-path 1.2s cubic-bezier(.77,0,.18,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.arc-motion [data-reveal="up"]    { transform: translateY(48px); }
.arc-motion [data-reveal="left"]  { transform: translateX(-64px); }
.arc-motion [data-reveal="right"] { transform: translateX(64px); }
.arc-motion [data-reveal="scale"] { transform: scale(.92); }
.arc-motion [data-reveal="blur"]  { filter: blur(18px); transform: scale(1.04); }
.arc-motion [data-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0 round 24px); }
.arc-motion [data-reveal].is-in   { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round 0); }

/* --- Big stat figures (count-up numbers): a touch of air between heavy digits */
[data-countup] { letter-spacing: 0.01em !important; }

/* --- Split headline --------------------------------------------------------- */
.arc-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .08em 0; margin: 0 -.12em -.08em 0; }
/* (right padding gives italic glyphs, whose tops lean past their box, room so they aren't clipped) */
.arc-w > span { display: inline-block; }
.arc-motion [data-split] .arc-w > span { transform: translateY(105%) rotate(4deg); opacity: 0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.arc-motion [data-split].is-in .arc-w > span { transform: none; opacity: 1; }

/* --- Scrub text ------------------------------------------------------------- */
[data-scrub] .arc-w { overflow: visible; }
.arc-motion [data-scrub] .arc-w > span { opacity: .18; transition: opacity .35s ease, color .35s ease; transition-delay: 0ms !important; }
.arc-motion [data-scrub] .arc-w > span.is-lit { opacity: 1; }

/* --- Scroll 3D / expand / parallax ----------------------------------------- */
.arc-motion [data-scroll-3d] {
  transform: perspective(1600px) rotateX(calc(var(--s3d, 0) * 12deg)) scale(calc(1 - var(--s3d, 0) * .05)) translateY(calc(var(--s3d, 0) * 24px));
  transform-origin: 50% 100%;
  will-change: transform;
}
.arc-motion [data-parallax] { transform: translate3d(0, var(--parallax, 0), 0); will-change: transform; }
[data-expand] { --expand: 1; }
.arc-motion [data-expand] {
  margin-inline: calc((1 - var(--expand, 0)) * 6vw);
  border-radius: calc(12px + (1 - var(--expand, 0)) * 44px);
}

/* --- Tilt + glare ----------------------------------------------------------- */
[data-tilt] { position: relative; transform-style: preserve-3d; }
.arc-motion [data-tilt] { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.arc-motion [data-tilt].is-tilting {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)) scale(1.02);
  transition: transform .12s linear, box-shadow .3s ease;
  box-shadow: 0 40px 80px -30px rgba(10,30,63,.45);
}
.arc-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.35), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
[data-tilt].is-tilting .arc-glare { opacity: 1; }

/* --- Magnetic buttons ------------------------------------------------------- */
.arc-motion .arcbtn { transform: translate(var(--mag-x, 0), var(--mag-y, 0)); transition: transform .35s cubic-bezier(.16,1,.3,1), background .16s, border-color .16s, color .16s; }

/* --- Cursor bubble ---------------------------------------------------------- */
.arc-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.arc-cursor > span {
  position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wai-orange); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  transform: scale(0); transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 16px 40px -12px rgba(199,86,52,.6);
}
.arc-cursor.is-on > span { transform: scale(1); }
[data-cursor] { cursor: none; }
[data-cursor] a, [data-cursor] button { cursor: none; }

/* --- Drag scroll ------------------------------------------------------------ */
[data-drag-scroll] { cursor: grab; }
[data-drag-scroll].is-dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto; user-select: none; }
[data-drag-scroll].is-dragging * { pointer-events: none; }

/* --- Scroll progress (inside the site header) ------------------------------- */
.arc-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal-300), var(--wai-orange)); pointer-events: none; }

/* --- Aurora backdrop (hero sections) --------------------------------------- */
.arc-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arc-aurora::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); }
.arc-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .75; }
.arc-aurora i:nth-child(1) { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -12vw; top: -30vw; background: radial-gradient(circle, rgba(116,169,172,.55), rgba(116,169,172,0) 65%); animation: arcDrift1 18s ease-in-out infinite alternate; }
.arc-aurora i:nth-child(2) { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; left: -14vw; bottom: -26vw; background: radial-gradient(circle, rgba(199,86,52,.45), rgba(199,86,52,0) 65%); animation: arcDrift2 22s ease-in-out infinite alternate; }
.arc-aurora i:nth-child(3) { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; left: 40%; top: 30%; background: radial-gradient(circle, rgba(92,122,190,.35), rgba(92,122,190,0) 65%); animation: arcDrift3 26s ease-in-out infinite alternate; }
@keyframes arcDrift1 { to { transform: translate(-10vw, 12vw) scale(1.15); } }
@keyframes arcDrift2 { to { transform: translate(14vw, -8vw) scale(1.2); } }
@keyframes arcDrift3 { to { transform: translate(-16vw, -10vw) scale(.85); } }

/* Homepage hero: keep the warm glow up and away from the bottom edge, and fade the
   base into solid navy so nothing is clipped where the hero meets the showcase. */
.arc-hero .arc-aurora i:nth-child(2) { bottom: auto; top: 18%; left: -22vw; }
.arc-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(rgba(10,30,63,0), var(--navy-500)); }

/* Scroll cue */
.arc-scroll-cue { display: inline-flex; align-items: center; gap: 14px; color: var(--navy-100); font-size: var(--text-body-sm); font-weight: 500; text-decoration: none; }
.arc-scroll-cue svg { animation: arcCue 2.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes arcCue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --- Marquee ---------------------------------------------------------------- */
.arc-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.arc-marquee__track { display: flex; width: max-content; animation: arcMarqueeX var(--marquee-speed, 40s) linear infinite; }
.arc-marquee--reverse .arc-marquee__track { animation-direction: reverse; }
.arc-marquee:hover .arc-marquee__track { animation-play-state: paused; }
.arc-marquee__set { display: flex; align-items: center; gap: 20px; padding-right: 20px; }
@keyframes arcMarqueeX { to { transform: translateX(-50%); } }
.arc-logo { flex: none; width: 190px; height: 92px; display: flex; align-items: center; justify-content: center; padding: 22px 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--white); transition: border-color .3s, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.arc-logo img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.arc-logo:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.arc-logo:hover img { filter: none; opacity: 1; }

/* --- Editorial numbered rows (Vivo-style) ---------------------------------- */
.arc-rows { border-top: 1px solid var(--border-default); }
.arc-row { display: grid; grid-template-columns: 140px 1fr 1.2fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--border-default); align-items: start; }
.arc-row__num { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-decoration: underline; text-underline-offset: 6px; color: var(--wai-orange); }
.arc-row__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
.arc-row__text { margin: 0; color: var(--text-secondary); line-height: 1.7; font-size: 1.05rem; }
@media (max-width: 860px) { .arc-row { grid-template-columns: 1fr; gap: 12px; } }

/* Big outlined numeral behind feature sections */
.arc-ghost-num { position: absolute; font-family: var(--font-display); font-weight: 900; font-size: clamp(8rem, 5rem + 12vw, 18rem); line-height: .8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(10,30,63,.08); pointer-events: none; user-select: none; }

/* Hover lift for cards */
.arc-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .3s; }
.arc-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10,30,63,.35); }

@media (prefers-reduced-motion: reduce) {
  .arc-aurora i, .arc-scroll-cue svg, .arc-marquee__track { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* --- Stacked module cards (homepage) ---------------------------------------
   Each card sticks a little lower than the one before, so the stack builds up
   under the header; arc-motion.js sets --stack-p (0→1) as the next card slides
   over, which shrinks and dims the card underneath. */
.arc-stack-wrap { background: var(--surface-page); padding: 40px 0 120px; }
.arc-stack { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.arc-card {
  --stack-p: 0;
  /* Height follows the content (never clipped); top is set per card by arc-motion.js so
     the whole card is visible before the next one slides over. */
  position: sticky; top: calc(96px + min(var(--i), 4) * 10px);
  min-height: min(680px, calc(100svh - 128px));
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  border-radius: 32px; overflow: hidden; scroll-margin-top: calc(96px + min(var(--i), 4) * 10px);
  box-shadow: 0 -18px 60px -30px rgba(10,30,63,.35), 0 1px 0 rgba(10,30,63,.04);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--stack-p) * .07));
  filter: brightness(calc(1 - var(--stack-p) * .22));
  font-family: var(--font-sans);
}
.arc-card--light { background: var(--white); color: var(--text-primary); }
.arc-card--navy  { background: radial-gradient(120% 120% at 100% 0%, #24497a 0%, var(--navy-500) 50%, var(--navy-700) 100%); color: var(--white); }
.arc-card--mist  { background: linear-gradient(160deg, #eef4f5 0%, #e1ecee 100%); color: var(--text-primary); }
.arc-card__copy { padding: 56px 48px 48px 56px; display: flex; flex-direction: column; min-height: 0; }
.arc-card__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-overline); text-transform: uppercase; opacity: .7; }
.arc-card__num { color: var(--wai-orange); opacity: 1; font-weight: 600; }
.arc-card--navy .arc-card__num { color: #f0a488; }
.arc-card__rule { width: 28px; height: 1px; background: currentColor; opacity: .5; }
.arc-card__title { margin: 20px 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; color: inherit; }
.arc-card__tagline { margin: 12px 0 0; font-size: var(--text-body-lg); font-weight: 600; color: var(--wai-orange); }
.arc-card--navy .arc-card__tagline { color: var(--teal-300); }
.arc-card__summary { margin: 16px 0 0; line-height: 1.65; opacity: .78; }
.arc-card__points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--text-body-sm); }
.arc-card__points li { display: flex; gap: 12px; align-items: flex-start; }
.arc-card__points li > span { flex: none; margin-top: 1px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: rgba(10,30,63,.08); color: var(--navy-500); }
.arc-card--navy .arc-card__points li > span { background: rgba(116,169,172,.2); color: var(--teal-300); }
.arc-card__actions { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.arc-card__more { font-size: var(--text-body-sm); font-weight: 600; color: var(--wai-orange); text-decoration: none; }
.arc-card--navy .arc-card__more { color: var(--teal-300); }
/* Big screenshot bleeding off the card's right and bottom edges */
.arc-card__media { position: relative; min-height: 0; }
.arc-card__media img {
  position: absolute; left: 0; top: 56px; width: 128%; height: calc(100% - 56px); max-width: none;
  object-fit: cover; border-radius: 18px 0 0 0;
  box-shadow: -24px 24px 70px -30px rgba(10,30,63,.45); background: #f4f4f4;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.arc-card:hover .arc-card__media img { transform: translateX(-2%); }

/* Shorter laptop screens: tighter card spacing so each card fits in one view */
@media (min-width: 1101px) and (max-height: 860px) {
  .arc-card__copy { padding: 36px 36px 32px 44px; }
  .arc-card__title { margin-top: 14px; font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.4rem); }
  .arc-card__tagline { margin-top: 8px; font-size: var(--text-body); }
  .arc-card__summary { margin-top: 12px; font-size: .95rem; line-height: 1.55; }
  .arc-card__points { margin-top: 16px; gap: 7px; }
  .arc-card__actions { padding-top: 20px; }
  .arc-card__media img { top: 36px; height: calc(100% - 36px); }
}

@media (max-width: 1100px) {
  .arc-stack { gap: 28px; padding: 0 16px; }
  .arc-card { position: relative; top: 0; height: auto; min-height: 0; grid-template-columns: 1fr; transform: none; filter: none; }
  .arc-card__copy { padding: 36px 28px 28px; }
  .arc-card__media { aspect-ratio: 4 / 3; }
  .arc-card__media img { top: 0; left: 28px; width: calc(100% + 60px); height: 100%; }
}

/* --- Company types (homepage) ---------------------------------------------- */
.arc-company-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.arc-company { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: 24px; background: var(--surface-page); border: 1px solid var(--border-subtle); scroll-margin-top: 96px; }
.arc-company--lead { background: radial-gradient(120% 120% at 100% 0%, #24497a 0%, var(--navy-500) 55%, var(--navy-700) 100%); border-color: transparent; color: var(--white); }
.arc-company__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--wai-orange); }
.arc-company--lead .arc-company__num { color: #f0a488; }
.arc-company__name { margin: 16px 0 0; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.03em; color: inherit; }
.arc-company__summary { margin: 12px 0 0; font-size: var(--text-body-sm); line-height: 1.6; opacity: .78; }
.arc-company__needs { list-style: none; margin: auto 0 0; padding: 20px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-body-sm); font-weight: 600; }
.arc-company__needs li { display: flex; gap: 10px; align-items: flex-start; }
.arc-company__needs li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--wai-orange); }
.arc-company--lead .arc-company__needs li::before { background: var(--teal-300); }
.arc-company-platform { margin-top: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-body-sm); font-weight: 600; color: var(--text-secondary); }
.arc-company-platform > span:first-child { margin-right: 6px; }
@media (max-width: 1100px) { .arc-company-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .arc-company-grid { grid-template-columns: 1fr; } }

/* Homepage showcase: give the composite graphic more of a phone screen */
@media (max-width: 640px) { .arc-showcase__stage { padding: 28px 10px 32px !important; } }


/* Stacked card showing a composite graphic whole (e.g. IR CMS) instead of a bleeding screenshot */
.arc-card__media--contain { display: flex; align-items: center; justify-content: center; padding: 32px 36px 32px 8px; }
.arc-card__media--contain img { position: static; width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 30px 50px rgba(10,30,63,.22)); }
.arc-card:hover .arc-card__media--contain img { transform: none; }
@media (max-width: 1100px) { .arc-card__media--contain { aspect-ratio: auto; padding: 0 16px 28px; } .arc-card__media--contain img { width: 100%; } }


/* Stacked card image that fills its area edge to edge: flush right and bottom, no overflow (IR CMS) */
.arc-card__media--flush img { width: 100%; object-fit: contain !important; object-position: right bottom !important; box-shadow: none; background: none; border-radius: 0; }
.arc-card:hover .arc-card__media--flush img { transform: none; }
@media (max-width: 1100px) { .arc-card__media--flush { aspect-ratio: 8 / 7; } .arc-card__media--flush img { left: 20px; width: calc(100% - 20px); } }

/* Breakout: flush screenshots spill past the card's right and bottom edges.
   The next card in the stack paints over the spill; the wrapper clips sideways overflow. */
.arc-stack-wrap { overflow-x: clip; }
.arc-card--breakout { overflow: visible; }
.arc-card--breakout .arc-card__media { position: relative; }
.arc-card--breakout .arc-card__media img {
  position: absolute; left: 0; top: 56px; right: auto; bottom: auto;
  width: calc(100% + 72px); height: auto; max-width: none;
  object-fit: fill !important; border-radius: 16px 0 0 0;
  filter: drop-shadow(-18px 28px 40px rgba(10,30,63,.28));
}
@media (min-width: 1101px) and (max-height: 860px) { .arc-card--breakout .arc-card__media img { top: 36px; } }
@media (max-width: 1100px) {
  .arc-card--breakout .arc-card__media { aspect-ratio: 8 / 7; }
  .arc-card--breakout .arc-card__media img { top: 0; left: 20px; width: calc(100% + 16px); }
}