/* ============================================================
   TryCleaning: the WASH, third cut (24 Sep 2026 evening). Pairs with wash.js and, on the
   homepage, wash-bucket.js. The page itself swaps instantly (theme.js); these are the set
   pieces that play around the switch, only for what is on screen:
     float   buttons lift a couple of centimetres with a tight contact shadow, then land
     zero    the team CTA line and button grow a little, drift and twirl as if weightless, land
     flush   card grids (team, journal, products, reviews) float as if in water with bubbles,
             are carried off one side and come back from the other in the new look
     pool    (homepage, wash-bucket.js) a cleaner's arm throws a bucket of water into the
             "Cleaning crafted around you" section; it fills and sloshes; a plug at the bottom
             is pulled to drain it going back to day
     mark    the logo mark fills with water (a water line rises through it)
   No page-wide crest, no ghosts of accent words, no button wipes: those were the first cut.
   Off entirely under prefers-reduced-motion (theme.js flips as before). Line icons, no emoji.
   ============================================================ */

/* ---- the logo mark: the brand PNG used as a mask so its colour can fill like water ---- */
.tc-mark{display:inline-block;height:1.15em;aspect-ratio:1076/386;width:auto;vertical-align:middle;position:relative;
  -webkit-mask:url(/logo-try-white.png) center/contain no-repeat;mask:url(/logo-try-white.png) center/contain no-repeat;
  background-color:var(--tc-mark,#fff);}
/* the water inside the letters during the switch (wash.js paints it; the mask clips it to the mark) */
.tc-mark canvas.tc-mark-water{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.footer-logo .tc-mark{height:1.2em;}
:root[data-theme="dark"] .tc-mark{--tc-mark:#4FC3F7;}
/* the word beside the mark swaps the other way: sky by day, white by night */
:root[data-theme="dark"] .nav-logo span,
:root[data-theme="dark"] .footer-logo span{color:#fff;}

/* ---- the fixed layer that holds ghosts and bubbles ---- */
#tc-wash{position:fixed;inset:0;z-index:99990;pointer-events:none;overflow:hidden;contain:strict;}
#tc-wash:empty{display:none;}

/* ---- float: a low hover, a couple of centimetres up, with a contact shadow that stays tight. Each button gets its
   own lift (--tc-fy), lean (--tc-fr), drift (--tc-fx), duration and start from wash.js, and one of two paths ---- */
.tc-float{will-change:transform;animation:tcBoat var(--tc-dur,2600ms) linear var(--tc-d,0ms) both !important;}
/* low gravity: an easy rise, a slow drift up there, a gentle settle; the shadow grows with the height */
@keyframes tcBoat{
  0%{transform:translate(0,0) rotate(0);box-shadow:0 0 0 0 rgba(0,0,0,0);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
  36%{transform:translate(var(--tc-fx,3px),calc(var(--tc-fy,10px) * -1)) rotate(var(--tc-fr,.5deg));box-shadow:0 10px 8px -4px rgba(0,0,0,.36);animation-timing-function:cubic-bezier(.45,0,.55,1);}
  62%{transform:translate(calc(var(--tc-fx,3px) * 1.5),calc(var(--tc-fy,10px) * -.94)) rotate(calc(var(--tc-fr,.5deg) * 1.3));box-shadow:0 9px 8px -4px rgba(0,0,0,.34);animation-timing-function:cubic-bezier(.4,0,.6,1);}
  100%{transform:translate(0,0) rotate(0);box-shadow:0 0 0 0 rgba(0,0,0,0);}}
/* foam bubbles forming and popping round a floating button's waterline, seen from above (in the fixed layer) */
.tc-foam{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;
  border:1px solid rgba(255,255,255,.8);background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.7),rgba(255,255,255,.1) 70%);
  animation:tcFoam var(--tc-dur,900ms) ease-out var(--tc-d,0ms) both;}
#tc-wash.to-light .tc-foam{border-color:rgba(10,110,160,.6);background:radial-gradient(circle at 35% 35%,rgba(179,229,252,.9),rgba(79,195,247,.15) 70%);}
@keyframes tcFoam{0%{transform:translate(0,0) scale(.2);opacity:0;}25%{transform:translate(calc(var(--tc-ox,3px) * .3),calc(var(--tc-oy,0px) * .3)) scale(1);opacity:.85;}100%{transform:translate(var(--tc-ox,3px),var(--tc-oy,0px)) scale(1.15);opacity:0;}}

/* ---- zero: bigger, adrift, a slow twirl, then back down; a shadow only while it is up ---- */
.tc-zero{animation:tcZero var(--tc-dur,1800ms) cubic-bezier(.45,.05,.3,1) var(--tc-d,0ms) both !important;transform-origin:50% 50%;will-change:transform;}
@keyframes tcZero{
  0%{transform:perspective(700px) translate3d(0,0,0) scale(1) rotate(0) rotateX(0) rotateY(0);}
  28%{transform:perspective(700px) translate3d(5px,-11px,0) scale(1.06) rotate(1.4deg) rotateX(5deg) rotateY(-6deg);}
  54%{transform:perspective(700px) translate3d(-4px,-14px,0) scale(1.075) rotate(-1.3deg) rotateX(-4deg) rotateY(5deg);}
  78%{transform:perspective(700px) translate3d(2px,-6px,0) scale(1.03) rotate(.6deg) rotateX(2deg) rotateY(-2deg);}
  100%{transform:perspective(700px) translate3d(0,0,0) scale(1) rotate(0) rotateX(0) rotateY(0);}}
.tc-zero.tc-zero-text{animation-name:tcZero,tcZeroText !important;}
@keyframes tcZeroText{0%{text-shadow:0 0 0 rgba(0,0,0,0);}40%{text-shadow:0 12px 10px rgba(0,0,0,.5);}100%{text-shadow:0 0 0 rgba(0,0,0,0);}}
.tc-zero.tc-zero-btn{animation-name:tcZero,tcZeroBtn !important;}
@keyframes tcZeroBtn{0%{box-shadow:0 0 0 0 rgba(0,0,0,0);}40%{box-shadow:0 16px 12px -6px rgba(0,0,0,.5);}100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}}

/* ---- flush: ghosts of the old cards float, are carried off; the real cards arrive from the other side ---- */
.tc-ghost{position:absolute;box-sizing:border-box;will-change:transform,opacity;}
.tc-ghost-in{width:100%;height:100%;will-change:transform;}
.tc-ghost.bob .tc-ghost-in{animation:tcBob 1500ms ease-in-out var(--tc-p,0ms) infinite;}
@keyframes tcBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(var(--tc-r,.9deg));}}
.tc-ghost.off-r{animation:tcOffR var(--tc-dur,650ms) cubic-bezier(.55,0,.9,.45) var(--tc-d,0ms) forwards;}
.tc-ghost.off-l{animation:tcOffL var(--tc-dur,650ms) cubic-bezier(.55,0,.9,.45) var(--tc-d,0ms) forwards;}
@keyframes tcOffR{0%{transform:translate(0,0) rotate(0);}100%{transform:translate(125vw,36px) rotate(9deg);}}
@keyframes tcOffL{0%{transform:translate(0,0) rotate(0);}100%{transform:translate(-125vw,36px) rotate(-9deg);}}
.tc-hide{opacity:0 !important;pointer-events:none !important;}
.tc-in-l{animation:tcInL var(--tc-dur,800ms) cubic-bezier(.16,1,.3,1) var(--tc-d,0ms) both !important;}
.tc-in-r{animation:tcInR var(--tc-dur,800ms) cubic-bezier(.16,1,.3,1) var(--tc-d,0ms) both !important;}
@keyframes tcInL{0%{transform:translate(-125vw,28px) rotate(-6deg);opacity:1;}100%{transform:translate(0,0) rotate(0);opacity:1;}}
@keyframes tcInR{0%{transform:translate(125vw,28px) rotate(6deg);opacity:1;}100%{transform:translate(0,0) rotate(0);opacity:1;}}
/* bubbles around the floating cards */
.tc-bubble{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;
  border:1.5px solid rgba(255,255,255,.75);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.06) 60%);
  animation:tcRise var(--tc-dur,1300ms) cubic-bezier(.3,.2,.6,1) var(--tc-d,0ms) both;}
#tc-wash.to-light .tc-bubble{border-color:rgba(79,195,247,.85);background:radial-gradient(circle at 32% 30%,rgba(179,229,252,.7),rgba(79,195,247,.08) 60%);}
@keyframes tcRise{0%{transform:translate(0,0) scale(.55);opacity:0;}14%{opacity:.95;}35%{transform:translate(7px,-42px) scale(.85);}65%{transform:translate(-6px,-96px) scale(1);opacity:.85;}100%{transform:translate(5px,-150px) scale(1.12);opacity:0;}}
/* a translucent surge of water that crosses the grid as the cards are carried off */
.tc-surge{position:absolute;top:0;height:100%;width:42%;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(79,195,247,0) 0%,rgba(79,195,247,.16) 35%,rgba(179,229,252,.2) 55%,rgba(79,195,247,0) 100%);}
.tc-surge.r{left:-42%;animation:tcSurgeR var(--tc-dur,900ms) cubic-bezier(.4,0,.6,1) var(--tc-d,0ms) both;}
.tc-surge.l{right:-42%;animation:tcSurgeL var(--tc-dur,900ms) cubic-bezier(.4,0,.6,1) var(--tc-d,0ms) both;}
@keyframes tcSurgeR{0%{transform:translateX(0);opacity:0;}20%{opacity:1;}80%{opacity:1;}100%{transform:translateX(340%);opacity:0;}}
@keyframes tcSurgeL{0%{transform:translateX(0);opacity:0;}20%{opacity:1;}80%{opacity:1;}100%{transform:translateX(-340%);opacity:0;}}

/* ---- the team section stays night-blue in both modes; by day the member tickets go white with dark words ---- */
:root:not([data-theme="dark"]) .team-card{background:#fff;border-color:rgba(13,27,75,.08);}
:root:not([data-theme="dark"]) .team-card:hover,:root:not([data-theme="dark"]) .team-card:focus-visible{border-color:rgba(79,195,247,.55);box-shadow:0 30px 60px rgba(0,0,0,.45);}
:root:not([data-theme="dark"]) .team-name{color:var(--navy,#0D1B4B);}
:root:not([data-theme="dark"]) .team-role{color:#0A6EA0;}
:root:not([data-theme="dark"]) .team-bio{color:#5B6785;}
:root:not([data-theme="dark"]) .team-tags .tag{background:rgba(79,195,247,.12);color:#0A6EA0;border-color:rgba(79,195,247,.32);}
:root:not([data-theme="dark"]) .team-info .team-hover-hint{color:#0A6EA0;}

/* ---- the pool (homepage): the canvas sits behind the section's content, the arm rig above it ---- */
.services{position:relative;overflow:hidden;}
.services-inner{position:relative;z-index:1;}
.tc-pool{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;}
.tc-arm{position:absolute;right:0;z-index:3;pointer-events:none;will-change:transform;transform:translateX(104%);}
.tc-arm.l{right:auto;left:0;transform:translateX(-104%) scaleX(-1);}
.tc-arm svg{display:block;width:100%;height:auto;overflow:visible;}
/* the drain at the bottom of the section and the plug seated in it, both on show at night */
.tc-hole{position:absolute;left:50%;bottom:0;z-index:1;width:84px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .7s ease;}
.tc-plug{position:absolute;left:50%;bottom:0;z-index:2;width:84px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .7s ease;}
.tc-hole svg,.tc-plug svg{display:block;width:100%;height:auto;overflow:visible;}
:root[data-theme="dark"] .tc-plug,:root[data-theme="dark"] .tc-hole{opacity:1;}
.tc-plug.tc-plug-hold,.tc-hole.tc-plug-hold{opacity:0 !important;transition:none;}   /* held back until the water is over it */
.tc-plug.tc-plug-live,.tc-hole.tc-plug-live{opacity:1 !important;transition:none;}   /* on show while it is pulled and drains */
/* the journal preview hosts the second thrower: its canvas sits behind the cards */
.tc-throw-host{position:relative;overflow:hidden;}
.tc-throw-host > .blog-preview-inner{position:relative;z-index:1;}
.tc-plug .tc-chain{transform-origin:42px 31px;animation:tcChain 4.2s ease-in-out infinite;}   /* the chain swings from the ring on the plug */
@keyframes tcChain{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
/* while the plug waits at night, the odd small bubble leaves it (CSS only, so the page stays idle) */
.tc-idle{position:absolute;bottom:14px;border-radius:50%;pointer-events:none;opacity:0;z-index:2;
  border:1px solid rgba(179,229,252,.7);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.5),rgba(255,255,255,.04) 60%);
  animation:tcIdle var(--tc-idle-dur,9s) linear var(--tc-idle-d,0s) infinite;animation-play-state:paused;}
:root[data-theme="dark"] .tc-idle{animation-play-state:running;}
@keyframes tcIdle{0%{transform:translate(0,0) scale(.6);opacity:0;}8%{opacity:.5;}50%{transform:translate(6px,-160px) scale(1);}92%{opacity:.3;}100%{transform:translate(-4px,-320px) scale(1.1);opacity:0;}}
/* while a section is filling or draining, its content sits under the water's light (the journal's cards are carried
   off by the flush, so only its header dims) */
.services.tc-filling .services-inner,.blog-preview.tc-filling .section-header-row{transition:opacity .25s ease;opacity:.42;}
.services.tc-filled .services-inner,.blog-preview.tc-filled .section-header-row{transition:opacity .6s ease;opacity:1;}

/* ---- the toggle gets a little water in its track ---- */
#tc-theme-toggle{overflow:hidden;}
#tc-theme-toggle .tct-water{position:absolute;left:-4px;right:-4px;bottom:-2px;height:14px;pointer-events:none;opacity:0;
  transition:opacity .35s ease;}
#tc-theme-toggle .tct-water svg{position:absolute;left:0;top:0;width:200%;height:100%;display:block;
  animation:tctSlosh 3.2s linear infinite;animation-play-state:paused;}
#tc-theme-toggle .tct-water svg path{fill:rgba(79,195,247,.55);}
:root[data-theme="dark"] #tc-theme-toggle .tct-water{opacity:1;}
:root[data-theme="dark"] #tc-theme-toggle .tct-water svg{animation-play-state:running;}
@keyframes tctSlosh{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (prefers-reduced-motion: reduce){
  #tc-wash{display:none !important;}
  .tc-float,.tc-zero,.tc-in-l,.tc-in-r{animation:none !important;}
  .tc-hide{opacity:1 !important;pointer-events:auto !important;}
  .tc-plug .tc-chain,#tc-theme-toggle .tct-water svg{animation:none;}
  .tc-arm,.tc-pool{display:none !important;}
}