/* EGE motion system — tokens + utilities
   Content stays visible without JS. html.js gates reveal hiding.
   Sitewide reveal SSOT: --motion-reveal-y / --motion-slow / easings below
   are the single visual token source for scroll-up reveal (all pages). */

:root{
  --motion-fast:120ms;
  --motion-base:280ms;
  --motion-slow:780ms; /* ~30% slower than 600ms — sitewide reveal duration SSOT */
  --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized:cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reveal-y:32px; /* sitewide reveal rise distance (SSOT) */
  --motion-card-lift:-4px;
  --motion-img-hover:1.025;
  --header-h-scrolled:64px;
}

/* —— Page enter (minimal) —— */
html.js main{
  animation:pageFadeIn var(--motion-base) var(--ease-standard) both;
}
@keyframes pageFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* —— Header shrink (class only; does not rewrite mega/top-nav layout) —— */
.site-header{
  transition:
    background-color 250ms var(--ease-standard),
    box-shadow 250ms var(--ease-standard),
    border-color 250ms var(--ease-standard);
}
.site-header .header-inner{
  transition:height 250ms var(--ease-standard);
}
.site-header .logo img{
  transition:height 250ms var(--ease-standard);
}
.site-header.is-scrolled{
  /* Keep opaque white under OS/browser dark mode (logo wordmark is dark) */
  color-scheme:light;
  background:#fff;
  background-color:#fff;
  box-shadow:0 6px 24px rgba(11,35,67,.08);
  border-bottom-color:rgba(223,229,236,.95);
}
.site-header.is-scrolled .header-inner{
  height:var(--header-h-scrolled);
}
.site-header.is-scrolled .logo img{
  height:36px;
}

/* Top-nav underline + mega open/close: owned by site chrome — not redefined here */

/* —— Hamburger → X timing only (markup owned by chrome) —— */
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    top var(--motion-fast) var(--ease-standard);
}

/* —— Reveal / stagger (JS-gated; visible without .js) —— */
html.js [data-reveal]:not(.is-visible){
  opacity:0;
  transform:translateY(var(--motion-reveal-y));
}
html.js [data-reveal]{
  transition:
    opacity var(--motion-slow) var(--ease-emphasized),
    transform var(--motion-slow) var(--ease-emphasized);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity,transform;
}
html.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}
html.js [data-reveal="image"]:not(.is-visible){
  transform:translateY(var(--motion-reveal-y)) scale(1.025);
}
html.js [data-reveal="image"].is-visible{
  transform:none;
}
html.js [data-reveal="fade"]:not(.is-visible){
  transform:none;
}
/*
 * Table rows: bottom→top rise via cells.
 * Transform on <tr> is unreliable across browsers; animate th/td instead.
 * --reveal-delay is set on the <tr> and inherits to cells for staggered rise.
 * Faster / shorter rise than sitewide --motion-slow (table-only).
 * Clip wrappers so rise never spawns horizontal/vertical scrollbars
 * (overflow-x:auto alone would compute overflow-y to auto per CSS).
 */
html.js .table-block,
html.js .content-table{
  overflow-x:auto;
  overflow-y:hidden;
}
html.js .table-block:has(.clean-table--ip),
html.js .content-table:has(.clean-table--ip){
  overflow:hidden;
  overscroll-behavior:none;
}
html.js tr[data-reveal]:not(.is-visible),
html.js tr[data-reveal="fade"]:not(.is-visible),
html.js tr[data-reveal="row"]:not(.is-visible){
  opacity:1;
  transform:none;
}
html.js tr[data-reveal]{
  transition:none;
  will-change:auto;
}
html.js tr[data-reveal]:not(.is-visible) > th,
html.js tr[data-reveal]:not(.is-visible) > td{
  opacity:0;
  transform:translateY(10px);
}
html.js tr[data-reveal] > th,
html.js tr[data-reveal] > td{
  transition:
    opacity 280ms var(--ease-emphasized),
    transform 280ms var(--ease-emphasized);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity,transform;
}
html.js tr[data-reveal].is-visible > th,
html.js tr[data-reveal].is-visible > td{
  opacity:1;
  transform:none;
  will-change:auto;
}
/* Title-first sequence: land slightly before sibling body/grid */
html.js [data-reveal="title"]:not(.is-visible){
  opacity:0;
  transform:translateY(calc(var(--motion-reveal-y) * 0.75));
}
html.js [data-reveal="title"]{
  transition-delay:var(--reveal-delay, 0ms);
}
/* Phase 3 — business/category panels: fade + rise (no image scale) */
html.js [data-reveal="panel"]:not(.is-visible){
  opacity:0;
  transform:translateY(calc(var(--motion-reveal-y) * 0.55));
}
html.js [data-reveal="panel"]{
  transition:
    opacity var(--motion-slow) var(--ease-emphasized),
    transform var(--motion-slow) var(--ease-emphasized),
    border-color var(--motion-base) var(--ease-standard);
  transition-delay:var(--reveal-delay, 0ms);
}
html.js [data-reveal="panel"].is-visible{
  opacity:1;
  transform:none;
}
html.js .category-row.is-visible .link-list a{
  transition:
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard);
}
html.js .card.is-visible{
  /* Soft settle after reveal (no bounce) */
  transition:
    opacity var(--motion-slow) var(--ease-emphasized),
    transform var(--motion-slow) var(--ease-emphasized),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}

/* —— Home hero intro (once) —— */
html.js .hero-fullscreen.hero-has-motion{
  /* Media stretches to fill; white bg only if media not yet ready */
  background-color:var(--white,#fff);
  background-image:none !important;
}
html.js .hero-fullscreen.hero-has-motion > .hero-fullscreen-media{
  position:absolute;
  inset:0;
  background-color:var(--white,#fff);
  background-image:none;
  opacity:0;
  transition:opacity 700ms var(--ease-emphasized);
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
html.js .hero-fullscreen.hero-has-motion.is-hero-ready > .hero-fullscreen-media{
  opacity:1;
}
html.js .hero-fullscreen.hero-has-motion .hero-fullscreen-shade,
html.js .hero-fullscreen.hero-has-motion .hero-fullscreen-content,
html.js .hero-fullscreen.hero-has-motion .hero-scroll{
  z-index:2;
}
html.js .hero-fullscreen.hero-has-motion .hero-scroll{
  z-index:3;
}

/* Staggered premium entrance — slow / smooth */
html.js .hero-fullscreen .hero-ground{
  opacity:0;
  transform:translateY(35px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .hero-fullscreen .hero-accent-line{
  opacity:0;
  transform:scaleX(0);
  transition:
    opacity .2s linear,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    width .35s var(--ease-standard);
}
html.js .hero-fullscreen .hero-lead-line-inner{
  opacity:0;
  transform:translateY(110%);
  transition:
    opacity .95s cubic-bezier(0.22, 1, 0.36, 1),
    transform .95s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .hero-fullscreen .hero-lead-sub,
html.js .hero-fullscreen .hero-lead-ko{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .95s cubic-bezier(0.22, 1, 0.36, 1),
    transform .95s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .hero-fullscreen .hero-scroll{
  opacity:0;
  transition:opacity .9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .hero-fullscreen.is-hero-ready .hero-ground{
  opacity:1;
  transform:translateY(0);
  transition-delay:150ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-accent-line{
  opacity:1;
  transform:scaleX(1);
  transition-delay:380ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-lead-line:nth-child(1) .hero-lead-line-inner{
  opacity:1;
  transform:translateY(0);
  transition-delay:450ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-lead-line:nth-child(2) .hero-lead-line-inner{
  opacity:1;
  transform:translateY(0);
  transition-delay:560ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-lead-sub,
html.js .hero-fullscreen.is-hero-ready .hero-lead-ko{
  opacity:1;
  transform:translateY(0);
  transition-delay:750ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-scroll{
  opacity:1;
  transition-delay:1100ms;
}

/* Soft repeating scroll pulse */
html.js .hero-fullscreen.is-hero-ready .hero-scroll__arrow{
  animation:heroScrollPulse 2s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite;
}
@keyframes heroScrollPulse{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(8px);opacity:1}
}

@media (max-width:980px){
  html.js .hero-fullscreen.hero-has-motion > .hero-fullscreen-media{
    background-color:var(--white,#fff);
    background-image:none;
  }
}

/* Inner-page hero content reveal */
html.js .hero .hero-content[data-reveal]:not(.is-visible){
  opacity:0;
  transform:translateY(16px);
}

/* —— Cards —— */
.card{
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.card img{
  transition:transform var(--motion-base) var(--ease-standard);
}
.card .card-title span{
  display:inline-block;
  transition:transform var(--motion-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(var(--motion-card-lift));
    box-shadow:0 14px 36px rgba(11,35,67,.1);
  }
  .card:hover img{
    transform:scale(1.02);
  }
  .card:hover .card-title span{
    transform:translateX(4px);
  }
}

/* —— Image / feature / wide-card hover —— */
.feature-image,
.category-row img,
.wide-card img{
  transition:
    transform var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard);
}
.wide-card,
.feature-split a.btn,
.category-row .link-list a{
  transition:color var(--motion-fast) var(--ease-standard);
}
.wide-card .btn,
.link-list a,
.btn span{
  transition:transform var(--motion-fast) var(--ease-standard);
}
.btn span{
  display:inline-block;
}
@media (hover:hover) and (pointer:fine){
  .feature-split:hover .feature-image,
  a.wide-card:hover img,
  .img-hover:hover img{
    transform:scale(var(--motion-img-hover));
  }
  a.wide-card:hover .btn,
  .link-list a:hover{
    color:var(--teal);
  }
  .btn:hover span{
    transform:translateX(4px);
  }
  .link-list a:hover{
    transform:translateX(2px);
  }
}
.feature-split .feature-image,
.category-row > img,
.wide-card img{
  transform-origin:center center;
}
.wide-card{overflow:hidden}

/* —— Chart draw-once —— */
html.js .chart svg polyline.chart-line{
  stroke-dasharray:var(--chart-len, 1000);
  stroke-dashoffset:var(--chart-len, 1000);
  transition:stroke-dashoffset 900ms var(--ease-emphasized);
}
html.js .chart.is-drawn svg polyline.chart-line{
  stroke-dashoffset:0;
}
html.js .chart svg circle.chart-dot{
  opacity:0;
  transition:opacity 400ms var(--ease-standard);
  transition-delay:var(--dot-delay, 0ms);
}
html.js .chart.is-drawn svg circle.chart-dot{
  opacity:1;
}

/* —— Side nav / content polish —— */
.side-nav a{
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

/* —— Mobile: shorter distances, no hover lift —— */
@media (max-width:980px){
  :root{
    --motion-reveal-y:22px;
    --header-h-scrolled:60px;
  }
}
@media (hover:none), (pointer:coarse){
  .card:hover{
    transform:none;
    box-shadow:none;
  }
  .card:hover img{
    transform:none;
  }
}

/* —— Legacy opt-out (unused; company pages use sitewide reveal) —— */
html.js.no-page-motion main{animation:none}
html.js.no-page-motion [data-reveal],
html.js.no-page-motion [data-reveal]:not(.is-visible),
html.js.no-page-motion [data-reveal].is-visible,
html.js.no-page-motion tr[data-reveal] > th,
html.js.no-page-motion tr[data-reveal] > td{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto;
}

/* —— Reduced motion: hard stop —— */
@media (prefers-reduced-motion:reduce){
  :root{
    --motion-fast:0ms;
    --motion-base:0ms;
    --motion-slow:0ms;
    --motion-reveal-y:0px;
  }
  html{scroll-behavior:auto}
  html.js main{animation:none}
  html.js [data-reveal],
  html.js [data-reveal]:not(.is-visible),
  html.js [data-reveal].is-visible,
  html.js tr[data-reveal] > th,
  html.js tr[data-reveal] > td{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  html.js .hero-fullscreen.hero-has-motion > .hero-fullscreen-media,
  html.js .hero-fullscreen .hero-ground,
  html.js .hero-fullscreen .hero-accent-line,
  html.js .hero-fullscreen .hero-lead-line-inner,
  html.js .hero-fullscreen .hero-lead-sub,
  html.js .hero-fullscreen .hero-lead-ko,
  html.js .hero-fullscreen .hero-scroll{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  html.js .hero-fullscreen.is-hero-ready .hero-scroll__arrow{
    animation:none !important;
  }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .card:hover,
  .card:hover img{
    transform:none;
  }
  html.js .chart svg polyline.chart-line{
    stroke-dashoffset:0 !important;
  }
  html.js .chart svg circle.chart-dot{
    opacity:1 !important;
  }
}