/* Bezeftour — premium interactive 3D gate cards (v1)
   Scoped to .gates > a.gate. Only transform/opacity are animated (driven by
   CSS variables from gates3d.js). Colors, texts, links and order unchanged. */
@property --rx{syntax:'<number>';inherits:false;initial-value:0}
@property --ry{syntax:'<number>';inherits:false;initial-value:0}
@property --z{syntax:'<number>';inherits:false;initial-value:0}
@property --s{syntax:'<number>';inherits:false;initial-value:1}
.gates{--g3-gold:#e4c875;--g3-ink:#3f2468;--g3-dir:1}
[dir=rtl] .gates{--g3-dir:-1}

.gates>a.gate{
 --rx:0;--ry:0;--s:1;--z:0;--p:0;--h:0;--g3r:22px;
 position:relative;
 border-radius:var(--g3r);
 transform:perspective(800px) translate3d(0,0,calc(var(--z)*1px)) rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg)) scale(var(--s));
 perspective:600px;
 transition:background-color .25s ease,opacity .3s ease;
 animation-fill-mode:backwards;
 touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden
}
.gates>a.gate:hover{box-shadow:none}
.gates>a.gate.g3-on{z-index:2}
.gates>a.gate.g3-hot{z-index:1}

/* depth shadow (outside the glass only) */
.gates>a.gate::before{
 content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
 box-shadow:0 16px 30px -12px rgba(10,4,22,.62);
 opacity:calc(var(--h)*.6 + var(--p)*.8);
 will-change:opacity
}
/* active inner layer + thin gold edge + soft glow */
.gates>a.gate::after{
 content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;
 background:radial-gradient(130% 75% at 50% -12%,rgba(228,200,117,.17),rgba(228,200,117,0) 62%);
 box-shadow:inset 0 0 0 1px rgba(228,200,117,.78),inset 0 0 26px rgba(228,200,117,.10),0 0 20px rgba(228,200,117,.24);
 opacity:max(calc(var(--h)*.32),var(--p));
 will-change:opacity
}

/* icon: small 3D glass object with gold accent */
.gates>a.gate .icon{
 position:relative;width:72px;height:72px;border-radius:20px;
 background:none;color:var(--g3-gold);
 transform-style:preserve-3d;
 transform:translate3d(0,calc(var(--p)*-2px),calc(var(--h)*8px + var(--p)*24px)) rotateY(calc(var(--p)*7deg*var(--g3-dir))) rotateZ(calc(var(--p)*-5deg*var(--g3-dir)));
 flex:none
}
.gates>a.gate .icon::before{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 55%,rgba(228,200,117,.13));
 border:1px solid rgba(228,200,117,.46);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -10px 18px rgba(32,21,51,.22),0 7px 14px -6px rgba(10,4,22,.55)
}
.gates>a.gate .icon::after{
 content:"";position:absolute;left:2px;right:2px;top:2px;height:46%;pointer-events:none;
 border-radius:18px 18px 40% 40%/18px 18px 22% 22%;
 background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));
 transform:translateZ(1px)
}
.gates>a.gate .g3-img{
 position:relative;display:block;width:116%;height:116%;max-width:none;object-fit:contain;
 transform:translateZ(16px);pointer-events:none;-webkit-user-drag:none;user-select:none
}
.gates>a.gate .icon svg{display:none;position:relative;transform:translateZ(16px)}
.gates>a.gate.g3-noimg .g3-img{display:none}
.gates>a.gate.g3-noimg .icon svg{display:block}

/* title moves forward, description settles in */
.gates>a.gate>div:not(.icon){transform-style:preserve-3d}
.gates>a.gate h2{transform:translate3d(0,0,calc(var(--h)*4px + var(--p)*14px))}
.gates>a.gate h2,.gates>a.gate p{-webkit-hyphens:none;hyphens:none}
.gates>a.gate p{
 opacity:calc(.86 + var(--h)*.14 + var(--p)*.14);
 transform:translate3d(0,0,calc(var(--p)*6px))
}

/* small active indicator (arrow chip) */
.gates>a.gate .g3-go{
 position:absolute;top:18px;inset-inline-end:18px;
 width:30px;height:30px;border-radius:50%;
 display:grid;place-items:center;
 border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);
 transform:translate3d(0,0,calc(var(--h)*6px + var(--p)*12px)) scale(calc(1 + var(--p)*.06))
}
.gates>a.gate .g3-go::before{
 content:"";position:absolute;inset:-1px;border-radius:50%;
 background:var(--g3-gold);box-shadow:0 0 12px rgba(228,200,117,.45);
 opacity:var(--p)
}
.gates>a.gate .g3-go svg{position:relative;width:15px;height:15px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .gates>a.gate .g3-go svg{transform:scaleX(-1)}
.gates>a.gate .g3-go .w{stroke:#fff;opacity:calc(1 - var(--p))}
.gates>a.gate .g3-go .k{stroke:var(--g3-ink);opacity:var(--p)}

/* leaving: others step back while the chosen card stays active */
.gates.g3-leaving>a.gate:not(.g3-on){opacity:.5}

/* keyboard focus */
.gates>a.gate:focus-visible{outline:2px solid #f1c75f;outline-offset:3px;border-radius:var(--g3r)}

/* tablet + mobile: five cards in one row */
@media(max-width:900px){
 .gates{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1.5vw,14px)}
 .gates>a.gate{
  --g3r:clamp(14px,3.8vw,22px);
  min-height:0;
  padding:clamp(9px,2.4vw,18px) clamp(3px,1vw,12px) clamp(8px,2.2vw,16px);
  justify-content:flex-start;align-items:center;text-align:center
 }
 .gates>a.gate .icon{width:clamp(40px,12vw,80px);height:clamp(40px,12vw,80px);border-radius:clamp(12px,3.4vw,20px)}
 .gates>a.gate .icon::after{border-radius:inherit;border-bottom-left-radius:40% 22%;border-bottom-right-radius:40% 22%}
 .gates>a.gate>div:not(.icon){width:100%}
 .gates>a.gate h2{font-size:clamp(9.5px,2.8vw,15px);line-height:1.28;margin:clamp(7px,2vw,14px) 0 clamp(3px,.8vw,6px);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
 .gates>a.gate p{font-size:clamp(8.5px,2.3vw,12px);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
 .gates>a.gate .g3-go{position:relative;top:auto;inset-inline-end:auto;margin:auto auto 0;flex:none;width:clamp(18px,5.2vw,28px);height:clamp(18px,5.2vw,28px)}
 .gates>a.gate>div:not(.icon){padding-bottom:clamp(6px,1.8vw,10px)}
 .gates>a.gate .g3-go svg{width:58%;height:58%}
}
@media(max-width:560px){
 .gates{margin-inline:-2.5vw}
}
@media(max-width:359px){
 .gates>a.gate p{display:none}
}

/* reduced motion (OS) or site motion setting off: no tilt/depth moves, opacity only */
@media(prefers-reduced-motion:reduce){
 .gates>a.gate,.gates>a.gate .icon,.gates>a.gate h2,.gates>a.gate p,.gates>a.gate .g3-go{transform:none!important}
}
.gates.g3-still>a.gate,.gates.g3-still>a.gate .icon,.gates.g3-still>a.gate h2,.gates.g3-still>a.gate p,.gates.g3-still>a.gate .g3-go{transform:none!important}