/*
Theme Name: Protecroi Referral Gate
Theme URI: https://protecroi.com
Author: Protecroi
Description: Referral-only gate theme for an asset management and investment organization. No header; a logo, a seven digit reference gate, a two-step details form and a one-line footer menu. Fully customizable from Appearance > Customize > Protecroi Theme Options (fonts, colors, form, animations, text).
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: protecroi
*/

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent)}
img{max-width:100%;height:auto}

/* ---------- background ---------- */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,var(--bg),var(--bg2))}
.site-bg .bg-image{position:absolute;inset:0;background-image:var(--bg-image);background-size:cover;background-position:center}
.site-bg .bg-overlay{position:absolute;inset:0;background:var(--bg);opacity:var(--bg-overlay)}
.site-bg .blob,.site-bg canvas{display:none}
body.bgfx-gradient-shift .site-bg{background:linear-gradient(120deg,var(--bg),var(--bg2),rgba(var(--accent-rgb),.22),var(--bg2),var(--bg));background-size:400% 400%;animation:prcShift var(--bg-speed) ease-in-out infinite}
body.bgfx-aurora .site-bg .blob{display:block;position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;will-change:transform}
.blob.b1{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:rgba(var(--accent-rgb),.55);animation:prcDrift1 var(--bg-speed) ease-in-out infinite alternate}
.blob.b2{width:46vmax;height:46vmax;right:-16vmax;bottom:-18vmax;background:rgba(var(--bg2-rgb),1);filter:blur(100px);opacity:.9;animation:prcDrift2 calc(var(--bg-speed)*1.3) ease-in-out infinite alternate}
.blob.b3{width:30vmax;height:30vmax;left:40%;top:55%;background:rgba(var(--accent-rgb),.28);animation:prcDrift3 calc(var(--bg-speed)*.9) ease-in-out infinite alternate}
body.bgfx-particles .site-bg canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
@keyframes prcShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes prcDrift1{to{transform:translate(18vmax,12vmax) scale(1.15)}}
@keyframes prcDrift2{to{transform:translate(-16vmax,-10vmax) scale(1.1)}}
@keyframes prcDrift3{to{transform:translate(-20vmax,-14vmax) scale(1.3)}}

/* ---------- gate ---------- */
.gate{flex:1;display:flex;align-items:var(--v-align);justify-content:center;padding:var(--pad-top) 20px 24px}
.gate-card{width:100%;max-width:var(--card-max);padding:var(--card-pad);text-align:var(--align);border-radius:var(--card-radius)}
body.card-on .gate-card{background:var(--card-bg);border:var(--card-border-w) solid var(--card-border);-webkit-backdrop-filter:blur(var(--card-blur));backdrop-filter:blur(var(--card-blur));box-shadow:var(--card-shadow)}

.gate-logo{display:flex;justify-content:var(--justify);margin-bottom:var(--logo-mb)}
.gate-logo .prc-logo-img{width:var(--logo-w);max-width:100%;height:auto;display:block}
.logo-text{font-family:var(--font-heading);font-size:28px;color:var(--heading);letter-spacing:1px}
body.logofx-float .gate-logo .prc-logo-img{animation:prcFloat 5s ease-in-out infinite}
body.logofx-pulse .gate-logo .prc-logo-img{animation:prcPulse 3.2s ease-in-out infinite}
body.logofx-glow .gate-logo .prc-logo-img{animation:prcGlow 3.6s ease-in-out infinite}
@keyframes prcFloat{50%{transform:translateY(-8px)}}
@keyframes prcPulse{50%{transform:scale(1.045)}}
@keyframes prcGlow{50%{filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.65))}}

.gate-heading{margin:0 0 14px;font-family:var(--font-heading);font-size:clamp(calc(var(--fs-heading)*.62),6vw,var(--fs-heading));font-weight:var(--fw-heading);line-height:var(--heading-lh);letter-spacing:var(--heading-ls);text-transform:var(--heading-tt);color:var(--heading)}
.gate-sub{margin:0 0 30px;font-size:var(--fs-sub);color:var(--sub);line-height:1.5}
.success-msg{margin-bottom:0;color:var(--success)}

/* ---------- form ---------- */
.field{margin-bottom:var(--field-gap);text-align:left}
body[class] .gate-card[class] .field{text-align:var(--align)}
label{display:block;margin-bottom:8px;font-size:var(--fs-label);color:var(--label);letter-spacing:var(--label-ls);text-transform:var(--label-tt);font-weight:600}
body.labels-off .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

input[type=text],input[type=email],input[type=tel],select,textarea{
	display:block;width:100%;margin:0;font-family:var(--font-body);font-size:var(--fs-input);font-weight:var(--fw-body);
	color:var(--input-text);background:var(--input-bg);border:var(--input-border-w) solid var(--input-border);border-radius:var(--input-radius);
	height:var(--input-h);padding:0 16px;outline:0;appearance:none;-webkit-appearance:none;
	transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
textarea{height:auto;padding:14px 16px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--input-focus)}
body.focusfx-glow input:focus,body.focusfx-glow select:focus,body.focusfx-glow textarea:focus{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18),0 0 24px rgba(var(--accent-rgb),.22)}
body.focusfx-lift input:focus,body.focusfx-lift select:focus,body.focusfx-lift textarea:focus{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
input:-webkit-autofill{-webkit-text-fill-color:var(--input-text);box-shadow:0 0 0 100px var(--input-bg) inset;caret-color:var(--input-text)}
.ref-input{text-align:center;letter-spacing:var(--ref-ls);font-size:calc(var(--fs-input)*1.35);font-weight:600;padding-left:calc(16px + var(--ref-ls))}
.ref-readonly{color:var(--accent);font-weight:700;letter-spacing:4px;cursor:default}
.is-invalid{border-color:var(--error)!important;animation:prcShake .4s}
@keyframes prcShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.phone-row{display:grid;grid-template-columns:minmax(120px,36%) 1fr;gap:10px}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);pointer-events:none}
select{padding-right:34px;text-overflow:ellipsis;cursor:pointer}
select option{background:var(--input-bg);color:var(--input-text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:22px;margin:0 0 12px;font-size:calc(var(--fs-body)*.92);color:var(--error)}

/* ---------- button ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;min-width:180px;height:var(--btn-h);padding:0 34px;border:var(--input-border-w) solid transparent;border-radius:var(--btn-radius);cursor:pointer;
	font-family:var(--font-body);font-size:var(--fs-btn);font-weight:var(--fw-btn);letter-spacing:var(--btn-ls);text-transform:var(--btn-tt);color:var(--btn-text);
	background:linear-gradient(135deg,var(--btn-bg),var(--btn-bg2));transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s}
body.btn-full .btn{width:100%}
body.btn-solid .btn{background:var(--btn-bg)}
body.btn-outline .btn{background:transparent;color:var(--btn-bg);border-color:var(--btn-bg)}
.btn:hover,.btn:focus-visible{background:var(--btn-hover-bg);color:var(--btn-hover-text);border-color:var(--btn-hover-bg)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.btnfx-lift .btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(0,0,0,.7)}
body.btnfx-glow .btn:hover{box-shadow:0 0 28px rgba(var(--accent-rgb),.55)}
body.btnfx-scale .btn:hover{transform:scale(1.035)}
body.btnfx-shine .btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s}
body.btnfx-shine .btn:hover::after{left:130%}
.btn .spinner{display:none;width:20px;height:20px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:prcSpin .7s linear infinite}
.btn.is-loading .btn-label{display:none}
.btn.is-loading .spinner{display:block}
.btn:disabled{cursor:progress;opacity:.85}
@keyframes prcSpin{to{transform:rotate(360deg)}}

/* ---------- entrance animations ---------- */
.prc-item{animation-duration:var(--anim-dur);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-delay:calc(var(--i,0)*var(--anim-step))}
.gate-logo{animation-duration:var(--anim-dur);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
body.anim-fade .prc-item,body.anim-fade .gate-logo{animation-name:prcFade}
body.anim-fade-up .prc-item,body.anim-fade-up .gate-logo{animation-name:prcFadeUp}
body.anim-fade-down .prc-item,body.anim-fade-down .gate-logo{animation-name:prcFadeDown}
body.anim-zoom .prc-item,body.anim-zoom .gate-logo{animation-name:prcZoom}
body.anim-slide-left .prc-item,body.anim-slide-left .gate-logo{animation-name:prcSlideL}
body.anim-slide-right .prc-item,body.anim-slide-right .gate-logo{animation-name:prcSlideR}
body.anim-blur-in .prc-item,body.anim-blur-in .gate-logo{animation-name:prcBlur}
@keyframes prcFade{from{opacity:0}to{opacity:1}}
@keyframes prcFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes prcFadeDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes prcZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes prcSlideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes prcSlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes prcBlur{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
/* logo animation must not be overridden by entrance when logofx is set */
body.logofx-float .gate-logo,body.logofx-pulse .gate-logo,body.logofx-glow .gate-logo{animation-name:prcFade}

.step.is-leaving{transition:opacity .3s,transform .3s}
body.leave-fade .step.is-leaving{opacity:0}
body.leave-slide .step.is-leaving{opacity:0;transform:translateY(-18px)}
body.leave-zoom .step.is-leaving{opacity:0;transform:scale(.95)}

/* ---------- footer ---------- */
.site-footer{margin-top:auto;padding:var(--footer-pad) 20px;font-size:var(--fs-footer);color:var(--footer-text)}
body.footer-line .site-footer{border-top:1px solid var(--footer-border)}
.footer-inner{display:flex;flex-direction:column;gap:10px;max-width:1200px;margin:0 auto;text-align:var(--footer-align)}
body.footer-copy-first .footer-inner{flex-direction:column-reverse}
.footer-menu{display:flex;flex-wrap:wrap;gap:6px var(--footer-gap);justify-content:var(--footer-justify);list-style:none;margin:0;padding:0}
.footer-menu a{color:var(--footer-link);text-decoration:none;text-transform:var(--footer-tt);letter-spacing:var(--footer-ls);transition:color .25s}
.footer-menu a:hover,.footer-menu a:focus-visible{color:var(--footer-link-hover)}
.copyright{margin:0}

/* ---------- inner pages (policies etc.) ---------- */
.mini-logo{padding:24px 24px 0;max-width:var(--inner-max);margin:0 auto;width:100%}
.mini-logo-img{width:var(--mini-logo-w);height:auto;display:block}
.mini-logo a{color:var(--heading);text-decoration:none}
.inner{flex:1;width:100%;max-width:var(--inner-max);margin:0 auto;padding:56px 24px 40px}
.entry-title{font-family:var(--font-heading);font-size:clamp(28px,5vw,calc(var(--fs-heading)*1.05));font-weight:var(--fw-heading);line-height:var(--heading-lh);letter-spacing:var(--heading-ls);text-transform:var(--heading-tt);color:var(--heading);margin:0 0 28px}
.entry-content{max-width:75ch}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--font-heading);color:var(--heading);line-height:1.25;margin:1.8em 0 .6em}
.entry-content p,.entry-content li{color:var(--text)}
.entry-content blockquote{margin:1.5em 0;padding-left:20px;border-left:3px solid var(--accent);color:var(--sub)}
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border:1px solid var(--card-border);padding:10px 12px;text-align:left}

/* ---------- responsive ---------- */
@media (max-width:600px){
	.gate{padding-left:14px;padding-right:14px}
	.gate-card{padding:calc(var(--card-pad)*.55) calc(var(--card-pad)*.45)}
	.gate-logo .prc-logo-img{width:var(--logo-w-m)}
	.phone-row{grid-template-columns:1fr}
	.ref-input{letter-spacing:calc(var(--ref-ls)*.6)}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
}