/* SEIYASHA Interaction Language
   One quiet system for reveal, hover, press, menus and ambient starlight. */
:root{
  --motion-fast:180ms;
  --motion-normal:420ms;
  --motion-slow:760ms;
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-press:cubic-bezier(.2,.85,.25,1.18);
  --motion-shift:4px;
  --motion-press-scale:.965;
  --star-light:#dceefa;
  --star-mid:#87aac4;
  --star-glow:rgba(137,184,218,.28);
  --star-glow-soft:rgba(137,184,218,.12);
}

/* Accessible focus belongs to the same orbit language. */
:where(a,button,summary,input,select,textarea,[role="button"]):focus-visible{
  outline:1px solid var(--star-mid)!important;
  outline-offset:5px;
  border-radius:4px;
  box-shadow:0 0 0 3px var(--star-glow-soft)!important;
}

/* Reversible viewport motion: related components share timing, not identical choreography. */
html.motion-ready .reveal{
  opacity:0!important;
  visibility:visible!important;
  filter:blur(3px)!important;
  clip-path:none!important;
  transform:translate3d(0,18px,0)!important;
  transition:opacity var(--motion-slow) ease,transform var(--motion-slow) var(--motion-ease),filter var(--motion-normal) ease!important;
}
html.motion-ready .reveal.enter-from-above{transform:translate3d(0,-18px,0)!important}
html.motion-ready .reveal.visible{opacity:1!important;filter:none!important;transform:none!important}
html.motion-ready .section-head.reveal{transform:translate3d(-16px,12px,0)!important}
html.motion-ready .section-head.reveal.visible{transform:none!important}
html.motion-ready .timeline-item.reveal:nth-child(odd){transform:translate3d(-22px,14px,0)!important}
html.motion-ready .timeline-item.reveal:nth-child(even){transform:translate3d(22px,14px,0)!important}
html.motion-ready .timeline-item.reveal.visible{transform:none!important}
html.motion-ready :is(.service,.brand-card,.timeline-item).reveal :is(.year,h3,p,small,.brand-logo,.brand-card-foot,.platform-logos,.timeline-platforms){opacity:1!important;filter:none!important;clip-path:none!important;transform:none!important}

/* Future is a quiet destination, not a reveal target. Keep the row and all of
   its copy completely static even if another component later adds a motion
   class or a transition rule. */
html.motion-ready #story .timeline-item.future,
html.motion-ready #story .timeline-item.future *{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
}

/* Story rows reveal as two coordinated halves and reset after leaving view. */
html.motion-ready #story .timeline-item.reveal>.year,
html.motion-ready #story .timeline-item.reveal>div:last-child{
  opacity:0!important;
  transition:opacity 680ms ease,transform 760ms var(--motion-ease),filter 620ms ease!important;
}
html.motion-ready #story .timeline-item.reveal>.year{filter:blur(2px)!important;transform:translate3d(-18px,0,0)!important}
html.motion-ready #story .timeline-item.reveal>div:last-child{filter:blur(3px)!important;transform:translate3d(22px,0,0)!important}
html.motion-ready #story .timeline-item.reveal.visible>.year,
html.motion-ready #story .timeline-item.reveal.visible>div:last-child{opacity:1!important;filter:none!important;transform:none!important}
#story .timeline-item.is-story-pressed>.year{animation:motion-story-year-press 720ms var(--motion-ease-press) both!important}
#story .timeline-item.is-story-pressed>div:last-child{animation:motion-story-copy-press 720ms var(--motion-ease-press) both!important}
@keyframes motion-story-year-press{0%,100%{transform:none}42%{transform:translate3d(-15px,0,0)}70%{transform:translate3d(2px,0,0)}}
@keyframes motion-story-copy-press{0%,100%{transform:none}42%{transform:translate3d(15px,0,0)}70%{transform:translate3d(-2px,0,0)}}
html.motion-ready .footer-detail-motion.reveal,html.motion-ready .footer-bottom-motion.reveal{opacity:0!important;filter:blur(2px)!important;transform:translate3d(0,14px,0)!important}
html.motion-ready .footer-detail-motion.reveal.visible,html.motion-ready .footer-bottom-motion.reveal.visible{opacity:1!important;filter:none!important;transform:none!important}
.footer-detail-motion>:is(small,p,.bank-meta,strong,.contact-lines),.footer-bottom-motion>p,.footer-bottom-motion .footer-social a{opacity:1!important;transform:none!important}

/* Shared press/tap: a small stellar pulse, never a sticky mobile hover. */
.motion-interactive{transform-origin:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.motion-interactive.is-motion-pressed{animation:motion-star-press var(--motion-normal) var(--motion-ease-press) both!important}
@keyframes motion-star-press{0%,100%{filter:none;transform:none}34%{filter:drop-shadow(0 0 6px var(--star-glow));transform:scale(var(--motion-press-scale))}70%{filter:drop-shadow(0 0 3px var(--star-glow-soft));transform:scale(1.012)}}

/* Each text field receives a small constellation pass rather than a plain line. */
.motion-field{position:relative;transition:color var(--motion-normal) ease,opacity var(--motion-normal) ease,text-shadow var(--motion-normal) ease,filter var(--motion-normal) ease!important}
.motion-field::after{content:"";position:absolute;z-index:2;top:10%;right:-8px;width:5px;height:5px;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);box-shadow:-9px 7px 0 -1px currentColor,7px 11px 0 -2px currentColor;opacity:0;pointer-events:none;transform:translate3d(-14px,9px,0) scale(.15) rotate(-42deg)}
.motion-field.is-motion-pressed{animation:motion-field-response .62s var(--motion-ease-press) both!important}
.motion-field.is-motion-pressed::after{animation:motion-field-constellation .7s var(--motion-ease) both}
.motion-field.is-motion-hovered::after{animation:motion-field-constellation .78s var(--motion-ease) both}
@media(hover:hover) and (pointer:fine){
  .motion-field:hover{filter:brightness(1.06);text-shadow:0 0 14px var(--star-glow)}
}
@keyframes motion-field-response{0%,100%{filter:none;transform:none}32%{filter:drop-shadow(0 0 5px var(--star-glow));transform:translate3d(1px,-1px,0) scale(.985)}68%{transform:translate3d(-.5px,.5px,0) scale(1.006)}}
@keyframes motion-field-constellation{0%{opacity:0;transform:translate3d(-15px,10px,0) scale(.1) rotate(-48deg)}35%{opacity:.82}72%{opacity:.42;transform:translate3d(5px,-5px,0) scale(.9) rotate(18deg)}100%{opacity:0;transform:translate3d(13px,-10px,0) scale(.2) rotate(64deg)}}

/* Brand cards, the revenue plot and the timeline already own their
   hover/click motion. Their child copy stays out of the generic motion-field
   layer, so a trackpad boundary crossing cannot start a second pseudo-star
   animation. The dedicated choreography and link hit areas remain intact. */
@media(hover:hover) and (pointer:fine){
  :is(#brands,.data-visual) .motion-field:hover{filter:none;text-shadow:none}
  :is(#brands,.data-visual) .motion-field:hover::after{animation:none;opacity:0}
}

/* Links draw a restrained star trail. The label itself never shifts. */
:where(.main-nav a,.footer-bilingual-nav a,.portal-link,.brand-site[href],.trade-site a[href],.family-options a,.portal-systems a,.footer-contact a,.home){
  background-image:linear-gradient(90deg,var(--star-mid),var(--star-light),transparent)!important;
  background-repeat:no-repeat!important;
  background-position:0 100%!important;
  background-size:0 1px!important;
  transition:background-size var(--motion-normal) var(--motion-ease),color var(--motion-fast) ease,opacity var(--motion-fast) ease!important;
}
@media(hover:hover) and (pointer:fine){
  :where(.main-nav a,.footer-bilingual-nav a,.portal-link,.brand-site[href],.trade-site a[href],.family-options a,.portal-systems a,.footer-contact a,.home):hover,
  :where(.main-nav a,.footer-bilingual-nav a,.portal-link,.brand-site[href],.trade-site a[href],.family-options a,.portal-systems a,.footer-contact a,.home):focus-visible{
    opacity:1!important;
    background-size:100% 1px!important;
  }
}

/* Logos: the ring turns like a quiet orbit while the name catches starlight. */
.mark,.mark i,.wordmark>span:last-child,.footer-nav-brand>span:last-child{transition:transform var(--motion-normal) var(--motion-ease),filter var(--motion-normal) ease,letter-spacing var(--motion-normal) var(--motion-ease),text-shadow var(--motion-normal) ease!important}
@media(hover:hover) and (pointer:fine){
  :is(.wordmark,.footer-nav-brand):is(:hover,:focus-visible) .mark{animation:motion-mark-orbit 1.15s var(--motion-ease) both;filter:drop-shadow(0 0 8px var(--star-mid))}
  :is(.wordmark,.footer-nav-brand):is(:hover,:focus-visible) .mark i{animation:motion-mark-constellation 1.15s var(--motion-ease) both}
  :is(.wordmark,.footer-nav-brand):is(:hover,:focus-visible)>span:last-child{animation:motion-wordmark-light 720ms var(--motion-ease) both}
}
@media(hover:none),(pointer:coarse){
  :is(.wordmark,.footer-nav-brand):active .mark{animation:motion-mark-orbit 720ms var(--motion-ease) both;filter:drop-shadow(0 0 8px var(--star-mid))}
  :is(.wordmark,.footer-nav-brand):active .mark i{animation:motion-mark-constellation 720ms var(--motion-ease) both}
  :is(.wordmark,.footer-nav-brand):active>span:last-child{animation:motion-wordmark-light 620ms var(--motion-ease) both}
}
@keyframes motion-mark-orbit{0%{transform:rotate(0) scale(1)}46%{transform:rotate(205deg) scale(1.1)}74%{transform:rotate(326deg) scale(.98)}100%{transform:rotate(360deg) scale(1.04)}}
@keyframes motion-mark-constellation{0%{transform:rotate(0) scale(1)}46%{transform:rotate(-285deg) scale(1.32)}100%{transform:rotate(-360deg) scale(1.08)}}
@keyframes motion-wordmark-light{0%{filter:none;transform:none;text-shadow:none}42%{filter:drop-shadow(0 0 7px var(--star-mid));transform:translate3d(4px,-2px,0) scale(1.045);text-shadow:8px 0 12px rgba(195,225,247,.35)}72%{transform:translate3d(1px,1px,0) scale(.995)}100%{filter:drop-shadow(0 0 3px var(--star-mid));transform:translate3d(2px,0,0) scale(1.018);text-shadow:3px 0 8px rgba(195,225,247,.22)}}

/* Navigation keeps a quiet star; language choices use their richer original cue. */
.main-nav a,.language button{position:relative}
.main-nav a::before{content:"";position:absolute;left:50%;top:-7px;width:5px;height:5px;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0;transform:translateX(-50%) scale(.2) rotate(-30deg);transition:opacity var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease);filter:drop-shadow(0 0 4px currentColor)}
.language button{transform:translateY(0)}
.language .language-label{display:inline-block;transition:filter var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease-press)}
.language button::before{content:"";position:absolute;left:50%;top:-8px;width:5px;height:5px;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0;transform:translateX(-50%) scale(.1) rotate(-35deg);filter:drop-shadow(0 0 5px currentColor);transition:opacity var(--motion-fast) ease,filter var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease)}
.language button[data-lang="zh"]{--language-tilt:-2deg}.language button[data-lang="ko"]{--language-tilt:2deg}.language button[data-lang="ja"]{--language-tilt:-1deg}.language button[data-lang="en"]{--language-tilt:1.5deg}
.language button.active::before{opacity:.62;transform:translateX(-50%) scale(.7)}
@media(hover:hover) and (pointer:fine){
  .main-nav a:hover::before{opacity:.75;transform:translateX(-50%) scale(.72) rotate(20deg)}
  .language button:hover::before,.language button:focus-visible::before{opacity:.78;filter:drop-shadow(0 0 7px currentColor);transform:translateX(-50%) scale(.82) rotate(8deg)}
  .language button:hover .language-label,.language button:focus-visible .language-label{filter:drop-shadow(0 0 4px currentColor);transform:translateY(-3px) rotate(var(--language-tilt)) scale(1.035)}
}
.language button.is-language-selecting::before{animation:motion-language-star .72s var(--motion-ease) both}
.language button.is-language-selecting .language-label{animation:motion-language-select .66s var(--motion-ease-press) both}
@keyframes motion-language-star{0%{opacity:0;transform:translateX(-50%) scale(.1) rotate(-35deg)}55%{opacity:1;transform:translateX(-50%) scale(1.35) rotate(12deg)}100%{opacity:.72;transform:translateX(-50%) scale(.7) rotate(0)}}
@keyframes motion-language-select{0%,100%{filter:none;transform:none}42%{filter:drop-shadow(0 0 7px currentColor);transform:translateY(-7px) rotate(var(--language-tilt)) scale(1.075)}70%{filter:drop-shadow(0 0 3px currentColor);transform:translateY(1.5px) rotate(calc(var(--language-tilt) * -.4)) scale(.985)}}

/* Hamburger / account menu: three lines bend around a central star instead of snapping into a plain X. */
.menu-toggle,.portal-menu-button{position:relative;overflow:visible}
.menu-toggle i,.portal-menu-button i{transform-origin:center;transition:width var(--motion-normal) var(--motion-ease),opacity var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) ease!important}
.site-header .menu-toggle i{align-self:flex-end;border-radius:99px}
.site-header .menu-toggle i:first-of-type{width:30px}
.site-header .menu-toggle i:nth-of-type(2){width:22px}
.site-header .menu-toggle i:last-of-type{width:14px}
.site-header .menu-toggle::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.62) rotate(-24deg);transition:opacity var(--motion-fast) ease,transform var(--motion-slow) var(--motion-ease);mask:linear-gradient(115deg,#000 0 24%,transparent 25% 48%,#000 49% 72%,transparent 73%);-webkit-mask:linear-gradient(115deg,#000 0 24%,transparent 25% 48%,#000 49% 72%,transparent 73%)}
.menu-toggle::after,.portal-menu-button::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-45deg);transition:opacity var(--motion-fast) ease,transform var(--motion-normal) var(--motion-ease);filter:drop-shadow(0 0 5px currentColor)}
:is(.menu-toggle[aria-expanded="true"],.portal-auth.menu-open .portal-menu-button)::after{opacity:.88;transform:translate(-50%,-50%) scale(.72) rotate(45deg)}
.menu-toggle[aria-expanded="true"]::before{opacity:.28;transform:translate(-50%,-50%) scale(1) rotate(62deg)}
.menu-toggle[aria-expanded="true"] i:first-of-type,.portal-auth.menu-open .portal-menu-button i:first-of-type{width:29px;transform:translateY(7px) rotate(42deg) scaleX(.94)!important}
.menu-toggle[aria-expanded="true"] i:nth-of-type(2),.portal-auth.menu-open .portal-menu-button i:nth-of-type(2){opacity:.12;transform:scaleX(.18)!important}
.menu-toggle[aria-expanded="true"] i:last-of-type,.portal-auth.menu-open .portal-menu-button i:last-of-type{width:29px;transform:translateY(-7px) rotate(-42deg) scaleX(.94)!important}
.site-header .menu-toggle[aria-expanded="true"] i{position:absolute;top:50%;left:50%;margin:0;align-self:auto}
.site-header .menu-toggle[aria-expanded="true"] i:first-of-type{transform:translate(-50%,-50%) rotate(42deg) scaleX(.94)!important}
.site-header .menu-toggle[aria-expanded="true"] i:nth-of-type(2){transform:translate(-50%,-50%) scaleX(.18)!important}
.site-header .menu-toggle[aria-expanded="true"] i:last-of-type{transform:translate(-50%,-50%) rotate(-42deg) scaleX(.94)!important}
@media(hover:hover) and (pointer:fine){
  .menu-toggle:hover i:first-of-type{width:22px;transform:translateX(-8px)}
  .menu-toggle:hover i:nth-of-type(2){width:30px}
  .menu-toggle:hover i:last-of-type{width:18px;transform:translateX(-12px)}
  :is(.menu-toggle,.portal-menu-button):hover::after{opacity:.8;transform:translate(-50%,-50%) scale(.72) rotate(28deg)}
  .menu-toggle[aria-expanded="true"]:hover::before{opacity:.5;transform:translate(-50%,-50%) scale(1.08) rotate(145deg)}
  .site-header .menu-toggle[aria-expanded="true"]:hover i:first-of-type{width:29px;transform:translate(-50%,-50%) rotate(48deg) scaleX(.94)!important}
  .site-header .menu-toggle[aria-expanded="true"]:hover i:last-of-type{width:29px;transform:translate(-50%,-50%) rotate(-48deg) scaleX(.94)!important}
}

/* Menus and dropdowns appear as a calm layer of night. */
.main-nav,.portal-menu,.family-options,.portal-auth-notice{transition:opacity var(--motion-normal) ease,visibility var(--motion-normal) ease,transform var(--motion-slow) var(--motion-ease)!important}
html.layout-compact .site-header .main-nav{transition:none!important}
.portal-menu:not(.compact-inline),.family-options{transform:translate3d(0,-10px,0) scale(.985)}
.portal-auth.menu-open .portal-menu,.family-dropdown[open] .family-options{transform:none!important}
.site-header.menu-open .main-nav>:is(.language,.portal-link,a,.portal-menu){animation:motion-menu-layer var(--motion-slow) var(--motion-ease) both}
.site-header.menu-open .main-nav>a:nth-of-type(2){animation-delay:40ms}.site-header.menu-open .main-nav>a:nth-of-type(3){animation-delay:80ms}.site-header.menu-open .main-nav>a:nth-of-type(4){animation-delay:120ms}.site-header.menu-open .main-nav>a:nth-of-type(5){animation-delay:160ms}
.family-dropdown[open] .family-options a{animation:motion-menu-layer var(--motion-normal) var(--motion-ease) both}
.family-dropdown[open] .family-options a:nth-child(2){animation-delay:45ms}.family-dropdown[open] .family-options a:nth-child(3){animation-delay:90ms}
@keyframes motion-menu-layer{from{opacity:1;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* Compact menu dividers behave like dim star paths, not ordinary underlines. */
:is(.site-header.menu-open .main-nav>a,.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a){position:relative;isolation:isolate;overflow:hidden;background-image:none!important;background-size:0!important}
:is(.site-header.menu-open .main-nav>a,.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a)::after{content:"";position:absolute;z-index:0;right:14px;bottom:0;left:14px;height:1px;background:linear-gradient(90deg,transparent 0,rgba(175,205,228,.38) 10%,rgba(204,226,242,.52) 50%,rgba(175,205,228,.38) 90%,transparent 100%);opacity:.42;transform:scaleX(1);transform-origin:left center;pointer-events:none}
:is(.site-header.menu-open .main-nav>a,.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a)::before{content:"";position:absolute;z-index:1;bottom:-3px;left:14px;width:7px;height:7px;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0;filter:drop-shadow(0 0 5px currentColor) drop-shadow(-9px 0 5px rgba(176,211,238,.65));transform:scale(.35) rotate(-35deg);pointer-events:none}
.site-header.menu-open.over-light :is(.main-nav>a,.portal-link,.portal-menu.compact-inline .portal-systems>a)::after{background:linear-gradient(90deg,transparent 0,rgba(48,78,102,.28) 10%,rgba(65,101,128,.44) 50%,rgba(48,78,102,.28) 90%,transparent 100%)}
/* The authenticated ERP row sits below another divider, so its dark-surface
   trail needs a brighter source color to remain legible while moving. */
.site-header.menu-open:not(.over-light) .main-nav>.portal-menu.compact-inline .portal-systems>a::after{background:linear-gradient(90deg,transparent 0,rgba(170,211,240,.52) 10%,rgba(226,242,253,.9) 50%,rgba(170,211,240,.52) 90%,transparent 100%);opacity:.62}
.site-header.menu-open:not(.over-light) .main-nav>.portal-menu.compact-inline .portal-systems>a::before{background:#f3f9fd;color:#f3f9fd;filter:drop-shadow(0 0 7px rgba(225,243,255,.95)) drop-shadow(-10px 0 6px rgba(143,201,241,.82))}
.site-header.menu-open.over-light .main-nav>.portal-menu.compact-inline .portal-systems>a::after{background:linear-gradient(90deg,transparent 0,rgba(54,93,122,.42) 10%,rgba(38,75,104,.76) 50%,rgba(54,93,122,.42) 90%,transparent 100%);opacity:.62}
.site-header.menu-open.over-light .main-nav>.portal-menu.compact-inline .portal-systems>a::before{background:#315f80;color:#315f80;filter:drop-shadow(0 0 5px rgba(49,95,128,.58)) drop-shadow(-10px 0 5px rgba(92,133,162,.5))}
@media(hover:hover) and (pointer:fine){
  .site-header.menu-open .main-nav>a .nav-label{
    transition:transform 520ms var(--motion-ease),filter 520ms ease!important;
  }
  .site-header.menu-open .main-nav>a:hover .nav-label,
  .site-header.menu-open .main-nav>a:focus-visible .nav-label{
    filter:drop-shadow(0 0 6px var(--star-glow));
    transform:translate3d(12px,0,0)!important;
  }
  .site-header.menu-open .main-nav>a .nav-label::after{
    content:none!important;
    animation:none!important;
  }
  :is(.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a):is(:hover,:focus-visible)::after{animation:motion-menu-star-path 1800ms ease-in-out both}
  :is(.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a):is(:hover,:focus-visible)::before{animation:motion-menu-star-flight 1800ms linear both}
}
:is(.site-header.menu-open .main-nav>a,.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a).is-motion-pressed::after{animation:motion-menu-star-path 1200ms ease-in-out both}
:is(.site-header.menu-open .main-nav>a,.site-header.menu-open .portal-link,.site-header .main-nav>.portal-menu.compact-inline .portal-systems>a).is-motion-pressed::before{animation:motion-menu-star-flight 1200ms linear both}
@keyframes motion-menu-star-path{0%,100%{opacity:.42;filter:none}40%{opacity:.78;filter:drop-shadow(0 0 3px rgba(182,217,243,.58))}70%{opacity:.62;filter:drop-shadow(0 0 2px rgba(182,217,243,.34))}}
@keyframes motion-menu-star-flight{0%{left:14px;opacity:0;transform:scale(.2) rotate(-45deg)}12%{opacity:.82;transform:scale(.72) rotate(-22deg)}55%{opacity:1;transform:scale(1.04) rotate(18deg)}88%{opacity:.72;transform:scale(.72) rotate(58deg)}100%{left:calc(100% - 21px);opacity:0;transform:scale(.22) rotate(78deg)}}
.family-dropdown summary .family-chevron,.external-arrow,.family-external{transition:transform var(--motion-normal) var(--motion-ease),filter var(--motion-fast) ease!important}
@media(hover:hover) and (pointer:fine){
  a:hover :is(.external-arrow,.family-external),a:focus-visible :is(.external-arrow,.family-external){transform:translate(2px,-2px)!important;filter:drop-shadow(0 0 4px var(--star-mid))}
}

/* Cards, rows and data fields share a soft orbital response. */
:where(.service,.trading-copy li,.trading-company,.metric-row>div,.footer-detail-motion){transition:transform var(--motion-normal) var(--motion-ease),border-color var(--motion-normal) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-normal) ease!important}
@media(hover:hover) and (pointer:fine){
  :where(.service,.trading-copy li,.metric-row>div,.footer-detail-motion):hover{transform:translate3d(var(--motion-shift),-2px,0)!important}
  .trading-company:hover{transform:translate3d(0,-4px,0)!important;box-shadow:0 18px 48px var(--star-glow-soft)!important}
}

/* Technology metrics answer a click with a compact, vivid constellation. */
.metric-row>div{isolation:isolate;cursor:pointer}
.metric-row>div::before{content:"";position:absolute;z-index:0;inset:4px;border-radius:10px;background:radial-gradient(circle at 24% 55%,rgba(28,210,255,.34),transparent 34%),radial-gradient(circle at 72% 42%,rgba(178,77,255,.3),transparent 38%),radial-gradient(circle at 52% 80%,rgba(255,190,55,.24),transparent 42%);opacity:0;pointer-events:none;transform:scale(.72)}
.metric-row>div::after{content:"";position:absolute;z-index:2;right:auto;bottom:auto;left:50%;top:50%;width:6px;height:6px;background:#fff4a8;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);box-shadow:-30px -13px 0 -1px #45d8ff,28px -17px 0 -1px #c36bff,34px 14px 0 -1px #ff668d,-24px 18px 0 -1px #ffd34d;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2) rotate(-35deg)}
.metric-row>div.is-motion-pressed::before{animation:motion-metric-aurora 720ms var(--motion-ease) both}
.metric-row>div.is-motion-pressed::after{animation:motion-metric-stars 720ms var(--motion-ease-press) both}
.metric-row>div.is-motion-pressed small{animation:motion-metric-label 680ms var(--motion-ease-press) both}
.metric-row>div.is-motion-pressed strong{animation:motion-metric-value 680ms var(--motion-ease-press) both}
@keyframes motion-metric-aurora{0%,100%{opacity:0;transform:scale(.72)}38%{opacity:1;transform:scale(1)}72%{opacity:.45;transform:scale(1.08)}}
@keyframes motion-metric-stars{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-35deg)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(16deg)}72%{opacity:.7;transform:translate(-50%,-50%) scale(.82) rotate(48deg)}}
@keyframes motion-metric-label{0%,100%{color:inherit;filter:none;transform:none}38%{color:#8b6cff;filter:drop-shadow(0 0 6px rgba(139,108,255,.5));transform:translate3d(0,-3px,0)}72%{transform:translate3d(0,1px,0)}}
@keyframes motion-metric-value{0%,100%{color:inherit;filter:none;transform:none}38%{color:#087f9d;filter:drop-shadow(0 0 7px rgba(45,210,255,.48));transform:translate3d(0,3px,0) scale(1.045)}72%{transform:translate3d(0,-1px,0) scale(.99)}}

/* Images focus gently; store badges and platform marks stay crisp. */
:where(.brand-logo,.brand-logo img,.platform-logo-visual,.store-link,.footer-social a,.footer-social img,.portal-avatar,.portal-avatar img){transition:transform var(--motion-normal) var(--motion-ease),filter var(--motion-normal) ease,opacity var(--motion-fast) ease!important}
@media(hover:hover) and (pointer:fine){
  .brand-card:hover .brand-logo{transform:scale(1.018)!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.14))}
  :where(.platform-hit,.store-link,.footer-social a):hover{transform:translateY(-3px) scale(1.045)!important;filter:drop-shadow(0 7px 9px var(--star-glow))}
  .portal-avatar:hover{transform:scale(1.045);filter:drop-shadow(0 0 8px var(--star-mid))}
}

/* Field-level feedback for company and account information. */
:where(.trade-entity,.trade-registration>span,.trade-bank,.trade-contact,.footer-detail-motion,.contact-lines>span,.bank-meta>span,.trade-bank-meta>span){transition:color var(--motion-normal) ease,opacity var(--motion-fast) ease,text-shadow var(--motion-normal) ease!important}
@media(hover:hover) and (pointer:fine){
  :where(.trade-entity,.trade-registration>span,.trade-bank,.trade-contact,.footer-detail-motion,.contact-lines>span,.bank-meta>span,.trade-bank-meta>span):hover{text-shadow:0 0 13px var(--star-glow)}
}
.copy-account-button,.lookup-icon{transition:transform var(--motion-normal) var(--motion-ease),color var(--motion-fast) ease,opacity var(--motion-fast) ease,filter var(--motion-normal) ease!important}
@media(hover:hover) and (pointer:fine){
  :is(.copy-account-button,.lookup-icon):hover{opacity:1!important;transform:rotate(-10deg) scale(1.1)!important;filter:drop-shadow(0 0 5px var(--star-mid))}
}
.copy-account-button.is-copied{animation:motion-copy-star .56s var(--motion-ease-press)}
@keyframes motion-copy-star{0%,100%{transform:none}36%{transform:scale(.72) rotate(-18deg);filter:drop-shadow(0 0 3px var(--star-mid))}72%{transform:scale(1.16) rotate(5deg);filter:drop-shadow(0 0 8px var(--star-mid))}}
:where(input,select,textarea){transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-normal) ease!important}
@media(hover:hover) and (pointer:fine){:where(input,select,textarea):hover{border-color:var(--star-mid);box-shadow:0 0 0 3px var(--star-glow-soft)}}

/* Existing stars and progress become part of the same restrained system. */
.hero-glow{animation:motion-sky-breathe 8s ease-in-out infinite alternate}
@media(hover:hover) and (pointer:fine){
  .hero-glow{left:var(--pointer-x);top:var(--pointer-y);opacity:.96;transform:translate(-50%,-50%);transition:left 110ms linear,top 110ms linear}
}
@keyframes motion-sky-breathe{to{box-shadow:0 0 240px 118px rgba(135,184,226,.28)}}
.story-bridge.visible .bridge-line{animation:motion-trail-grow 1.15s var(--motion-ease) both}
.story-bridge.visible .bridge-star{animation:motion-star-descend 3s ease-in-out infinite!important}
.story-bridge.visible i{animation:motion-trail-open .8s var(--motion-ease) .45s both}
@keyframes motion-trail-grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:.7}}
@keyframes motion-star-descend{0%{top:0;opacity:0;transform:scale(.45) rotate(-30deg)}12%,82%{opacity:1}50%{transform:scale(1.12) rotate(24deg)}100%{top:calc(100% - 24px);opacity:0;transform:scale(.5) rotate(90deg)}}
@keyframes motion-trail-open{from{opacity:0;transform:scaleX(.1)}to{opacity:.65;transform:scaleX(1)}}
.reading-progress span,.reading-progress i{transition:transform 90ms linear,left 90ms linear!important}
.reading-progress i{transform:translate(-50%,-50%) rotate(var(--shuriken-angle,0deg))!important}
.wandering-star{transition:opacity 2s ease,transform 2s var(--motion-ease),filter var(--motion-normal) ease!important}
.wandering-star::before{animation:motion-wander-pulse 2.2s ease-out infinite}
.wandering-star>span{animation:motion-wander-twinkle 2.8s ease-in-out infinite}
.wandering-star.is-bursting{animation:motion-star-core-burst 1.35s ease-out forwards!important}
.wandering-star.is-bursting::before{animation:motion-star-ring-burst 1.25s ease-out forwards}
.wandering-star.is-bursting i{animation:motion-star-particle 1.45s cubic-bezier(.16,.72,.32,1) var(--delay) forwards}
.wandering-star.is-bursting::after{animation:motion-star-flash 1.1s ease-out forwards}
.star-counter.is-counting{animation:motion-counter-glow .85s ease-out}
.star-counter.is-counting>span{animation:motion-counter-star-land 1.05s cubic-bezier(.2,.9,.25,1.28)}
.star-counter.is-counting strong{animation:motion-counter-number .55s var(--motion-ease)}
.star-counter.is-counting small{animation:motion-counter-label-flash .9s ease-out}
.star-counter.is-counting::before,.star-counter.is-counting::after{animation:motion-counter-spark .95s cubic-bezier(.2,.8,.2,1) both}
.star-counter.is-counting::after{animation-delay:.08s}
.milestone-fireworks{position:fixed;z-index:46;inset:0;display:block;width:100vw;height:100vh;pointer-events:none;contain:strict}
@keyframes motion-wander-pulse{0%{opacity:.75;transform:scale(.35)}75%,100%{opacity:0;transform:scale(1.18)}}
@keyframes motion-wander-twinkle{0%,100%{transform:scale(.82) rotate(0)}45%{transform:scale(1.12) rotate(12deg)}65%{transform:scale(.94) rotate(-5deg)}}
@keyframes motion-star-core-burst{45%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(18deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(55deg)}}
@keyframes motion-star-ring-burst{to{opacity:0;transform:scale(2.4)}}
@keyframes motion-star-particle{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1)}}
@keyframes motion-star-flash{to{opacity:0;transform:scale(4)}}
@keyframes motion-counter-glow{0%{border-color:transparent;box-shadow:none}35%{border-color:rgba(220,239,255,.52);box-shadow:0 0 28px rgba(174,214,246,.2)}100%{border-color:transparent;box-shadow:none}}
@keyframes motion-counter-number{0%{opacity:.2;transform:translateY(7px)}100%{opacity:1;transform:none}}
@keyframes motion-counter-star-land{0%{opacity:.15;transform:translate(-18px,-15px) scale(.2) rotate(-80deg)}42%{opacity:1;filter:drop-shadow(0 0 13px #d7efff);transform:translate(2px,1px) scale(1.7) rotate(18deg)}72%{transform:scale(.82) rotate(-7deg)}100%{filter:drop-shadow(0 0 5px rgba(202,229,255,.72));transform:none}}
@keyframes motion-counter-label-flash{0%,100%{color:rgba(222,234,245,.55)}42%{color:#f5fbff;text-shadow:0 0 12px rgba(211,238,255,.75);letter-spacing:.17em}}
@keyframes motion-counter-spark{0%{opacity:0;transform:scale(.15) rotate(-20deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.65) rotate(22deg)}}

/* The not-found page uses the same slow sky rather than a second motion stack. */
.error-page::before{animation:motion-sky-drift 14s ease-in-out infinite alternate}
.error-page::after{animation:motion-star-field 18s linear infinite}
@keyframes motion-sky-drift{to{transform:translate3d(-2%,2%,0) scale(1.08)}}
@keyframes motion-star-field{to{background-position:40px 24px}}

/* The chart has one owner: JS advances only the clip width while these state
   classes handle point transitions. This avoids CSS/JS transform contention. */
.data-visual .revenue-line{opacity:0!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:opacity 180ms ease!important}
.data-visual.chart-animating .revenue-line,.data-visual.chart-complete .revenue-line{opacity:1!important}
.data-visual .revenue-points circle,.data-visual .revenue-points text{opacity:0!important;transition:none!important}
.data-visual .revenue-points circle{transform:scale(.1)!important;transform-box:fill-box;transform-origin:center}
.data-visual .revenue-points text{transform:translateY(7px)!important}
.data-visual.chart-animating .revenue-points .is-revealed{transition:opacity 480ms ease,transform 560ms var(--motion-ease)!important}
.data-visual .revenue-points .is-revealed,.data-visual.chart-complete .revenue-points circle,.data-visual.chart-complete .revenue-points text{opacity:1!important;transform:none!important}

/* Compact navigation rows arrive like separated layers, never as retained hover. */
@media(prefers-reduced-motion:no-preference){
  /* Compact reveal choreography: a short star-flight with depth, followed by
     staggered content. It remains reversible when an item leaves the viewport. */
  html.layout-compact.motion-ready .reveal{
    --compact-flight-x:clamp(34px,10vw,78px);
    --compact-flight-y:38px;
    --compact-flight-tilt:2.4deg;
    opacity:0!important;
    filter:none!important;
    clip-path:none!important;
    transform:translate3d(var(--compact-flight-x),var(--compact-flight-y),0) rotateZ(var(--compact-flight-tilt)) scale(.985)!important;
    transform-origin:50% 72%;
    transition:opacity 420ms ease,transform 620ms cubic-bezier(.16,1,.3,1)!important;
    will-change:auto;
  }
  html.layout-compact.motion-ready .reveal.enter-from-above{
    --compact-flight-y:-38px;
    --compact-flight-tilt:-2.4deg;
    clip-path:none!important;
    transform:translate3d(-48px,var(--compact-flight-y),0) rotateZ(var(--compact-flight-tilt)) scale(.985)!important;
  }
  html.layout-compact.motion-ready .reveal.visible{
    opacity:1!important;
    filter:none!important;
    clip-path:none!important;
    transform:translate3d(0,0,0) rotateZ(0) scale(1)!important;
    animation:none!important;
    will-change:auto;
  }
  html.layout-compact.motion-ready :is(.section-head,.service,.timeline-item,.brand-card,.trading-company,.mobile-detail-reveal,.footer-detail-motion,.footer-bottom-motion).reveal:nth-child(even){
    --compact-flight-x:clamp(-78px,-10vw,-34px);
    --compact-flight-tilt:-2.4deg;
  }
  html.layout-compact.motion-ready :is(.section-head,.service,.timeline-item,.brand-card,.trading-company,.mobile-detail-reveal,.footer-detail-motion,.footer-bottom-motion).reveal:nth-child(even).enter-from-above{
    --compact-flight-tilt:2.4deg;
    transform:translate3d(48px,var(--compact-flight-y),0) rotateZ(var(--compact-flight-tilt)) scale(.985)!important;
  }
  html.layout-compact.motion-ready .reveal>:where(.year,h2,h3,p,small,.brand-card-motion,.platform-logos,.timeline-platforms,.contact-lines,.bank-meta,strong){
    opacity:.1!important;
    filter:none!important;
    transform:translate3d(18px,8px,0) scale(.98)!important;
    transition:opacity 360ms ease 60ms,transform 520ms cubic-bezier(.16,1,.3,1) 60ms!important;
  }
  html.layout-compact.motion-ready .reveal.visible>:where(.year,h2,h3,p,small,.brand-card-motion,.platform-logos,.timeline-platforms,.contact-lines,.bank-meta,strong){
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
  html.layout-compact.motion-ready .reveal.visible>:where(.year,small){transition-delay:40ms!important}
  html.layout-compact.motion-ready .reveal.visible>:where(h2,h3,.brand-card-motion,.platform-logos,.bank-meta){transition-delay:120ms!important}
  html.layout-compact.motion-ready .reveal.visible>:where(p,.timeline-platforms,.contact-lines,strong){transition-delay:210ms!important}
  /* Mobile brand cards use a light one-shot entrance. Heavy blur and clip-path
     on five full-size images caused scroll jank and occasional blank frames. */
  html.layout-compact.motion-ready #brands .brand-card.reveal{filter:none!important;clip-path:none!important;transform:translate3d(0,20px,0) scale(.985)!important;transition:opacity 500ms ease,transform 680ms var(--motion-ease)!important;will-change:auto}
  html.layout-compact.motion-ready #brands .brand-card.reveal.visible{transform:none!important}
  html.layout-compact.motion-ready #brands .brand-card.reveal .brand-card-motion{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
}

@media(hover:none),(pointer:coarse){
  .motion-interactive{transition:transform var(--motion-normal) var(--motion-ease),opacity var(--motion-fast) ease!important}
  .motion-interactive.is-motion-pressed{animation-duration:360ms!important}
  .site-header.menu-open .main-nav>a{transform:none}
  .language button.is-language-touching .language-label{filter:drop-shadow(0 0 4px currentColor);transform:translateY(-3px) rotate(var(--language-tilt)) scale(1.035)}
  .language button.is-language-touching::before{opacity:1;filter:drop-shadow(-5px 4px 4px currentColor) drop-shadow(5px 4px 4px currentColor);transform:translate(-50%,-2px) scale(1.18) rotate(12deg)}
}

/* Desktop choreography: editorial entrances and responsive surfaces.
   Ambient stars, collectible stars, fireworks and reading progress are
   intentionally outside this layer. */
@media(prefers-reduced-motion:no-preference){
  html.layout-desktop.motion-ready .reveal{
    opacity:0!important;
    filter:blur(7px) saturate(.82)!important;
    clip-path:inset(0 0 14% 0 round 10px)!important;
    transform:perspective(1200px) translate3d(0,42px,0) rotateX(2.5deg) scale(.985)!important;
    transform-origin:50% 72%;
    transition:opacity 620ms ease,filter 820ms cubic-bezier(.16,1,.3,1),clip-path 880ms cubic-bezier(.16,1,.3,1),transform 920ms cubic-bezier(.16,1,.3,1)!important;
  }
  html.layout-desktop.motion-ready .reveal.enter-from-above{
    clip-path:inset(14% 0 0 0 round 10px)!important;
    transform:perspective(1200px) translate3d(0,-34px,0) rotateX(-2deg) scale(.988)!important;
  }
  html.layout-desktop.motion-ready .reveal.visible{
    opacity:1!important;
    filter:none!important;
    clip-path:inset(0 round 0)!important;
    transform:perspective(1200px) translate3d(0,0,0) rotateX(0) scale(1)!important;
    will-change:auto;
  }
  html.layout-desktop.motion-ready .section-head.reveal{
    transform:perspective(1200px) translate3d(-42px,32px,0) rotateY(2.5deg) scale(.985)!important;
  }
  html.layout-desktop.motion-ready .section-head.reveal.visible{transform:none!important}

  html.layout-desktop.motion-ready #story .timeline-item.reveal{
    transform:perspective(1300px) translate3d(0,46px,0) rotateX(3deg) scale(.982)!important;
  }
  html.layout-desktop.motion-ready #story .timeline-item.reveal.enter-from-above{
    transform:perspective(1300px) translate3d(0,-38px,0) rotateX(-2.5deg) scale(.985)!important;
  }
  html.layout-desktop.motion-ready #story .timeline-item.reveal.visible{transform:none!important}
  html.layout-desktop.motion-ready #story .timeline-item.reveal>.year{
    opacity:0!important;
    filter:blur(4px)!important;
    transform:translate3d(-42px,0,0) scale(.96)!important;
    transition:opacity 560ms ease 80ms,filter 760ms ease 80ms,transform 860ms cubic-bezier(.16,1,.3,1) 80ms!important;
  }
  html.layout-desktop.motion-ready #story .timeline-item.reveal>div:last-child{
    opacity:0!important;
    filter:blur(5px)!important;
    transform:translate3d(58px,0,0) scale(.97)!important;
    transition:opacity 600ms ease 150ms,filter 800ms ease 150ms,transform 940ms cubic-bezier(.16,1,.3,1) 150ms!important;
  }
  html.layout-desktop.motion-ready #story .timeline-item.reveal.visible>.year,
  html.layout-desktop.motion-ready #story .timeline-item.reveal.visible>div:last-child{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
  /* Keep the row hit area stationary; only its two editorial halves ease a
     single short distance on hover so boundary jitter cannot move the layout. */
  html.layout-desktop.motion-ready #story .timeline-item.reveal.visible:hover>.year{transform:translate3d(-4px,0,0)!important}
  html.layout-desktop.motion-ready #story .timeline-item.reveal.visible:hover>div:last-child{transform:translate3d(4px,0,0)!important}

  html.layout-desktop .service{
    background-image:linear-gradient(100deg,transparent 0 38%,rgba(130,177,213,.09) 50%,transparent 62%);
    background-position:140% 0;
    background-size:220% 100%;
    transition:background-position 760ms cubic-bezier(.16,1,.3,1),background-color 420ms ease,border-color 420ms ease!important;
  }
  html.layout-desktop .service h3,html.layout-desktop .service p,html.layout-desktop .service>span{transition:transform 620ms cubic-bezier(.16,1,.3,1),color 320ms ease,opacity 320ms ease!important}
  html.layout-desktop .service:hover{background-position:-35% 0;background-color:rgba(130,177,213,.045)!important;border-color:rgba(154,198,230,.34)!important;transform:none!important}
  html.layout-desktop .service:hover h3{transform:translate3d(18px,0,0)!important}
  html.layout-desktop .service:hover p{transform:translate3d(9px,0,0)!important}
  html.layout-desktop .service:hover>span{transform:translate3d(4px,-5px,0) scale(1.08)!important}

  html.layout-desktop #brands .brand-card{
    transform:none!important;
    transition:border-color 420ms ease,box-shadow 720ms cubic-bezier(.16,1,.3,1),background-color 420ms ease!important;
  }
  html.layout-desktop #brands .brand-card:hover{
    transform:none!important;
    border-color:rgba(177,210,234,.52)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 0 1px rgba(161,204,235,.08)!important;
  }
  html.layout-desktop #brands .brand-card-motion{transition:transform 720ms cubic-bezier(.16,1,.3,1)!important}
  html.layout-desktop #brands .brand-card:hover .brand-card-motion{transform:translate3d(0,-7px,0) scale(1.008)!important}
  html.layout-desktop #brands .brand-card .brand-logo{
    transition:transform 900ms cubic-bezier(.16,1,.3,1),filter 720ms ease!important;
  }
  html.layout-desktop #brands .brand-card:hover .brand-logo{
    transform:scale(1.045)!important;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.2))!important;
  }
  html.layout-desktop #brands .brand-card-foot p,html.layout-desktop #brands .brand-card .brand-site,html.layout-desktop #brands .brand-card .brand-site strong{
    transition:transform 620ms cubic-bezier(.16,1,.3,1),color 320ms ease,opacity 320ms ease!important;
  }
  html.layout-desktop #brands .brand-card:hover .brand-card-foot p{transform:translate3d(0,-3px,0)!important}
  html.layout-desktop #brands .brand-card:hover .brand-site{transform:none!important}
  html.layout-desktop #brands .brand-card:hover .brand-site strong{transform:translate3d(8px,0,0)!important}

  html.layout-desktop .data-visual{
    transform:none!important;
    transition:box-shadow 760ms cubic-bezier(.16,1,.3,1),border-color 420ms ease!important;
  }
  html.layout-desktop .data-visual:hover{
    transform:none!important;
    border-color:rgba(99,137,166,.34)!important;
    box-shadow:0 30px 75px rgba(39,65,86,.15)!important;
  }
  html.layout-desktop .metric-row>div{transition:transform 520ms cubic-bezier(.16,1,.3,1),background-color 360ms ease!important}
  html.layout-desktop .metric-row>div:hover{transform:translate3d(8px,-3px,0)!important;background-color:rgba(112,155,188,.055)!important}

  html.layout-desktop .trading-copy li{
    background-image:linear-gradient(100deg,transparent,rgba(105,153,190,.09),transparent);
    background-position:130% 0;
    background-size:220% 100%;
    transition:transform 560ms cubic-bezier(.16,1,.3,1),background-position 720ms cubic-bezier(.16,1,.3,1),border-color 360ms ease!important;
  }
  html.layout-desktop .trading-copy li:hover{background-position:-30% 0;border-color:rgba(87,132,166,.3)!important;transform:translate3d(10px,0,0)!important}
  html.layout-desktop .trading-company:hover{transform:translate3d(0,-6px,0)!important;box-shadow:0 28px 70px rgba(52,82,105,.13)!important}

  html.layout-desktop .main-nav>a .nav-label,html.layout-desktop .footer-bilingual-nav a{
    transition:transform 520ms cubic-bezier(.16,1,.3,1),letter-spacing 520ms cubic-bezier(.16,1,.3,1),color 280ms ease!important;
  }
  html.layout-desktop .main-nav>a:hover .nav-label{transform:translate3d(0,-3px,0)!important;letter-spacing:.035em}
  html.layout-desktop .footer-bilingual-nav a:hover{transform:translate3d(6px,-2px,0)!important}

  /* External destinations share one quiet response without changing layout.
     Existing platform, store and social artwork keeps its own hover motion. */
  html.layout-desktop a[target="_blank"]{
    position:relative;
    transition:filter 520ms cubic-bezier(.16,1,.3,1),opacity 300ms ease,color 300ms ease!important;
  }
  html.layout-desktop a[target="_blank"] :is(span,strong,small){
    transition:transform 560ms cubic-bezier(.16,1,.3,1),filter 420ms ease,color 300ms ease!important;
  }
  html.layout-desktop a[target="_blank"]:hover,
  html.layout-desktop a[target="_blank"]:focus-visible{
    filter:brightness(1.12) drop-shadow(0 8px 16px rgba(115,169,209,.16))!important;
  }
  html.layout-desktop a[target="_blank"]:hover :is(span,strong):not(.platform-logo-visual),
  html.layout-desktop a[target="_blank"]:focus-visible :is(span,strong):not(.platform-logo-visual){
    transform:translate3d(4px,-2px,0)!important;
  }
  html.layout-desktop a[target="_blank"]:active{filter:brightness(1.04)!important}
  html.layout-desktop a[target="_blank"]:active :is(span,strong,img,svg){transform:translate3d(1px,1px,0) scale(.985)!important}

  /* The trading-site reset intentionally removes the old sweeping overlay.
     Keep one quiet underline for the real Succubus destination without
     moving its label or changing the compact layout. */
  html.layout-desktop .trade-site a[href]{
    background-image:linear-gradient(90deg,var(--star-mid),transparent)!important;
    background-repeat:no-repeat!important;
    background-position:0 100%!important;
    background-size:0 1px!important;
    transition:background-size var(--motion-normal) var(--motion-ease)!important;
  }
  html.layout-desktop .trade-site a[href]:is(:hover,:focus-visible){background-size:100% 1px!important}

  html.layout-desktop .lookup-icon:hover svg,html.layout-desktop .lookup-icon:focus-visible svg{
    animation:motion-external-search 720ms cubic-bezier(.16,1,.3,1) both;
  }
  html.layout-desktop .footer-social a:hover img,html.layout-desktop .footer-social a:focus-visible img{
    transform:translate3d(0,-5px,0) scale(1.08) rotate(-2deg)!important;
  }
  @keyframes motion-external-search{
    0%,100%{transform:none}
    42%{transform:translate3d(2px,-2px,0) rotate(-8deg) scale(1.12)}
    72%{transform:translate3d(-1px,1px,0) rotate(3deg) scale(.98)}
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.motion-ready .reveal,html.motion-ready .reveal.visible{opacity:1!important;visibility:visible!important;filter:none!important;clip-path:none!important;transform:none!important}
  .motion-interactive.is-motion-pressed,.wandering-star.is-visible{animation:none!important;transform:none!important}
  .story-bridge .bridge-line{transform:none!important}.story-bridge .bridge-star,.story-bridge i{display:none!important}
}