/* RealToday Motion Layer
   Motion-only overrides. No width/height/grid/padding/margin/position values are changed. */

/* 1) Scroll reveal — restrained, composited only */
.motion-ready .site-shell .reveal{
  opacity:0!important;
  transform:translate3d(0,18px,0)!important;
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1)!important;
  will-change:opacity,transform;
}
.motion-ready .site-shell .reveal.visible{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  will-change:auto;
}
.motion-ready .site-shell .eyebrow.reveal{transform:translate3d(0,9px,0)!important}
.motion-ready .site-shell .eyebrow.reveal.visible{transform:translate3d(0,0,0)!important}
.motion-ready .site-shell .reveal[data-delay="1"]{transition-delay:.07s!important}
.motion-ready .site-shell .reveal[data-delay="2"]{transition-delay:.14s!important}
.motion-ready .site-shell .reveal[data-delay="3"]{transition-delay:.21s!important}
.motion-ready .site-shell .reveal[data-delay="4"]{transition-delay:.28s!important}
.motion-ready .site-shell .reveal[data-delay="5"]{transition-delay:.35s!important}
.motion-ready .site-shell .reveal[data-delay="6"]{transition-delay:.42s!important}

/* 2) Header/nav micro interaction */
.site-shell .main-nav a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:var(--point);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
  pointer-events:none;
}
.site-shell .main-nav a:hover::after,
.site-shell .main-nav a.active::after{transform:scaleX(1);opacity:1}
.site-shell .header{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease!important}

/* 3) Project tabs + project content */
.site-shell .project-tab::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:var(--point);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .24s ease;
}
.site-shell .project-tab.active::after{transform:scaleX(1);opacity:1}
.site-shell .project-tab{transition:color .25s ease,opacity .25s ease!important}
.site-shell .project-tab:not(.active):hover{color:var(--point)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* 4) Cards: visual lift only — layout dimensions untouched */
.motion-ready .site-shell .metric-card.reveal.visible,
.motion-ready .site-shell .article-card.reveal.visible,
.motion-ready .site-shell .strategy-card.reveal.visible,
.motion-ready .site-shell .exp-card.reveal.visible{
  transition-property:opacity,transform,box-shadow,border-color!important;
}
.motion-ready .site-shell .metric-card.reveal.visible:hover{
  transform:translate3d(0,-3px,0)!important;
  box-shadow:0 14px 32px rgba(20,20,36,.07);
  border-color:#aeb0b8;
}
.motion-ready .site-shell .article-card.reveal.visible:hover{
  transform:translate3d(0,-4px,0)!important;
  box-shadow:0 16px 34px rgba(20,20,36,.08);
  border-color:#aaaab2;
}
.motion-ready .site-shell .strategy-card.reveal.visible:hover{
  transform:translate3d(0,-5px,0)!important;
  box-shadow:0 18px 38px rgba(24,13,92,.12);
}
.site-shell .strategy-card img{
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .35s ease!important;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.site-shell .strategy-card:hover img{transform:translate3d(4px,-4px,0) scale(1.025)}

/* 5) READ circles — keep existing interaction, soften timing */
.site-shell .signal{
  transition:background .38s ease,border-color .38s ease,box-shadow .42s ease,transform .42s cubic-bezier(.22,.61,.36,1),color .3s ease!important;
}
.site-shell .signal-default,
.site-shell .signal-hover-copy{transition:opacity .32s ease,transform .42s cubic-bezier(.22,.61,.36,1)!important}

/* 6) CASE — one board, staged internals */
.motion-ready .site-shell .case-board .case-pill,
.motion-ready .site-shell .case-board .case-stage-label,
.motion-ready .site-shell .case-board .case-main,
.motion-ready .site-shell .case-board .case-grid.three,
.motion-ready .site-shell .case-board .case-grid.wide,
.motion-ready .site-shell .case-board .case-result-list,
.motion-ready .site-shell .case-board .case-final,
.motion-ready .site-shell .case-board .arrow-down{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity .58s ease,transform .68s cubic-bezier(.22,.61,.36,1)!important;
}
.motion-ready .site-shell .case-board.visible .case-pill{opacity:1;transform:none;transition-delay:.10s!important}
.motion-ready .site-shell .case-board.visible .case-stage-label.stage-initial{opacity:1;transform:none;transition-delay:.15s!important}
.motion-ready .site-shell .case-board.visible .case-main{opacity:1;transform:none;transition-delay:.19s!important}
.motion-ready .site-shell .case-board.visible .case-grid.three{opacity:1;transform:none;transition-delay:.25s!important}
.motion-ready .site-shell .case-board.visible .arrow-1{opacity:1;transform:translateX(-50%);transition-delay:.31s!important}
.motion-ready .site-shell .case-board.visible .stage-response{opacity:1;transform:none;transition-delay:.34s!important}
.motion-ready .site-shell .case-board.visible .case-grid.wide{opacity:1;transform:none;transition-delay:.39s!important}
.motion-ready .site-shell .case-board.visible .arrow-2{opacity:1;transform:translateX(-50%);transition-delay:.45s!important}
.motion-ready .site-shell .case-board.visible .stage-direction{opacity:1;transform:none;transition-delay:.48s!important}
.motion-ready .site-shell .case-board.visible .case-result-list{opacity:1;transform:none;transition-delay:.53s!important}
.motion-ready .site-shell .case-board.visible .arrow-3{opacity:1;transform:translateX(-50%);transition-delay:.59s!important}
.motion-ready .site-shell .case-board.visible .stage-final{opacity:1;transform:none;transition-delay:.62s!important}
.motion-ready .site-shell .case-board.visible .case-final{opacity:1;transform:none;transition-delay:.67s!important}

/* 7) Experience cards */
.site-shell .exp-image{overflow:hidden}
.site-shell .exp-image img{
  transform:scale(1)!important;
  transition:transform .62s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform;
}
.site-shell .exp-overlay{transition:opacity .34s ease!important}
.site-shell .exp-card:hover .exp-image img{transform:scale(1.025)!important}
.site-shell .year-btn{transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease!important}
.site-shell .year-btn:hover{transform:translate3d(0,-1px,0)}

/* 8) Footer / utility actions */
.site-shell .contact-btn{
  transition:transform .34s cubic-bezier(.22,.61,.36,1),box-shadow .34s ease,filter .34s ease!important;
}
.site-shell .contact-btn:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 26px rgba(79,56,255,.24);filter:brightness(1.04)}
.site-shell .company-download{transition:opacity .25s ease!important}
.site-shell .company-download:hover{opacity:.72}
.site-shell .more{transition:transform .3s ease,color .3s ease!important}
.site-shell .more:hover{transform:translate3d(0,-2px,0);color:var(--point)}

/* Respect user/browser motion preference */
@media (prefers-reduced-motion:reduce){
  .motion-ready .site-shell .reveal,
  .motion-ready .site-shell .reveal.visible,
  .motion-ready .site-shell .case-board *,
  .site-shell .project-swap,
  .site-shell .strategy-card img,
  .site-shell .exp-image img,
  .site-shell .signal,
  .site-shell .signal-default,
  .site-shell .signal-hover-copy,
  .site-shell .contact-btn,
  .site-shell .year-btn{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}

/* Project tab changes slide only the media; background/layout remain fixed. */
.site-shell .project-media-stage{contain:paint}