/* PT Site Refresh: the ePATH design (colony-counter grid + glow background, path + petri dish, carbon-compound structures).
   Loaded on every My Account screen, the cart and the PT Calendar (body class ptsr-art, added by PTSR_Epath). CSS only; the artwork is static SVG
   from includes/epath-art.php, aria-hidden, animated here, and off for prefers-reduced-motion. DRAFT 07-Nov-2026. */

/* ---- ePATH account pages: colony-counter grid + glow, path + petri dish, carbon-compound structures (Option 4 + C, chosen by Mukesh 06-Nov-2026; DRAFT) ----
   Every My Account screen (login, register, dashboard, results, orders, addresses, details): the band loses the dots and one background runs from under the
   header down the page, fading into the plain ground (#primary). The structures sit in the margins behind the content (login: centred frame; logged in: wide
   frame, shown only where the margins are wide enough). Pure decoration (aria-hidden SVG), CSS-animated, off for prefers-reduced-motion. Extended from the
   login screen to all account screens on 07-Nov-2026 (Mukesh). */
html body.ptsr.ptsr-art .entry-content > .kb-row-layout-wrap:first-child{background:transparent !important;overflow:visible;}
body.ptsr.ptsr-art #primary{
	position:relative;isolation:isolate;overflow:clip;background-color:#EDF2F7;background-repeat:no-repeat;background-size:100% 860px;
	background-image:radial-gradient(640px 340px at 6% -4%,rgba(43,108,176,.18),transparent 70%),radial-gradient(560px 380px at 94% 8%,rgba(100,170,83,.26),transparent 70%),linear-gradient(180deg,#F6F9FC 0%,#E4ECF5 46%,#EDF2F7 100%);
}
body.ptsr.ptsr-art #primary::before{
	content:"";position:absolute;left:0;right:0;top:0;height:860px;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%);
	background-image:linear-gradient(rgba(19,64,149,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(19,64,149,.13) 1px,transparent 1px),linear-gradient(rgba(19,64,149,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(19,64,149,.055) 1px,transparent 1px);
	background-size:110px 110px,110px 110px,22px 22px,22px 22px;background-position:-1px -1px;
}
body.ptsr .ptsr-epath__sub,
body.ptsr.woocommerce-account .entry-content h1.kt-adv-heading1123_e0ac02-1c{position:relative;z-index:1;}
/* path + dish: drawn in the title band, to the right of the title */
body.ptsr .ptsr-epath__art{position:absolute;left:0;right:-16px;top:-30px;height:200px;z-index:0;pointer-events:none;}
body.ptsr .ptsr-dish{position:absolute;right:0;top:8px;width:190px;height:190px;filter:drop-shadow(0 8px 12px rgba(19,64,149,.20));animation:ptsr-dishin 1.2s ease-out both;}
body.ptsr .ptsr-dish .col{transform-box:fill-box;transform-origin:center;animation:ptsr-grow 16s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:var(--d);}
body.ptsr .ptsr-dish .streak{animation:ptsr-draw 16s ease-in-out infinite;}
body.ptsr .ptsr-trail{position:absolute;right:190px;top:0;width:min(531px,calc(100% - 686px));height:auto;overflow:visible;}
body.ptsr .ptsr-trail .trail__line{stroke-dashoffset:100;animation:ptsr-linedraw 6s ease-in-out .3s forwards;}
body.ptsr .ptsr-trail .node circle:first-child{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ptsr-pop .6s cubic-bezier(.3,1.6,.5,1) var(--d) forwards;}
body.ptsr .ptsr-trail .node .halo{transform-box:fill-box;transform-origin:center;opacity:0;animation:ptsr-halo 3.2s ease-out calc(var(--d) + .3s) infinite;}
body.ptsr .ptsr-trail .node text{font:600 13px/1 var(--ptsr-display);letter-spacing:.06em;text-transform:uppercase;fill:#134095;opacity:0;animation:ptsr-fade .6s ease-out calc(var(--d) + .3s) forwards;}
@keyframes ptsr-dishin{from{opacity:0;transform:translateY(10px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes ptsr-grow{0%,3%{transform:scale(0);opacity:0}14%{opacity:1}26%,88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes ptsr-draw{0%,4%{stroke-dashoffset:100;opacity:0}10%{opacity:1}30%,88%{stroke-dashoffset:0;opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes ptsr-linedraw{to{stroke-dashoffset:0}}
@keyframes ptsr-pop{to{transform:scale(1)}}
@keyframes ptsr-fade{to{opacity:1}}
@keyframes ptsr-halo{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}
/* structures in the margins of the login / register screen (behind the form; hidden when the margins are too narrow) */
body.ptsr .ptsr-chem{position:absolute;left:50%;top:36px;width:1200px;height:860px;margin-left:-600px;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 82%,transparent 100%);mask-image:linear-gradient(#000 82%,transparent 100%);}
body.ptsr .ptsr-chem__svg{display:block;width:1200px;height:860px;overflow:visible;}
body.ptsr .ptsr-chem .mol{animation:ptsr-bob var(--t) ease-in-out var(--d) infinite alternate;}
body.ptsr .ptsr-chem .bd{fill:none;stroke:#134095;stroke-opacity:.58;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ptsr-bd .8s ease-out calc(var(--g) + var(--i) * .14s) forwards;}
body.ptsr .ptsr-chem .wm .bd{stroke-opacity:.075;stroke-width:3;animation-duration:2.4s;}
body.ptsr .ptsr-chem .atom{font-family:var(--ptsr-display);font-weight:700;fill:#3E8E3A;fill-opacity:0;animation:ptsr-atomin .6s ease-out calc(var(--g) + .5s) forwards;}
body.ptsr .ptsr-chem .cap{font:600 11px/1 var(--ptsr-display);letter-spacing:.08em;text-transform:uppercase;fill:#134095;fill-opacity:0;animation:ptsr-capin .8s ease-out calc(var(--g) + 1.1s) forwards;}
@keyframes ptsr-bob{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@keyframes ptsr-bd{to{stroke-dashoffset:0}}
@keyframes ptsr-atomin{to{fill-opacity:.85}}
@keyframes ptsr-capin{to{fill-opacity:.55}}
body.ptsr .ptsr-chem--side{width:1840px;margin-left:-920px;}
body.ptsr .ptsr-chem--side .ptsr-chem__svg{width:1840px;}
@media (max-width:1199px){body.ptsr .ptsr-chem{display:none;}}
@media (max-width:1855px){body.ptsr .ptsr-chem--side{display:none;}}
@media (max-width:1149px){body.ptsr .ptsr-trail{display:none;} body.ptsr .ptsr-dish{width:160px;height:160px;top:4px;}}
@media (max-width:900px){body.ptsr .ptsr-dish{width:140px;height:140px;}}
@media (max-width:700px){
	body.ptsr .ptsr-epath__art{top:-18px;right:-6px;}
	body.ptsr .ptsr-dish{width:84px;height:84px;top:0;}
}
@media (prefers-reduced-motion:reduce){
	body.ptsr .ptsr-dish,body.ptsr .ptsr-dish .col,body.ptsr .ptsr-dish .streak,body.ptsr .ptsr-trail .trail__line,body.ptsr .ptsr-trail .node circle,body.ptsr .ptsr-trail .node text,body.ptsr .ptsr-trail .node .halo,
	body.ptsr .ptsr-chem .mol,body.ptsr .ptsr-chem .bd,body.ptsr .ptsr-chem .atom,body.ptsr .ptsr-chem .cap{animation:none !important;}
	body.ptsr .ptsr-dish .col{transform:none;opacity:.85;} body.ptsr .ptsr-dish .streak{stroke-dashoffset:0;}
	body.ptsr .ptsr-trail .trail__line{stroke-dashoffset:0;} body.ptsr .ptsr-trail .node circle:first-child{transform:none;} body.ptsr .ptsr-trail .node text{opacity:1;} body.ptsr .ptsr-trail .node .halo{opacity:0;}
	body.ptsr .ptsr-chem .bd{stroke-dashoffset:0;} body.ptsr .ptsr-chem .atom{fill-opacity:.85;} body.ptsr .ptsr-chem .cap{fill-opacity:.55;}
}

/* ===================================================== cart + PT Calendar (07-Nov-2026) ===================================================== */
/* The title block of these two pages is not edited, so the path + dish are injected after the content and anchored to the 1216 px centre column. */
body.ptsr .ptsr-epath__art--page{left:50%;right:auto;width:min(1232px,100vw);top:26px;transform:translateX(-50%);}
body.ptsr.ptsr-calendar .ptsr-epath__art--page .ptsr-trail{display:none;}   /* the calendar title is long: dish only */
body.ptsr.woocommerce-cart .entry-content > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{padding-bottom:100px;}   /* same band height as ePATH, so the dish fits */
@media (max-width:1149px){body.ptsr.ptsr-calendar .ptsr-epath__art--page{display:none;}}
@media (max-width:700px){
	body.ptsr .ptsr-epath__art--page{top:14px;}
	body.ptsr.woocommerce-cart .entry-content > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{padding-bottom:36px !important;}
}

/* narrow margin columns for laptop-width screens (1380 to 1855 px): one column per side, scaled to the margin beside the 1216 px content */
body.ptsr .ptsr-chem--l,body.ptsr .ptsr-chem--r{display:none;width:calc(50vw - 608px);margin-left:0;left:auto;right:auto;}
body.ptsr .ptsr-chem--l{right:calc(50% + 608px);}
body.ptsr .ptsr-chem--r{left:calc(50% + 608px);}
body.ptsr .ptsr-chem--l .ptsr-chem__svg,body.ptsr .ptsr-chem--r .ptsr-chem__svg{display:block;width:100%;max-width:150px;height:auto;margin:0 auto;}
body.ptsr .ptsr-chem--l .cap,body.ptsr .ptsr-chem--r .cap{font-size:9px;letter-spacing:.06em;}
@media (min-width:1380px) and (max-width:1855px){body.ptsr .ptsr-chem--l,body.ptsr .ptsr-chem--r{display:block;}}
@media (max-width:1855px){body.ptsr .ptsr-chem--side{display:none;}}

/* ===================================================== DNA double helix (07-Nov-2026) =====================================================
   Two strands of beads that twist, joined by rungs. Every bead pair runs a sine across the helix width (ease-in-out-sine, alternating) and the phase steps
   along the height (negative delays set in the markup), so the helix seems to turn. Static values (--s = sin of the phase) are the fallback. */
body.ptsr .ptsr-chem .dna{opacity:0;animation:ptsr-dnain 1.6s ease-out var(--g) forwards;}
body.ptsr .ptsr-chem .dna .a,body.ptsr .ptsr-chem .dna .b{animation:ptsr-dnax var(--T) cubic-bezier(.37,0,.63,1) var(--d) infinite alternate;}
body.ptsr .ptsr-chem .dna .b{animation-direction:alternate-reverse;}
body.ptsr .ptsr-chem .dna .r{transform-box:fill-box;transform-origin:center;animation:ptsr-dnar var(--T) cubic-bezier(.37,0,.63,1) var(--d) infinite alternate;}
body.ptsr .ptsr-chem .dna .a{fill:#64AA53;fill-opacity:.85;}
body.ptsr .ptsr-chem .dna .b{fill:#134095;fill-opacity:.6;}
body.ptsr .ptsr-chem .dna .r{stroke:#134095;stroke-opacity:.5;stroke-width:2.6;stroke-linecap:round;}
@keyframes ptsr-dnain{to{opacity:.2}}
@keyframes ptsr-dnax{from{transform:translateX(calc(var(--A) * -1))}to{transform:translateX(var(--A))}}
@keyframes ptsr-dnar{from{transform:scaleX(-1)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
	body.ptsr .ptsr-chem .dna{animation:none !important;opacity:.2;}
	body.ptsr .ptsr-chem .dna .a,body.ptsr .ptsr-chem .dna .b,body.ptsr .ptsr-chem .dna .r{animation:none !important;}
	body.ptsr .ptsr-chem .dna .a{transform:translateX(calc(var(--s) * var(--A)));}
	body.ptsr .ptsr-chem .dna .b{transform:translateX(calc(var(--s) * var(--A) * -1));}
	body.ptsr .ptsr-chem .dna .r{transform:scaleX(var(--s));}
}
