/* ============================================================ Kras-Trans FX — cinematic one-shot reveal effects Shared: home (index.html) + all 164 PLP pages Principle: every effect has TWO states — hidden (default) and revealed (.kt-in). IntersectionObserver in kt-fx.js adds .kt-in on viewport entry. If JS fails, fallback shows content at .kt-fallback state (~.92 opacity). ============================================================ */ /* Hide duplicate breadcrumb from legacy content_blocks */ body.page-city nav[aria-label="Breadcrumb"]:not(.kt-phero__crumbs), body.page-service nav[aria-label="Breadcrumb"]:not(.kt-phero__crumbs), body.page-country nav[aria-label="Breadcrumb"]:not(.kt-phero__crumbs){display:none!important} /* JS-disabled fail-safe: if no .kt-fx-ready on , force everything visible */ html:not(.kt-fx-ready) [data-kt-reveal], html:not(.kt-fx-ready) [data-kt-child], html:not(.kt-fx-ready) [data-kt-letters] .kt-word > span, html:not(.kt-fx-ready) [data-kt-fx]{ opacity:1!important;transform:none!important } html:not(.kt-fx-ready) [data-kt-fx="gate"]::before, html:not(.kt-fx-ready) [data-kt-fx="gate"]::after, html:not(.kt-fx-ready) [data-kt-fx="portal"]::before, html:not(.kt-fx-ready) [data-kt-fx="portal"]::after, html:not(.kt-fx-ready) [data-kt-fx="curtain"]::before{display:none!important} /* ========================== 1) BASIC REVEAL — fade + slide up ========================== */ html.kt-fx-ready [data-kt-reveal]{ opacity:0; transform:translate3d(0,30px,0); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); will-change:opacity,transform } html.kt-fx-ready [data-kt-reveal].kt-in{opacity:1;transform:none} html.kt-fx-ready [data-kt-reveal-variant="left"]{transform:translate3d(-36px,0,0)} html.kt-fx-ready [data-kt-reveal-variant="right"]{transform:translate3d(36px,0,0)} html.kt-fx-ready [data-kt-reveal-variant="scale"]{opacity:0;transform:scale(.94)} html.kt-fx-ready [data-kt-reveal-variant="scale"].kt-in{opacity:1;transform:scale(1)} /* ========================== 2) LETTER-BY-LETTER reveal for H1/H2 ========================== */ [data-kt-letters]{word-wrap:break-word;overflow-wrap:break-word} [data-kt-letters] .kt-word{display:inline-block;white-space:nowrap} html.kt-fx-ready [data-kt-letters] .kt-word > span{ display:inline-block; opacity:0; transform:translate3d(0,20px,0) rotate(3deg); transition:opacity .55s,transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--kt-i,0) * 24ms); backface-visibility:hidden } html.kt-fx-ready [data-kt-letters].kt-in .kt-word > span{ opacity:1;transform:none } /* Gradient elements (em, mark, .bg-clip-text, etc) — can't be letter-split (breaks gradient). Reveal them as a single block, using --kt-i for stagger like other letters. */ html.kt-fx-ready [data-kt-letters] em, html.kt-fx-ready [data-kt-letters] mark, html.kt-fx-ready [data-kt-letters] .bg-clip-text, html.kt-fx-ready [data-kt-letters] .kt-gradient-text, html.kt-fx-ready [data-kt-letters] [class*="text-transparent"]{ display:inline-block; opacity:0; transform:translate3d(0,20px,0) rotate(3deg); transition:opacity .55s,transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--kt-i,0) * 24ms); backface-visibility:hidden } html.kt-fx-ready [data-kt-letters].kt-in em, html.kt-fx-ready [data-kt-letters].kt-in mark, html.kt-fx-ready [data-kt-letters].kt-in .bg-clip-text, html.kt-fx-ready [data-kt-letters].kt-in .kt-gradient-text, html.kt-fx-ready [data-kt-letters].kt-in [class*="text-transparent"]{ opacity:1;transform:none } /* ========================== 3) STAGGER children — cards/items appear one after another ========================== */ html.kt-fx-ready [data-kt-child]{ opacity:0; transform:translate3d(0,30px,0) scale(.96); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),box-shadow .3s; transition-delay:calc(var(--kt-i,0) * 55ms); will-change:opacity,transform } html.kt-fx-ready [data-kt-child].kt-in{opacity:1;transform:none} html.kt-fx-ready [data-kt-child="tilt"]{transform:translate3d(0,34px,0) perspective(1200px) rotateX(14deg) scale(.96)} html.kt-fx-ready [data-kt-child="tilt"].kt-in{transform:none} html.kt-fx-ready [data-kt-child="left"]{transform:translate3d(-32px,8px,0) scale(.96)} html.kt-fx-ready [data-kt-child="left"].kt-in{transform:none} html.kt-fx-ready [data-kt-child="right"]{transform:translate3d(32px,8px,0) scale(.96)} html.kt-fx-ready [data-kt-child="right"].kt-in{transform:none} /* ========================== 4) PORTAL / GATE — cinematic doors open on viewport entry ========================== */ [data-kt-fx]{position:relative} [data-kt-fx] > *{position:relative;z-index:2} [data-kt-fx="gate"],[data-kt-fx="portal"]{ overflow:hidden;isolation:isolate; perspective:1600px;perspective-origin:50% 40% } html.kt-fx-ready [data-kt-fx="gate"]::before, html.kt-fx-ready [data-kt-fx="portal"]::before{ content:"";position:absolute;top:-2%;bottom:-2%;left:-1px;width:62%;z-index:10;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,transparent 45%), linear-gradient(135deg,#0b1220 0%,#0f172a 25%,#1e3a8a 65%,#2563eb 100%); transform-origin:left center; transform:translate3d(0,0,0) rotateY(0) scaleX(1); box-shadow:inset -10px 0 40px rgba(0,0,0,.55); transition:transform 1.2s cubic-bezier(.65,0,.2,1),box-shadow 1s; will-change:transform;backface-visibility:hidden } html.kt-fx-ready [data-kt-fx="gate"]::after, html.kt-fx-ready [data-kt-fx="portal"]::after{ content:"";position:absolute;top:-2%;bottom:-2%;right:-1px;width:62%;z-index:10;pointer-events:none; background:linear-gradient(-90deg,rgba(255,255,255,.06) 0%,transparent 45%), linear-gradient(225deg,#0b1220 0%,#0f172a 25%,#064e3b 65%,#059669 100%); transform-origin:right center; transform:translate3d(0,0,0) rotateY(0) scaleX(1); box-shadow:inset 10px 0 40px rgba(0,0,0,.55); transition:transform 1.2s cubic-bezier(.65,0,.2,1),box-shadow 1s; will-change:transform;backface-visibility:hidden } html.kt-fx-ready [data-kt-fx="gate"].kt-in::before, html.kt-fx-ready [data-kt-fx="portal"].kt-in::before{ transform:translate3d(-15%,0,0) rotateY(-68deg) scaleX(.85);box-shadow:none } html.kt-fx-ready [data-kt-fx="gate"].kt-in::after, html.kt-fx-ready [data-kt-fx="portal"].kt-in::after{ transform:translate3d(15%,0,0) rotateY(68deg) scaleX(.85);box-shadow:none } [data-kt-fx-tone="emerald"]::before{background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 45%),linear-gradient(135deg,#022c22,#064e3b 35%,#059669 70%,#10b981 100%)!important} [data-kt-fx-tone="emerald"]::after{background:linear-gradient(-90deg,rgba(255,255,255,.06),transparent 45%),linear-gradient(225deg,#052e16,#0c4a6e 45%,#1e3a8a 75%,#2563eb 100%)!important} [data-kt-fx-tone="violet"]::before{background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 45%),linear-gradient(135deg,#1e1b4b,#4c1d95 40%,#7c3aed 75%,#a855f7 100%)!important} [data-kt-fx-tone="violet"]::after{background:linear-gradient(-90deg,rgba(255,255,255,.06),transparent 45%),linear-gradient(225deg,#3f0f1a,#7f1d1d 45%,#b91c1c 75%,#dc2626 100%)!important} /* Content inside portal — cinematic dolly (one-shot when .kt-in) */ html.kt-fx-ready [data-kt-fx="gate"] > *:not(style):not(script), html.kt-fx-ready [data-kt-fx="portal"] > *:not(style):not(script){ transform:translate3d(0,20px,0) scale(.96); opacity:.6; transition:opacity .9s cubic-bezier(.22,1,.36,1) .15s,transform 1s cubic-bezier(.22,1,.36,1) .15s } html.kt-fx-ready [data-kt-fx="gate"].kt-in > *:not(style):not(script), html.kt-fx-ready [data-kt-fx="portal"].kt-in > *:not(style):not(script){ transform:none;opacity:1 } /* ========================== 5) 3D TILT — rotate-in on entry ========================== */ [data-kt-fx="tilt3d"]{perspective:1400px;perspective-origin:50% 30%} html.kt-fx-ready [data-kt-fx="tilt3d"] > *{ transform-origin:center top; transform:perspective(1400px) rotateX(22deg) rotateY(-5deg) scale(.88); opacity:.3; transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s } html.kt-fx-ready [data-kt-fx="tilt3d"].kt-in > *{ transform:none;opacity:1 } /* ========================== 6) ZOOM dolly — scale up from distance ========================== */ [data-kt-fx="zoom"]{transform-origin:50% 65%} html.kt-fx-ready [data-kt-fx="zoom"]{ transform:translate3d(0,40px,0) scale(.85); opacity:.3; transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s } html.kt-fx-ready [data-kt-fx="zoom"].kt-in{transform:none;opacity:1} /* ========================== 7) CURTAIN fall — dark overlay retracts ========================== */ [data-kt-fx="curtain"]{overflow:hidden;isolation:isolate} html.kt-fx-ready [data-kt-fx="curtain"]::before{ content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:linear-gradient(180deg,#0f172a 0%,#1e3a8a 45%,#2563eb 100%); transform-origin:top; transform:scaleY(1); transition:transform 1s cubic-bezier(.7,0,.2,1); will-change:transform } html.kt-fx-ready [data-kt-fx="curtain"].kt-in::before{transform:scaleY(0)} /* ========================== 8) FLIP card — Y-axis swing ========================== */ [data-kt-fx="flip"]{perspective:1800px} html.kt-fx-ready [data-kt-fx="flip"] > *{ transform:perspective(1800px) rotateY(-75deg) translate3d(0,0,-200px); opacity:0; transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s } html.kt-fx-ready [data-kt-fx="flip"].kt-in > *{transform:none;opacity:1} /* ========================== 9) MAGNETIC TILT — cursor-follow on desktop (opt-in via data-kt-tilt) ========================== */ @media (hover: hover) and (min-width: 900px){ [data-kt-tilt]{ transform:perspective(1200px) rotateX(calc(var(--mty,0) * 5deg)) rotateY(calc(var(--mtx,0) * 7deg)) translate3d(0,calc(var(--mth,0) * -4px),0); transition:transform .22s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d; position:relative } [data-kt-tilt]:hover{--mth:1} [data-kt-tilt]::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(320px circle at calc(50% + var(--mtx,0) * 50%) calc(50% + var(--mty,0) * -50%), rgba(255,255,255,.12) 0%,transparent 55%); opacity:0;transition:opacity .28s;z-index:3 } [data-kt-tilt]:hover::after{opacity:1} [class~="dark"] [data-kt-tilt]::after{ background:radial-gradient(320px circle at calc(50% + var(--mtx,0) * 50%) calc(50% + var(--mty,0) * -50%), rgba(147,197,253,.12) 0%,transparent 55%) } [data-kt-child]:hover,.kt-lic__doc:hover,.kt-lic__fact:hover{ z-index:5; box-shadow:0 24px 60px -22px rgba(37,99,235,.28),0 10px 24px -10px rgba(0,0,0,.15) } [class~="dark"] [data-kt-child]:hover, [class~="dark"] .kt-lic__doc:hover, [class~="dark"] .kt-lic__fact:hover{ box-shadow:0 24px 60px -22px rgba(96,165,250,.4),0 10px 24px -10px rgba(0,0,0,.4) } } /* ========================== 10) BUTTON shine sweep on hover ========================== */ @media (hover: hover){ a[class*="btn-primary"],button[type="submit"], a[class*="from-green-"],a[class*="bg-green-500"],a[class*="bg-green-600"],a[class*="bg-green-700"]{ position:relative;overflow:hidden;isolation:isolate } a[class*="btn-primary"]::before,button[type="submit"]::before, a[class*="from-green-"]::before,a[class*="bg-green-500"]::before, a[class*="bg-green-600"]::before,a[class*="bg-green-700"]::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%) skewX(-12deg); transition:transform .65s cubic-bezier(.22,1,.36,1) } a[class*="btn-primary"]:hover::before,button[type="submit"]:hover::before, a[class*="from-green-"]:hover::before,a[class*="bg-green-500"]:hover::before, a[class*="bg-green-600"]:hover::before,a[class*="bg-green-700"]:hover::before{ transform:translateX(120%) skewX(-12deg) } } /* ========================== 11) HERO ken-burns — pure CSS, slow zoom in/out ========================== */ @keyframes kt-hero-zoom{from{transform:scale(1.03)}to{transform:scale(1.1)}} @media (prefers-reduced-motion: no-preference){ section#hero picture img, section.kt-phero picture img, section[data-parallax-container] picture img{ animation:kt-hero-zoom 24s ease-in-out infinite alternate; will-change:transform } } /* ========================== 12) PERF — content-visibility on far-below-fold sections ========================== */ main > section:nth-of-type(n+6){ content-visibility:auto; contain-intrinsic-size:auto 720px } /* ========================== 13) A11Y — reduced motion ========================== */ @media (prefers-reduced-motion: reduce){ [data-kt-reveal],[data-kt-child],[data-kt-letters] .kt-word > span, [data-kt-tilt],[data-kt-fx],[data-kt-fx] > *, [data-kt-fx]::before,[data-kt-fx]::after, a[class*="btn-primary"]::before,button[type="submit"]::before, section#hero picture img,section.kt-phero picture img{ opacity:1!important; transform:none!important; animation:none!important; transition:none!important } [data-kt-fx="gate"]::before,[data-kt-fx="gate"]::after, [data-kt-fx="portal"]::before,[data-kt-fx="portal"]::after, [data-kt-fx="curtain"]::before{display:none!important} }