/* LAWTER v5.4 MOTION & INTERACTION POLISH
   Restrained architectural motion. Progressive enhancement only.
   All essential content remains usable with motion disabled. */
:root{
  --motion-fast:180ms;
  --motion-ui:280ms;
  --motion-medium:520ms;
  --motion-slow:820ms;
  --motion-cinematic:1100ms;
  --motion-ease:cubic-bezier(.22,.78,.22,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease-soft:cubic-bezier(.33,1,.68,1);
}

/* Progressive same-origin page transitions. Unsupported browsers fall back normally. */
@view-transition{navigation:auto}
.brand{view-transition-name:lawter-brand}
.hero-structure,.service-hero-media{view-transition-name:lawter-stage}
::view-transition-group(root){animation-duration:420ms;animation-timing-function:var(--motion-ease-out)}
::view-transition-old(root){animation:lawter-page-old 260ms ease both}
::view-transition-new(root){animation:lawter-page-new 420ms var(--motion-ease-out) both}
::view-transition-group(lawter-brand){animation-duration:480ms;animation-timing-function:var(--motion-ease-out)}
::view-transition-old(lawter-stage){animation:lawter-stage-old 260ms ease both}
::view-transition-new(lawter-stage){animation:lawter-stage-new 520ms var(--motion-ease-out) both}
@keyframes lawter-page-old{to{opacity:0;filter:blur(2px)}}
@keyframes lawter-page-new{from{opacity:0;clip-path:inset(0 0 3.5% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes lawter-stage-old{to{opacity:.12;transform:scale(.985)}}
@keyframes lawter-stage-new{from{opacity:0;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}

/* Header / popover choreography */
.site-header{transition:border-color var(--motion-ui),box-shadow var(--motion-ui),background var(--motion-ui),transform var(--motion-ui) var(--motion-ease-out)}
.cap-menu[open]>.cap-panel{transform-origin:50% 0;animation:lawter-panel-in 360ms var(--motion-ease-out) both}
.lang-menu[open]>.lang-panel{transform-origin:100% 0;animation:lawter-pop-in 260ms var(--motion-ease-out) both}
@keyframes lawter-panel-in{from{opacity:0;transform:translateY(-9px) scaleY(.985)}to{opacity:1;transform:none}}
@keyframes lawter-pop-in{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.cap-panel-media{isolation:isolate}
.cap-panel-media img{transition:opacity var(--motion-fast),transform var(--motion-medium) var(--motion-ease-out),filter var(--motion-medium)}
.cap-panel-media.is-switching img{opacity:.16;transform:scale(1.025);filter:saturate(.55) contrast(1.08)}
.cap-panel-caption>*{transition:opacity var(--motion-fast),transform var(--motion-ui) var(--motion-ease-out)}
.cap-panel-media.is-switching .cap-panel-caption>*{opacity:.22;transform:translateY(5px)}

/* Architectural button motion: no bouncing, only a restrained lift + light sweep. */
.btn,.nav-cta,.cookie-btn{
  --mag-x:0px;--mag-y:0px;--motion-lift:0px;
  position:relative;isolation:isolate;overflow:hidden;
  transform:translate3d(var(--mag-x),calc(var(--mag-y) + var(--motion-lift)),0);
  transition:transform var(--motion-ui) var(--motion-ease-out),border-color var(--motion-ui),background var(--motion-ui),color var(--motion-ui),box-shadow var(--motion-ui);
}
.btn:hover,.nav-cta:hover{--motion-lift:-2px}
.btn-primary::after,.nav-cta::after,.cookie-btn-primary::after{
  content:"";position:absolute;z-index:0;top:-35%;bottom:-35%;left:-42%;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg) translateX(0);opacity:0;pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .btn-primary:hover::after,.btn-primary:focus-visible::after,.nav-cta:hover::after,.nav-cta:focus-visible::after,.cookie-btn-primary:hover::after,.cookie-btn-primary:focus-visible::after{animation:lawter-sheen 720ms var(--motion-ease-out) both}
}
@keyframes lawter-sheen{0%{opacity:0;transform:skewX(-18deg) translateX(0)}25%{opacity:.8}100%{opacity:0;transform:skewX(-18deg) translateX(520%)}}

/* Block-level reveal choreography without splitting text into inaccessible fragments. */
.reveal{transition-duration:760ms;transition-timing-function:var(--motion-ease-out)}
.reveal>.eyebrow::before,.reveal .eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform 680ms 90ms var(--motion-ease-out)}
.reveal.is-visible>.eyebrow::before,.reveal.is-visible .eyebrow::before{transform:scaleX(1)}
.hero-copy.reveal h1,.hero-copy.reveal .hero-lead,.hero-copy.reveal .hero-actions,.hero-copy.reveal .hero-ledger{
  opacity:0;transform:translateY(18px);transition:opacity 620ms var(--motion-ease-out),transform 720ms var(--motion-ease-out)
}
.hero-copy.reveal.is-visible h1{opacity:1;transform:none;transition-delay:80ms}
.hero-copy.reveal.is-visible .hero-lead{opacity:1;transform:none;transition-delay:160ms}
.hero-copy.reveal.is-visible .hero-actions{opacity:1;transform:none;transition-delay:230ms}
.hero-copy.reveal.is-visible .hero-ledger{opacity:1;transform:none;transition-delay:300ms}

/* Staggered groups are already inside .reveal containers, so no content is JS-dependent. */
.reveal .motion-stagger{opacity:.12;transform:translateY(14px);transition:opacity 520ms var(--motion-ease-out),transform 620ms var(--motion-ease-out);transition-delay:calc(var(--motion-order,0) * 58ms + 90ms)}
.reveal.is-visible .motion-stagger{opacity:1;transform:none}

/* Structural section line: GPU transform + terminal champagne node. */
[data-rail-section]>.section-signature-line{
  width:min(38.2%,620px)!important;transform:scaleX(0);transform-origin:left center;
  transition:transform 920ms var(--motion-ease-out)!important;overflow:visible;
}
[data-rail-section]>.section-signature-line::after{
  content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border:1px solid var(--gold-300);background:var(--navy-950);transform:rotate(45deg) scale(0);opacity:0;
  transition:transform 320ms 650ms var(--motion-ease-out),opacity 200ms 650ms;
}
[data-rail-section].is-section-active>.section-signature-line{transform:scaleX(1)}
[data-rail-section].is-section-active>.section-signature-line::after{transform:rotate(45deg) scale(1);opacity:1}

/* Image reveal v2: keep the existing clipping concept but add quiet depth, not flashy effects. */
[data-media-reveal]{will-change:clip-path}
[data-media-reveal] img{filter:saturate(.72) contrast(1.035);transition:transform var(--motion-cinematic) var(--motion-ease-out),filter var(--motion-slow) var(--motion-ease-out)}
[data-media-reveal].is-media-visible img{filter:saturate(.88) contrast(1.02)}
.about-photo-frame img{transform:none;transition:filter var(--motion-slow) var(--motion-ease-out)}
.service-hero-media img{transform:translate3d(0,var(--media-y,0px),0) scale(1.018);transition:transform 260ms linear,filter var(--motion-slow) var(--motion-ease-out)}

/* Fine-pointer depth only. Max tilt stays intentionally under 1.25 degrees. */
.motion-depth{--tilt-x:0deg;--tilt-y:0deg;--depth-x:0px;--depth-y:0px;transform:perspective(1300px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(var(--depth-x),var(--depth-y),0);transition:transform 520ms var(--motion-ease-out);transform-style:preserve-3d}
.motion-depth.is-tracking{transition:transform 110ms linear}
.hero-structure.motion-depth .structure-mark{transform:translate3d(calc(var(--depth-x) * -.45),calc(var(--depth-y) * -.45),18px);transition:transform 180ms linear}
.service-hero-media.motion-depth figcaption{transform:translateZ(22px)}

/* Hero active sector: polished focus without layout shift. */
.structure-pillar{transform-origin:50% 100%}
.structure-pillar::after{content:"";position:absolute;left:12%;right:12%;bottom:-13px;height:1px;background:var(--gold-300);transform:scaleX(0);opacity:0;transition:transform 360ms var(--motion-ease-out),opacity 220ms}
.structure-pillar.is-active::after,.structure-pillar:hover::after,.structure-pillar:focus-visible::after{transform:scaleX(1);opacity:.8}
.hero-sector-preview{transition:border-color var(--motion-ui),box-shadow var(--motion-ui),background var(--motion-ui)}
.hero-structure:focus-within .hero-sector-preview,.hero-structure:hover .hero-sector-preview{border-color:rgba(237,207,149,.42);box-shadow:0 18px 48px rgba(0,0,0,.31),0 0 0 1px rgba(237,207,149,.04)}

/* Capability matrix: image crossfade gains controlled scale and active row marker. */
.capability-media-image{transform:scale(1.035);filter:saturate(.70);transition:opacity 440ms var(--motion-ease-out),transform 880ms var(--motion-ease-out),filter 620ms var(--motion-ease-out)}
.capability-media-image.is-active{transform:scale(1);filter:saturate(.88)}
.capability-row>a{transition:background var(--motion-ui),padding-left var(--motion-ui) var(--motion-ease-out),color var(--motion-ui)}
@media(hover:hover) and (pointer:fine){.capability-row:hover>a{padding-left:10px}}

/* Operating model / process lines now draw into place as their parent reveal becomes active. */
.operating-steps::before{transform:scaleY(0);transform-origin:top;transition:transform 980ms 120ms var(--motion-ease-out)}
.operating-steps.reveal.is-visible::before{transform:scaleY(1)}
.process-line::before{transform:scaleX(0);transform-origin:left;transition:transform 1050ms 100ms var(--motion-ease-out)}
.process-line.reveal.is-visible::before{transform:scaleX(1)}
.process-step>span{transition:border-color var(--motion-ui),background var(--motion-ui),color var(--motion-ui),transform var(--motion-ui) var(--motion-ease-out)}
.process-line.reveal.is-visible .process-step>span{animation:lawter-node-in 460ms var(--motion-ease-out) both;animation-delay:calc(var(--motion-order,0) * 105ms + 280ms)}
@keyframes lawter-node-in{from{transform:scale(.75);background:var(--gold-500);color:var(--navy-950)}to{transform:scale(1)}}

/* Cards: depth is expressed through border/light, never exaggerated floating. */
.engagement-card,.evidence-card,.crossnav-card,.proof-matrix article{transition:transform var(--motion-ui) var(--motion-ease-out),border-color var(--motion-ui),background var(--motion-ui),box-shadow var(--motion-ui)}
@media(hover:hover) and (pointer:fine){
  .engagement-card:hover,.evidence-card:hover,.crossnav-card:hover,.proof-matrix article:hover{transform:translateY(-3px);border-color:rgba(237,207,149,.36);box-shadow:0 22px 54px rgba(0,0,0,.18)}
  .evidence-card:hover .evidence-media img,.crossnav-card:hover>img{transform:scale(1.025)}
}
.evidence-media img,.crossnav-card>img{transition:transform 760ms var(--motion-ease-out),filter 520ms var(--motion-ease-out)}

/* Footer closes the structural narrative. */
.footer-structural i{transform:scaleY(.08);transform-origin:top;opacity:.15;transition:transform 760ms var(--motion-ease-out),opacity 420ms}
.site-footer.motion-inview .footer-structural i{transform:scaleY(1);opacity:1}
.site-footer.motion-inview .footer-structural i:nth-child(1){transition-delay:40ms}.site-footer.motion-inview .footer-structural i:nth-child(2){transition-delay:95ms}.site-footer.motion-inview .footer-structural i:nth-child(3){transition-delay:150ms}.site-footer.motion-inview .footer-structural i:nth-child(4){transition-delay:205ms}.site-footer.motion-inview .footer-structural i:nth-child(5){transition-delay:260ms}
.footer-wordmark{transition:letter-spacing 900ms var(--motion-ease-out),color 900ms}
.site-footer.motion-inview .footer-wordmark{letter-spacing:.135em;color:rgba(194,158,106,.095)}

/* Legal/privacy pages should feel equally polished without excessive movement. */
.legal-card{transition:border-color var(--motion-ui),box-shadow var(--motion-medium)}
.legal-card.motion-inview{border-color:rgba(194,158,106,.30);box-shadow:0 28px 80px rgba(0,0,0,.16)}

/* Touch/tablet: keep motion meaningful and cheap. */
@media(max-width:960px),(hover:none),(pointer:coarse){
  .motion-depth,.motion-depth.is-tracking{transform:none!important;transition:none!important}
  .about-photo-frame img,.service-hero-media img{transform:none!important}
  .btn,.nav-cta,.cookie-btn{--mag-x:0px!important;--mag-y:0px!important}
  .reveal .motion-stagger{transition-delay:calc(var(--motion-order,0) * 34ms + 50ms)}
}

/* Accessibility: the system preference wins over the visual layer. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001ms!important;animation-delay:0ms!important}
  .cap-menu[open]>.cap-panel,.lang-menu[open]>.lang-panel{animation:none!important}
  .btn,.nav-cta,.cookie-btn,.cap-panel-media img,.cap-panel-caption>*,.hero-copy.reveal h1,.hero-copy.reveal .hero-lead,.hero-copy.reveal .hero-actions,.hero-copy.reveal .hero-ledger,.reveal .motion-stagger,[data-rail-section]>.section-signature-line,[data-rail-section]>.section-signature-line::after,[data-media-reveal] img,.about-photo-frame img,.service-hero-media img,.motion-depth,.structure-pillar::after,.capability-media-image,.operating-steps::before,.process-line::before,.process-step>span,.engagement-card,.evidence-card,.crossnav-card,.proof-matrix article,.footer-structural i,.footer-wordmark{animation:none!important;transition:none!important;transform:none!important}
  .hero-copy.reveal h1,.hero-copy.reveal .hero-lead,.hero-copy.reveal .hero-actions,.hero-copy.reveal .hero-ledger,.reveal .motion-stagger{opacity:1!important}
  [data-rail-section]>.section-signature-line{transform:scaleX(1)!important}
  [data-rail-section]>.section-signature-line::after{opacity:1!important;transform:rotate(45deg) scale(1)!important}
  .operating-steps::before,.process-line::before{transform:none!important}
}