/* ==========================================================================
   Visual effects layer (2026-10). Purely presentational: no layout changes.
   One level, "bold": <html data-fx="bold"> is printed by inc/effects.php.
   Visitors who prefer reduced motion get none of it.
   ========================================================================== */
:root{
 --fx-ease:cubic-bezier(.2,.7,.2,1);
 --fx-dur:.75s;
 --fx-gradient:linear-gradient(90deg,var(--tsco-blue),var(--tsco-teal) 55%,var(--tsco-lime));
 /* 8-point star lattice (khatam), drawn in white; opacity is set where it is used. */
 --fx-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M36 14 51.6 20.4 58 36 51.6 51.6 36 58 20.4 51.6 14 36 20.4 20.4Z'/%3E%3Cpath d='M20.4 20.4H51.6V51.6H20.4Z M36 14 58 36 36 58 14 36Z'/%3E%3Cpath d='M0 0 14 14M72 0 58 14M0 72 14 58M72 72 58 58'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:no-preference){


/* Scroll reveal: effects.js adds .fx-reveal, then .fx-in when the element enters view,
   and removes both when the transition ends so hover transforms keep working. */
html[data-fx] .fx-reveal{opacity:0;transform:translate3d(0,26px,0)}
html[data-fx] .fx-reveal.fx-in{opacity:1;transform:none;transition:opacity var(--fx-dur) var(--fx-ease),transform var(--fx-dur) var(--fx-ease);transition-delay:calc(var(--fx-i,0) * 70ms)}

/* Section titles: a short lime bar draws in under centred headings. */
html[data-fx] :is(.tsco-section>h2.has-text-align-center,.tsco-lab-head:not(.tsco-lab-head--left)>h2,.tsco-reference-lab-solutions .text-center>h2){position:relative}
html[data-fx] .tsco-section>h2.has-text-align-center::after,
html[data-fx] .tsco-lab-head:not(.tsco-lab-head--left)>h2::after,
html[data-fx] .tsco-reference-lab-solutions .text-center>h2::after{
 content:"";position:absolute;left:50%;bottom:-9px;width:48px;height:3px;margin-left:-24px;background:var(--tsco-lime);
 transform:scaleX(0);transform-origin:center;transition:transform .9s var(--fx-ease) .15s}
html[data-fx] .fx-seen>h2::after,html[data-fx] h2.fx-seen::after{transform:scaleX(1)}

/* Hero: staged entrance. */
html[data-fx] .fx-hero>*{animation:fx-rise .9s var(--fx-ease) both;animation-delay:calc(var(--fx-i,0) * 110ms + .1s)}
@keyframes fx-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* Home hero photos: slow zoom while a slide is showing. */
html[data-fx] .tsco-hero-slide .wp-block-cover__image-background{transform-origin:60% 40%}
html[data-fx] .tsco-hero-slide.is-active .wp-block-cover__image-background{animation:fx-kenburns 14s ease-out both}
@keyframes fx-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Header picks up depth once the page scrolls. */
html[data-fx] .tsco-header{transition:box-shadow .3s ease}
html[data-fx] .tsco-header.fx-scrolled{box-shadow:0 10px 30px rgba(4,24,36,.28)}

/* Logo tiles lift on hover. */
@media (hover:hover) and (pointer:fine){
 html[data-fx] :is(.tsco-logo-grid,.tsco-client-grid,.tsco-lab-tiles,.tsco-lab-customer-grid)>:is(.wp-block-image,p){transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
 html[data-fx] :is(.tsco-logo-grid,.tsco-client-grid,.tsco-lab-tiles,.tsco-lab-customer-grid)>:is(.wp-block-image,p):hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(13,50,71,.12);border-color:var(--tsco-teal)}
 html[data-fx] .tsco-lab-board-card{transition:transform .3s ease,box-shadow .3s ease}
 html[data-fx] .tsco-lab-board-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(13,50,71,.1)}
 html[data-fx] .tsco-lab-board-card .tsco-lab-portrait img{transition:transform .5s var(--fx-ease)}
 html[data-fx] .tsco-lab-board-card:hover .tsco-lab-portrait img{transform:scale(1.05)}
}


/* Geometric pattern on the dark bands. */
html[data-fx] :is(.tsco-stats,.tsco-lab-stats,.tsco-location-stats,.tsco-enquiry,.tsco-footer){position:relative;isolation:isolate}
html[data-fx] :is(.tsco-stats,.tsco-lab-stats,.tsco-location-stats,.tsco-enquiry,.tsco-footer)::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--fx-pattern);background-size:72px 72px;opacity:.07;
 -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 35%,#000 65%,transparent 100%);mask-image:linear-gradient(100deg,transparent 0%,#000 35%,#000 65%,transparent 100%)}
html[data-fx] .tsco-hero-slide::after,
html[data-fx] :is(.tsco-about-hero,.tsco-labs-hero,.tsco-services-hero,.tsco-locations-hero,.tsco-contact-hero,.tsco-news-hero,.tsco-detail-hero)::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--fx-pattern);background-size:72px 72px;opacity:.06;
 -webkit-mask-image:linear-gradient(270deg,#000 0%,transparent 60%);mask-image:linear-gradient(270deg,#000 0%,transparent 60%)}
html[data-fx] :is(.tsco-about-hero,.tsco-labs-hero,.tsco-services-hero,.tsco-locations-hero,.tsco-contact-hero,.tsco-news-hero,.tsco-detail-hero){position:relative}
html[data-fx] .tsco-hero-slide .wp-block-cover__inner-container{z-index:2}
html[data-fx] :is(.tsco-about-hero,.tsco-labs-hero,.tsco-services-hero,.tsco-locations-hero,.tsco-contact-hero,.tsco-news-hero,.tsco-detail-hero)>*:not(.tsco-detail-hero__bg){position:relative;z-index:2}

/* Photos wipe in. */
html[data-fx] .fx-wipe{clip-path:inset(0 100% 0 0)}
html[data-fx] .fx-wipe.fx-in{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--fx-ease)}

/* Buttons: light sweep on hover. */
html[data-fx] :is(.wp-block-button__link,.tsco-reference-cta){position:relative;overflow:hidden;isolation:isolate}
html[data-fx] :is(.wp-block-button__link,.tsco-reference-cta)::after{
 content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
@media (hover:hover){html[data-fx] :is(.wp-block-button__link,.tsco-reference-cta):hover::after{left:120%}}

/* Cards: brand gradient line sweeps across the top on hover. */
html[data-fx] :is(.tsco-card,.tsco-lab-service-card,.tsco-lab-portfolio-card,.tsco-lab-chem-card,.tsco-ambition-grid article,.tsco-lab-board-card){position:relative}
html[data-fx] :is(.tsco-card,.tsco-lab-service-card,.tsco-lab-portfolio-card,.tsco-lab-chem-card,.tsco-ambition-grid article,.tsco-lab-board-card)::after{
 content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--fx-gradient);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--fx-ease);pointer-events:none}
@media (hover:hover){html[data-fx] :is(.tsco-card,.tsco-lab-service-card,.tsco-lab-portfolio-card,.tsco-lab-chem-card,.tsco-ambition-grid article,.tsco-lab-board-card):hover::after{transform:scaleX(1)}}

/* Reading progress line. */
html[data-fx] .fx-progress{position:fixed;top:0;left:0;right:0;z-index:100000;height:3px;background:var(--fx-gradient);transform-origin:left;transform:scaleX(var(--fx-p,0));pointer-events:none}
html[data-fx] body.admin-bar .fx-progress{top:32px}
@media (max-width:782px){html[data-fx] body.admin-bar .fx-progress{top:46px}}

} /* prefers-reduced-motion */

@media print{.fx-progress{display:none}}