/* 3D réteg – térbeli, animált megjelenés (csak CSS). Kikapcsolás: töröld a <link …d3.css> sort a build.py-ban. */

/* ===== 3D réteg (csak CSS) ===== */
@keyframes d3rise{from{opacity:0;transform:perspective(1600px) rotateX(16deg) translateY(90px)}to{opacity:1;transform:none}}
@keyframes d3float{from{transform:perspective(1600px) rotateY(-14deg) rotateX(5deg) translateY(0)}to{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg) translateY(-14px)}}
@keyframes d3title{from{opacity:0;transform:perspective(900px) rotateX(75deg) translateZ(-200px);letter-spacing:.2em}to{opacity:1;transform:none}}
@keyframes d3grid{from{background-position:0 0,0 0}to{background-position:0 80px,0 0}}
@keyframes d3wave{0%,100%{transform:none}50%{transform:rotateY(180deg)}}

main > section:not(.bk-gate){animation:d3rise 1.3s cubic-bezier(.2,.7,.2,1) backwards}
main > section:nth-of-type(2){animation-delay:.15s}
main > section:nth-of-type(3){animation-delay:.3s}
main > section:nth-of-type(n+4){animation-delay:.45s}

/* nyitókép: középről kinyíló fotó, lassú kameramozgás és átfutó fényfolt */
@keyframes d3open{from{clip-path:inset(0 50% 0 50%);transform:scale(1.3)}to{clip-path:inset(0 0 0 0);transform:scale(1.12)}}
@keyframes d3dolly2{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1.02) translate3d(-1.2%,-.8%,0)}}
@keyframes d3sheen{0%,62%{background-position:140% 0}100%{background-position:-40% 0}}
.d3-reveal{overflow:hidden}
.d3-reveal .d3-revimg{animation:d3open 2s cubic-bezier(.75,0,.2,1) both,d3dolly2 28s ease-in-out 2s infinite alternate}
.d3-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);background-size:260% 100%;background-repeat:no-repeat;animation:d3sheen 11s ease-in-out 2.4s infinite}
.d3-reveal h1{animation:d3title 1.6s cubic-bezier(.2,.7,.2,1) 1.1s backwards}

/* galériaképek: alulról kinyíló, beálló képek; egérre térbe billennek */
@keyframes d3rise2{from{clip-path:inset(100% 0 0 0);transform:translateY(46px) scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}
[class$="-masonry"] > img{animation-name:d3rise2 !important;animation-duration:1.4s !important;animation-timing-function:cubic-bezier(.75,0,.2,1) !important}
[class$="-gallery"] > img{animation:d3rise2 1.4s cubic-bezier(.75,0,.2,1) backwards}
[class$="-gallery"] > img:nth-child(3n+2){animation-delay:.12s}
[class$="-gallery"] > img:nth-child(3n+3){animation-delay:.24s}
[class$="-gallery"] > img,[class$="-masonry"] > img{transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s ease,opacity .5s ease,filter .5s ease}
[class$="-gallery"] > img:hover,[class$="-masonry"] > img:hover{transform:perspective(1200px) rotateX(3deg) rotateY(-5deg) translateZ(40px) scale(1.03) !important;box-shadow:0 40px 80px rgba(0,0,0,.35) !important;position:relative;z-index:2}

/* lebegő, kissé elfordított nagyítás a kép-szöveg blokkokban */
[class$="-intro"] > img,[class*="-split"] > img,.cs-xmas > img{animation:d3float 8s ease-in-out infinite alternate;box-shadow:40px 60px 90px rgba(0,0,0,.35);transition:transform .8s ease}
[class$="-intro"] > img:hover,[class*="-split"] > img:hover,.cs-xmas > img:hover{animation-play-state:paused}

/* szolgáltatás- és lépéskártyák: térbe billenés */
[class$="-four"] > *,[class$="-two"] > *,[class$="-three"] > *{transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s ease;transform-style:preserve-3d}
[class$="-four"] > *:hover,[class$="-two"] > *:hover,[class$="-three"] > *:hover{transform:perspective(900px) rotateX(7deg) rotateY(-7deg) translateZ(30px);box-shadow:0 40px 70px rgba(0,0,0,.25)}

[class$="-gallery"] > img,[class$="-masonry"] > img{box-shadow:0 18px 40px rgba(0,0,0,.18)}

/* ügyféllogók: megforduló kártyák (elöl fehér, hátul eredeti színű) */
[class$="-clients"] li{transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1);background:transparent !important}
[class$="-clients"] li:hover{transform:rotateY(180deg)}
[class$="-clients"] li::after{content:"";position:absolute;inset:0;background:#FFFFFF;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
[class$="-clients"] .lg-mono{backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:.75 !important}
[class$="-clients"] .lg-col{transform:translate(-50%,-50%) rotateY(180deg) translateZ(2px) !important;opacity:1 !important;backface-visibility:hidden;-webkit-backface-visibility:hidden;z-index:1}
[class$="-clients"] li:nth-child(4n+1){animation:d3wave 1.4s ease-in-out 1.2s 1 backwards}
[class$="-clients"] li:nth-child(4n+2){animation:d3wave 1.4s ease-in-out 1.35s 1 backwards}
[class$="-clients"] li:nth-child(4n+3){animation:d3wave 1.4s ease-in-out 1.5s 1 backwards}
[class$="-clients"] li:nth-child(4n+4){animation:d3wave 1.4s ease-in-out 1.65s 1 backwards}

/* fekete címsávok: végtelenbe futó stúdiópadló */
.d3-floor{position:relative;overflow:hidden}
.d3-floor > *{position:relative;z-index:1}
.d3-floor::before{content:"";position:absolute;left:-50%;right:-50%;bottom:-6%;height:62%;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:80px 80px;transform:perspective(520px) rotateX(72deg);transform-origin:50% 100%;animation:d3grid 3.5s linear infinite;-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%);mask-image:linear-gradient(0deg,#000 10%,transparent 85%)}
.d3-floor h1,.d3-floor h2{animation:d3title 1.6s cubic-bezier(.2,.7,.2,1) .3s backwards}

@media (prefers-reduced-motion:reduce){*,*::before{animation:none !important;transition:none !important}}