/* TCP motion layer: one place for hover, press, menu and page-change motion on the public site.
   Gentle values, CSS only, switched off for visitors who ask for reduced motion, and hover lifts only where there is a real pointer. */
:root{--tcp-ease:cubic-bezier(.2,.7,.2,1)}

/* ---- page change: a quick cross-fade while the header stays put ---- */
@view-transition{navigation:auto}
@keyframes tcp-vt-out{to{opacity:0}}
@keyframes tcp-vt-in{from{opacity:0}}
::view-transition-old(root){animation:tcp-vt-out .16s ease both}
::view-transition-new(root){animation:tcp-vt-in .3s var(--tcp-ease) both}
#header{view-transition-name:tcp-header}
::view-transition-group(tcp-header),::view-transition-old(tcp-header),::view-transition-new(tcp-header){animation:none}

@media (prefers-reduced-motion:no-preference){
  /* ---- smooth transitions (what moves, and how fast) ---- */
  body .tcp-card,body .tcp-editorial-card,body .tcp-enquiry-channels .tcp-enquiry-channel{transition:transform .45s var(--tcp-ease),box-shadow .45s var(--tcp-ease),border-color .3s,background-color .3s}
  body .tcp-card img,body .tcp-editorial-card img,body .tcp-training-thumb img,body .tcp-training-story-image img{transition:transform .8s var(--tcp-ease)}
  body .tcp-button,body .tcp-chat,body .tcp-language-trigger,body .tcp-menu,body #header .tcp-nav a.tcp-nav-cta{transition:transform .25s var(--tcp-ease),filter .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease),background-color .2s,color .2s,border-color .2s}
  body .tcp-project-section .tcp-project-steps>li>a{transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease),background-color .2s,color .2s,border-color .2s}
  body .tcp-nav .tcp-nav-category-child,body .tcp-nav .tcp-nav-products-all{transition:transform .3s var(--tcp-ease),background-color .2s,color .2s}

  /* ---- Products pop-up eases in instead of appearing at once ---- */
  @keyframes tcp-menu-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
  body .tcp-nav-products[open]>.tcp-nav-products-menu,body .tcp-nav-products:hover>.tcp-nav-products-menu,body .tcp-nav-products:focus-within>.tcp-nav-products-menu{transform-origin:top center;animation:tcp-menu-in .22s var(--tcp-ease) both}
}

/* ---- hover (mouse or trackpad only, so touch screens never get a stuck state) ---- */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  /* cards: a small lift, a softer wider shadow, the photo zooms a touch */
  body .tcp-card:hover,body .tcp-editorial-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,50,76,.12);border-color:#cfdce8}
  body .tcp-card:hover img,body .tcp-editorial-card:hover img{transform:scale(1.03)}
  /* product cards on the blueprint: the product itself rises slightly */
  body .tcp-card[data-product]:hover .tcp-cutout-frame img{transform:translateY(-3px) scale(1.03)}
  body .tcp-training-thumb:hover img,body .tcp-training-story-image:hover img{transform:scale(1.03)}
  body .tcp-enquiry-channels .tcp-enquiry-channel:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,50,76,.10)}
  /* menu items glide a little */
  body .tcp-nav .tcp-nav-category-child:hover,body .tcp-nav .tcp-nav-products-all:hover{transform:translateX(2px)}
  /* buttons: lift 1 px, shadow appears */
  body .tcp-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(18,50,76,.16)}
  body .tcp-button.secondary:hover{box-shadow:0 6px 16px rgba(18,50,76,.10)}
  body #header .tcp-nav a.tcp-nav-cta:hover{transform:translateY(-1px);filter:drop-shadow(0 6px 12px rgba(27,117,187,.30))}
  body .tcp-chat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(9,99,85,.30)}
}


/* ---- icons: the arrow is an SVG, and each icon type has its own small hover gesture (label stays still) ---- */
.tcp-arrow{display:inline-flex;width:1em;height:1em;margin-left:.1em;vertical-align:-.14em;flex:none}
.tcp-arrow-svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  @keyframes tcp-ring{0%,100%{transform:rotate(0)}18%{transform:rotate(-16deg)}36%{transform:rotate(14deg)}54%{transform:rotate(-9deg)}72%{transform:rotate(5deg)}}
  @keyframes tcp-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px)}65%{transform:translateY(0)}82%{transform:translateY(-1.5px)}}
  .tcp-arrow,body .tcp-svg-icon[data-tcp-icon]{transition:transform .35s var(--tcp-ease)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  /* → slides right */
  a:hover .tcp-arrow:not(.tcp-arrow--ne),.tcp-card:hover .tcp-arrow:not(.tcp-arrow--ne),.tcp-editorial-card:hover .tcp-arrow:not(.tcp-arrow--ne),button:hover .tcp-arrow:not(.tcp-arrow--ne){transform:translateX(4px)}
  /* ↗ moves up and right */
  a:hover .tcp-arrow--ne,button:hover .tcp-arrow--ne{transform:translate(3px,-3px)}
  /* phone rings once */
  a:hover .tcp-svg-icon[data-tcp-icon="phone"],button:hover .tcp-svg-icon[data-tcp-icon="phone"]{animation:tcp-ring .6s var(--tcp-ease) 1}
  /* map pin hops once */
  a:hover .tcp-svg-icon[data-tcp-icon="location"],button:hover .tcp-svg-icon[data-tcp-icon="location"]{animation:tcp-hop .55s var(--tcp-ease) 1}
  /* mail and WhatsApp tilt and grow */
  a:hover .tcp-svg-icon[data-tcp-icon="email"],a:hover .tcp-svg-icon[data-tcp-icon="whatsapp"]{transform:rotate(-8deg) scale(1.1)}
}

/* ---- press (works with a mouse and with touch; must come after the hover rules) ---- */
@media (prefers-reduced-motion:no-preference){
  body .tcp-button:active,body #header .tcp-nav a.tcp-nav-cta:active,body .tcp-chat:active,body .tcp-language-trigger:active,body .tcp-menu:active{transform:scale(.97)}
  body .tcp-card:active,body .tcp-editorial-card:active{transform:scale(.99)}
  body .tcp-project-section .tcp-project-steps>li>a:active,body .tcp-project-section .tcp-project-steps>li>a:hover:active{transform:scale(.97)!important}
}

/* ---- icon colour: inside a filled or hovered button the icon takes the label colour, so it never disappears (white on blue, dark on orange) ---- */
body .tcp-button:not(.secondary) .tcp-svg-icon,body .tcp-button:hover .tcp-svg-icon,body .tcp-text-link:hover .tcp-svg-icon,body .tcp-text-link:focus-visible .tcp-svg-icon{color:inherit!important}
@media (prefers-reduced-motion:no-preference){body .tcp-svg-icon{transition:transform .35s var(--tcp-ease),color .2s}}

/* ---- reduced motion: no movement at all ---- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}