/* EGE motion system — tokens + utilities
   Content stays visible without JS. html.js gates reveal hiding. */

:root{
  --motion-fast:180ms;
  --motion-base:360ms;
  --motion-slow:650ms;
  --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized:cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reveal-y:16px;
  --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{
  background:rgba(255,255,255,.98);
  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;
}
/* 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);
}
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{
  background-color:#0b2343;
}
html.js .hero-fullscreen.hero-has-motion > .hero-fullscreen-media{
  position:absolute;
  inset:0;
  /* Width 100%, height auto — no cover zoom/crop.
     Clarity filter on media layer only (user 2026-08-06; not text). */
  background-color:var(--navy,#0b2343);
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
  filter:contrast(1.08) saturate(1.1) brightness(1.05);
  opacity:0;
  transition:opacity 1100ms var(--ease-emphasized);
  z-index:0;
  pointer-events:none;
}
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-rail,
html.js .hero-fullscreen.hero-has-motion .scroll-cue{
  z-index:2;
}
/* Hero lead: calm fade — white GROUND + Korean under it (leisurely reveal) */
html.js .hero-fullscreen .hero-ground,
html.js .hero-fullscreen .hero-lead-ko{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity 2000ms var(--ease-emphasized),
    transform 2000ms var(--ease-emphasized);
}
html.js .hero-fullscreen.is-hero-ready .hero-ground{
  opacity:1;
  transform:none;
  transition-delay:260ms;
}
html.js .hero-fullscreen.is-hero-ready .hero-lead-ko{
  opacity:1;
  transform:none;
  transition-delay:580ms;
}
html.js .hero-fullscreen .hero-rail,
html.js .hero-fullscreen .scroll-cue{
  opacity:0;
  transition:opacity 900ms var(--ease-emphasized);
}
html.js .hero-fullscreen.is-hero-ready .hero-rail{
  opacity:1;
  transition-delay:900ms;
}
html.js .hero-fullscreen.is-hero-ready .scroll-cue{
  opacity:1;
  transition-delay:1100ms;
}

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

/* —— Scroll cue: gentle 3–4px bob only —— */
.scroll-cue-line,
.scroll-cue-arrow{
  animation:scrollBob 2.2s var(--ease-standard) infinite;
}
@keyframes scrollBob{
  0%,100%{opacity:.55;transform:translateY(0)}
  50%{opacity:1;transform:translateY(4px)}
}

/* —— 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:10px;
    --header-h-scrolled:60px;
  }
}
@media (hover:none), (pointer:coarse){
  .card:hover{
    transform:none;
    box-shadow:none;
  }
  .card:hover img{
    transform:none;
  }
}

/* —— 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{
    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-lead-ko,
  html.js .hero-fullscreen .hero-rail,
  html.js .hero-fullscreen .scroll-cue{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .scroll-cue-line,
  .scroll-cue-arrow,
  *,*::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;
  }
}