:root { --motion-ease: cubic-bezier(.22,1,.36,1); --reading-progress: 0; view-transition-name: none; }
.portal-main { view-transition-name: page-content; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page-content) { animation: page-leave 180ms ease-in both; }
::view-transition-new(page-content) { animation: page-arrive 620ms var(--motion-ease) both; }
::view-transition-group(page-content) { animation-duration: 520ms; }
@keyframes page-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes image-arrive { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes image-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes signal-travel { from { transform: translateX(-160%); } to { transform: translateX(550%); } }
@keyframes active-breath { 0%,100% { box-shadow: 0 0 0 0 #007a7028; } 50% { box-shadow: 0 0 0 6px #007a7000; } }
@keyframes busy-turn { to { transform: rotate(360deg); } }

/* Content starts visible: script failure or a disabled animation never hides a page. */
.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
body::after { content: ''; position: fixed; inset: 0 0 auto; height: 2px; z-index: 1000; pointer-events: none; background: #007a70; transform: scaleX(var(--reading-progress)); transform-origin: left; }
.primary-nav { position: relative; }
.primary-nav.has-motion-indicator a.is-active::after { display: none; }
.motion-nav-indicator { position: absolute; bottom: 0; height: 2px; background: var(--teal, #007a70); pointer-events: none; border-radius: 2px; }
.primary-nav a, .plugin-tabs a, .workflow-tab, .nav-item { transition: background 220ms ease, color 220ms ease, box-shadow 300ms ease; }
.button, .icon-button { position: relative; isolation: isolate; overflow: hidden; transition: transform 220ms var(--motion-ease), box-shadow 220ms ease, background 180ms ease, border-color 180ms ease; }
.motion-ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; z-index: -1; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: scale(.97); }
.button span[aria-hidden], .text-link span[aria-hidden], .service-links h3 span { display: inline-block; transition: transform 260ms var(--motion-ease); }
.button:disabled { transform: none; }
[aria-busy="true"] button[type="submit"]::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busy-turn 750ms linear infinite; margin-right: 6px; }
.plugin-card, .product-card, .capability-card, .scenario-card, .workspace-card, .service-links > a { transition: transform 320ms var(--motion-ease), border-color 240ms ease, box-shadow 320ms ease; }
.product-icon { transition: transform 480ms var(--motion-ease); }
input, select, textarea { transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #007a70; outline-offset: 2px; }
.console-topbar i, .hero-kicker > span { animation: active-breath 2400ms ease-in-out 3; }
.console-message, .code-preview, .console-result { animation: page-arrive 500ms var(--motion-ease) both; }
.console-message:nth-child(2) { animation-delay: 60ms; }
.code-preview { animation-delay: 120ms; }
.console-result { animation-delay: 180ms; }
.section.active > .section-head, .section.active > .panel, .section.active > .metric-grid { animation: page-arrive 440ms var(--motion-ease) both; }
.section.active > .panel { animation-delay: 60ms; }
.dialog[open] { animation: page-arrive 300ms var(--motion-ease) both; }
.modal-dialog { animation: page-arrive 380ms var(--motion-ease) both; }
.modal-overlay { animation: overlay-in 220ms ease both; }
.modal-overlay.is-closing { animation: overlay-out 180ms ease both; }
.data-table tbody tr, .account-table tbody tr { transition: background 180ms ease; }

.industrial-hero { background: #eff2f4; height: 640px; min-height: 540px; }
.industrial-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#50746509 1px, transparent 1px), linear-gradient(90deg, #50746509 1px, transparent 1px); background-size: 48px 48px; }
.industrial-hero-image { inset: 0 0 0 auto; width: min(100%, 1480px); height: 100%; object-fit: cover; object-position: center 52%; animation: image-arrive 1000ms var(--motion-ease) both; }
.industrial-hero .hero-copy { justify-content: center; padding: 30px 0 64px; }
.industrial-hero .action-row { margin-top: 18px; }
.industrial-hero .hero-kicker { animation: page-arrive 520ms var(--motion-ease) both; }
.industrial-hero h1 { animation: page-arrive 650ms 70ms var(--motion-ease) both; }
.industrial-hero .hero-statement { animation: page-arrive 650ms 130ms var(--motion-ease) both; }
.industrial-hero .hero-lead, .industrial-hero .action-row { animation: page-arrive 650ms 200ms var(--motion-ease) both; }
@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled), .icon-button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #12382a12; }
  .button:hover span[aria-hidden], .text-link:hover span[aria-hidden], .service-links a:hover h3 span { transform: translate(3px, -2px); }
  .plugin-card:hover, .product-card:hover, .capability-card:hover, .workspace-card:hover, .service-links > a:hover { transform: translateY(-5px); border-color: #8bab9b; box-shadow: 0 16px 36px #12382a0d; }
  .product-card:hover .product-icon { transform: rotate(-3deg) scale(1.04); }
}
@media (max-width: 1080px) {
  .industrial-hero-inner { width: calc(100% - 80px); }
  .industrial-hero h1 { font-size: 54px; }
  .industrial-hero .hero-statement { font-size: 32px; }
}
@media (max-width: 720px) {
  .industrial-hero { height: 760px; min-height: 0; }
  .industrial-hero-inner { width: calc(100% - 40px); align-items: flex-start; }
  .industrial-hero .hero-copy { width: 100%; max-width: 100%; height: auto; padding: 36px 0 0; }
  .industrial-hero-image { inset: auto 0 42px; width: 100%; height: 350px; object-position: right center; mask-image: linear-gradient(transparent, black 14%); }
  .industrial-hero h1 { font-size: 50px; }
  .industrial-hero .hero-statement { font-size: 31px; }
  .hero-caption { flex-wrap: wrap; gap: 6px; bottom: 16px; }
}
@media (max-width: 380px) { .industrial-hero { height: 800px; } .industrial-hero h1 { font-size: 44px; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .button:hover, .plugin-card:hover, .product-card:hover, .product-card:hover .product-icon { transform: none; }
}