/* ============================================================
   AQUA FIT SURSEE — front-page landing (loaded on the front page only)
   Ported from the approved "Pool" design. Animations are unchanged.
   Changes vs. the original mockup:
     • Open Sans typeface (loaded in functions.php)
     • Light is the default; dark follows the device or the toggle.
       All colours read from the --afs-* tokens defined in style.css
       and are mapped to the design's local names on body.aqf-landing below.
     • Decorative GRADIENTS replaced with the corresponding SOLID
       colour; the reveal/scan animation is kept on hover.
   ============================================================ */

/* Map the design's local variables onto the themed --afs-* tokens.
   Applied to body.aqf-landing so the loader / background layers (output via
   zn_after_body, outside .aquafit-landing) inherit them too. */
body.aqf-landing{
	--blue:var(--afs-blue);
	--cyan:var(--afs-cyan);
	--bright:var(--afs-bright);
	--bg:var(--afs-bg);
	--card:var(--afs-card);
	--text:var(--afs-text);
	--text2:var(--afs-text2);
	--text3:var(--afs-text3);
	--serif:'Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
	--r:22px;
	--gap:1rem;
}

/* ── Simple flat front-page background (white / dark) ── */
body.aqf-landing{background-color:var(--bg);overflow-x:hidden}
body.aqf-landing #page_wrapper{background:transparent}
/* Pin the loader scroll while it is visible */
body.aqf-landing.aqf-loading{overflow:hidden}

/* ── AMBIENT DRIFT — subtle, soothing motion over the flat background ── */
.aqf-amb{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aqf-orb{position:absolute;border-radius:50%;filter:blur(74px);will-change:transform}
.aqf-orb.o1{width:48vmax;height:48vmax;top:-14vmax;left:-10vmax;background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 34%,transparent),transparent 68%);opacity:.5;animation:aqf-drift1 28s ease-in-out infinite}
.aqf-orb.o2{width:42vmax;height:42vmax;bottom:-12vmax;right:-8vmax;background:radial-gradient(circle,rgba(20,184,166,.28),transparent 68%);opacity:.46;animation:aqf-drift2 34s ease-in-out infinite}
.aqf-orb.o3{width:34vmax;height:34vmax;top:32%;left:42%;background:radial-gradient(circle,rgba(99,102,241,.20),transparent 70%);opacity:.4;animation:aqf-drift3 40s ease-in-out infinite}
:root[data-theme="dark"] .aqf-orb{opacity:.34}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aqf-orb{opacity:.34}}
@keyframes aqf-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,5vmax) scale(1.12)}}
@keyframes aqf-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vmax,-4vmax) scale(1.1)}}
@keyframes aqf-drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vmax,4vmax) scale(1.15)}}

/* ── LOADER (rich splash; page background stays flat) ── */
#aqf-loader{
	position:fixed;inset:0;z-index:9999;
	background:radial-gradient(120% 90% at 50% 42%,color-mix(in srgb,var(--cyan) 12%,var(--bg)),var(--bg));
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 1.1s;
}
#aqf-loader.out{opacity:0;visibility:hidden;pointer-events:none}
#aqf-ldr-c{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.aqf-ldr-logo{position:relative;z-index:2;opacity:0;filter:blur(16px);transform:translateY(10px);animation:aqf-lgIn 1.2s cubic-bezier(.16,1,.3,1) forwards .5s}
@keyframes aqf-lgIn{to{opacity:1;filter:blur(0);transform:none}}
.aqf-ldr-foot{position:absolute;bottom:10%;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:aqf-fIn .6s ease forwards 1.1s}
.aqf-ldr-foot span{font-size:.52rem;letter-spacing:.55em;text-transform:uppercase;color:var(--text3)}
.aqf-pbar{width:160px;height:1px;background:color-mix(in srgb,var(--cyan) 12%,transparent)}
/* gradient → solid accent */
.aqf-pfill{height:100%;background:var(--cyan);width:0;animation:aqf-pFill 2s cubic-bezier(.4,0,.2,1) forwards 1s}
@keyframes aqf-pFill{to{width:100%}}
@keyframes aqf-fIn{from{opacity:0}to{opacity:1}}

/* ── WORDMARK (gradient fill → solid brand colour) ── */
.aqf-wordmark{fill:var(--cyan)}
.aqf-wordmark-sub{fill:color-mix(in srgb,var(--cyan) 42%,transparent)}
.aqf-hairline{stroke:color-mix(in srgb,var(--cyan) 18%,transparent)}

/* ── THEME TOGGLE ── */
#aqf-theme-toggle{
	position:fixed;right:20px;bottom:20px;z-index:300;
	width:44px;height:44px;border-radius:50%;cursor:pointer;
	display:grid;place-items:center;
	background:var(--card);border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);
	color:var(--cyan);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
	box-shadow:0 6px 22px rgba(0,0,0,.18);
	transition:transform .25s,border-color .25s,color .25s;
}
#aqf-theme-toggle:hover{transform:translateY(-3px) scale(1.05);border-color:var(--cyan)}
#aqf-theme-toggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#aqf-theme-toggle .aqf-i-moon{display:none}
:root[data-theme="dark"] #aqf-theme-toggle .aqf-i-sun{display:none}
:root[data-theme="dark"] #aqf-theme-toggle .aqf-i-moon{display:block}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) #aqf-theme-toggle .aqf-i-sun{display:none}
	:root:not([data-theme="light"]) #aqf-theme-toggle .aqf-i-moon{display:block}
}

/* ── PAGE ── */
.aquafit-landing{position:relative;z-index:10;color:var(--text)}
.aqf-page{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.5rem 5.5rem}

/* ── HERO ── */
.aqf-hero{padding-top:clamp(1rem,4vh,3rem);display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(24px)}
.aqf-hero.in{animation:aqf-riseIn 1.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes aqf-riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.aqf-badge{
	display:inline-flex;align-items:center;gap:.55rem;
	background:color-mix(in srgb,var(--blue) 10%,transparent);
	border:1px solid color-mix(in srgb,var(--cyan) 20%,transparent);
	border-radius:99px;padding:.3rem 1.1rem;font-size:.58rem;letter-spacing:.38em;
	text-transform:uppercase;color:var(--cyan);margin-bottom:.9rem;
}
.aqf-bdot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:aqf-blink 2.2s ease infinite}
@keyframes aqf-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.aqf-hero-sub{font-size:.78rem;color:var(--text2);letter-spacing:.1em;text-align:center;margin-top:.15rem;font-style:italic}
/* gentle float on the logo — soothing, slow */
.aqf-hero>svg{animation:aqf-float 7s ease-in-out infinite}
@keyframes aqf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── WAVE ── */
.aqf-wave-wrap{width:100%;max-width:860px;margin-top:.5rem;height:100px;opacity:0;flex-shrink:0}
.aqf-wave-wrap.in{animation:aqf-fIn .9s ease forwards}
#aqf-wave-c{display:block;width:100%;height:100%}
.aqf-slbl{margin:.2rem 0 .5rem;font-size:.56rem;letter-spacing:.46em;text-transform:uppercase;color:var(--text3);opacity:0}
.aqf-slbl.in{animation:aqf-fIn .8s ease forwards}

/* ── BENTO GRID ── */
.aqf-grid{
	margin-top:1.1rem;width:100%;max-width:1060px;
	display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
	perspective:1400px;opacity:0;
}
.aqf-grid.in{opacity:1}

/* ── CARD ── */
.aqf-card{
	background:var(--card);
	border:1px solid var(--afs-card-bd);border-radius:var(--r);
	position:relative;overflow:hidden;text-decoration:none;color:var(--text);cursor:pointer;
	box-shadow:var(--afs-shadow);
	transition:box-shadow .35s,border-color .3s;
	display:flex;flex-direction:column;align-items:center;padding:1.9rem 1.25rem 1.6rem;gap:.75rem;
}
/* shimmer scan line on top — gradient → solid accent, reveal animates on hover */
.aqf-card::before{
	content:'';position:absolute;top:0;left:0;right:0;height:2px;
	background:rgb(var(--ar,74) var(--ag,175) var(--ab,255));
	transform:scaleX(0);transform-origin:center;
	transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:6;
}
/* deep accent fill — gradient → solid tint, fades in on hover */
.aqf-card::after{
	content:'';position:absolute;inset:0;
	background:rgb(var(--ar,24) var(--ag,99) var(--ab,220) / .12);
	opacity:0;transition:opacity .5s;z-index:0;
}
.aqf-card:hover{
	border-color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .42);
	box-shadow:var(--afs-shadow-lg);
}
.aqf-card:hover::before{transform:scaleX(1)}
.aqf-card:hover::after{opacity:1}

.aqf-cnum{position:absolute;top:14px;right:16px;font-size:.52rem;font-weight:700;letter-spacing:.1em;color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .25);z-index:3;transition:color .3s}
.aqf-card:hover .aqf-cnum{color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .65)}

.aqf-cwm{position:absolute;bottom:-10px;right:-10px;width:88px;height:88px;opacity:.05;pointer-events:none;z-index:1;transition:opacity .4s,transform .5s}
.aqf-cwm svg{width:100%;height:100%;stroke:var(--cyan);stroke-width:.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
.aqf-card:hover .aqf-cwm{opacity:.12;transform:scale(1.06) rotate(5deg)}

.aqf-icw{
	width:64px;height:64px;border-radius:50%;
	background:rgb(var(--ar,24) var(--ag,99) var(--ab,220) / .1);
	border:1px solid rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .2);
	display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;
	transition:background .4s,border-color .4s,box-shadow .4s;
}
.aqf-card:hover .aqf-icw{
	background:rgb(var(--ar,24) var(--ag,99) var(--ab,220) / .18);
	border-color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .45);
	box-shadow:0 8px 22px rgb(var(--ar,24) var(--ag,99) var(--ab,220) / .3);
}
.aqf-icw svg{width:30px;height:30px;stroke:rgb(var(--ar,74) var(--ag,175) var(--ab,255));stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:filter .4s}
.aqf-card:hover .aqf-icw svg{filter:drop-shadow(0 0 9px rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .8))}

.aqf-ctitle{font-family:var(--serif);font-size:.9rem;font-style:italic;letter-spacing:.04em;color:var(--text);text-align:center;line-height:1.3;position:relative;z-index:2;transition:color .3s}
.aqf-card:hover .aqf-ctitle{color:rgb(var(--ar,126) var(--ag,207) var(--ab,255))}
.aqf-ctag{font-size:.66rem;color:var(--text2);letter-spacing:.04em;text-align:center;position:relative;z-index:2;line-height:1.4;margin-top:-.1rem}
.aqf-carr{font-size:.68rem;color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .75);position:relative;z-index:2;transform:translateX(-5px);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.aqf-card:hover .aqf-carr{opacity:1;transform:translateX(0)}

.aqf-wide{grid-column:span 2;flex-direction:row;align-items:flex-start;padding:1.9rem 1.8rem;gap:1.45rem}
.aqf-wide .aqf-icw{width:70px;height:70px;flex-shrink:0;margin-top:.1rem}
.aqf-wide .aqf-icw svg{width:32px;height:32px}
.aqf-cbody{display:flex;flex-direction:column;gap:.48rem;flex:1;min-width:0}
.aqf-wide .aqf-ctitle{text-align:left;font-size:1rem}
.aqf-csub{font-size:.74rem;color:var(--text2);line-height:1.58;position:relative;z-index:2}
.aqf-cpill{
	display:inline-flex;align-items:center;gap:.4rem;
	font-size:.67rem;font-weight:700;letter-spacing:.04em;
	color:rgb(var(--ar,74) var(--ag,175) var(--ab,255));
	border:1px solid rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .25);
	border-radius:99px;padding:.3rem .9rem;
	position:relative;z-index:2;align-self:flex-start;margin-top:.2rem;
	transition:background .3s,border-color .3s,box-shadow .3s;
}
.aqf-card:hover .aqf-cpill{background:rgb(var(--ar,24) var(--ag,99) var(--ab,220) / .3);border-color:rgb(var(--ar,74) var(--ag,175) var(--ab,255) / .5);color:#fff}

/* full-width card (its own row) */
.aqf-full{grid-column:1 / -1}

/* accent colours (R G B channels consumed above) */
.c-teal  {--ar:13; --ag:200;--ab:180}
.c-coral {--ar:232;--ag:96; --ab:58}
.c-ocean {--ar:74; --ag:175;--ab:255}
.c-violet{--ar:168;--ag:85; --ab:247}
.c-amber {--ar:245;--ag:158;--ab:11}
.c-indigo{--ar:99; --ag:102;--ab:241}
.c-rose  {--ar:244;--ag:63; --ab:94}
.c-emer  {--ar:16; --ag:185;--ab:129}
.c-news  {--ar:14; --ag:165;--ab:233}

/* footer line — gradient → solid accent */
.aqf-fline{width:100%;max-width:600px;margin-top:3.5rem;height:1px;background:color-mix(in srgb,var(--cyan) 22%,transparent);opacity:0}
.aqf-fline.in{animation:aqf-fIn .8s ease forwards}
.aqf-ftxt{margin-top:1.2rem;font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text3);text-align:center;opacity:0}
.aqf-ftxt.in{animation:aqf-fIn 1s ease forwards}

@keyframes aqf-ripple{to{transform:scale(1);opacity:0}}

@media(max-width:920px){.aqf-grid{grid-template-columns:repeat(2,1fr);max-width:620px}.aqf-wide{grid-column:span 2}}
@media(max-width:600px){
	body.aqf-landing{--gap:.8rem;--r:18px}
	.aqf-grid{grid-template-columns:repeat(2,1fr)}
	.aqf-wide{grid-column:span 2;flex-direction:column;align-items:center;padding:1.7rem 1.1rem 1.5rem}
	.aqf-wide .aqf-ctitle{text-align:center}.aqf-csub{display:none}.aqf-wide .aqf-cpill{align-self:center}
	.aqf-card{padding:1.7rem 1rem 1.45rem}.aqf-icw{width:56px;height:56px}.aqf-icw svg{width:27px;height:27px}
	.aqf-cwm{width:72px;height:72px}.aqf-page{padding:1rem 1rem 4.5rem}
}
@media(max-width:390px){.aqf-ctitle{font-size:.82rem}.aqf-ctag{font-size:.62rem}}

@media (prefers-reduced-motion: reduce){
	.aquafit-landing *,#aqf-loader,.aqf-orb{animation:none!important;transition:none!important}
	.aqf-hero,.aqf-grid,.aqf-wave-wrap,.aqf-slbl,.aqf-fline,.aqf-ftxt{opacity:1!important;transform:none!important}
}