/* ==========================================================================
   Effects: preloader, reveal states, 3D tilt, CSS 3D brand mark & cube, keyframes
   Motion is progressive: without JS (or with reduced motion) everything is visible.
   ========================================================================== */

/* Preloader — the logo's three layers assembling --------------------------- */
.preloader { position: fixed; inset: 0; z-index: 999; display: none; place-items: center; background: var(--night); transition: opacity .6s var(--ease), visibility .6s; }
.js .preloader { display: grid; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-mark { position: relative; width: 96px; height: 96px; perspective: 400px; }
.preloader-mark span { position: absolute; inset: 0; border-radius: 6px; animation: preload 1.6s var(--ease) infinite; }
.preloader-mark span:nth-child(1) { background: var(--navy); border: 2px solid rgba(255, 255, 255, .25); transform: rotate(45deg) scale(.95); }
.preloader-mark span:nth-child(2) { background: var(--orange); transform: rotate(-12deg) scale(.82); animation-delay: .12s; }
.preloader-mark span:nth-child(3) { background: #fff; transform: rotate(-8deg) scale(.7); animation-delay: .24s; }
.preloader-mark i { position: absolute; inset: 0; display: grid; place-items: center; font: 700 2.4rem/1 Georgia, serif; color: var(--green); font-style: normal; }

.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 101; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), #fff, var(--green-400)); pointer-events: none; }

/* Reveal states (set by JS, animated by GSAP) ------------------------------- */
.js [data-reveal], .js [data-hero-in] { opacity: 0; }
.js.no-motion [data-reveal], .js.no-motion [data-hero-in] { opacity: 1; }
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word { display: inline-block; will-change: transform; }
/* After splitting, the gradient moves from the <em> onto each word so it survives the transforms */
.is-split em { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.split-word.is-em { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; }
.service-construction .split-word.is-em { background: linear-gradient(120deg, var(--green), var(--green-400) 50%, var(--orange)); -webkit-background-clip: text; background-clip: text; }
.scrub-word { opacity: .14; transition: opacity .2s linear; }

/* 3D tilt -------------------------------------------------------------------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.tilt-shine { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .28), transparent 45%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
[data-tilt]:hover > .tilt-shine { opacity: 1; }

/* CSS 3D brand mark (CTA) ------------------------------------------------------ */
.mark-3d { position: relative; justify-self: center; width: clamp(180px, 22vw, 280px); aspect-ratio: 1; perspective: 900px; }
.mark-3d-inner { position: absolute; inset: 0; transform-style: preserve-3d; animation: mark-spin 14s linear infinite; }
.mark-3d-inner > span { position: absolute; inset: 0; transform-style: preserve-3d; }
.m3-diamond { transform: translateZ(-50px) rotate(45deg) scale(.86); }
.m3-diamond i { position: absolute; width: 50%; height: 50%; }
.m3-diamond i:nth-child(1) { left: 0; top: 0; background: var(--navy); border: 1px solid rgba(255, 255, 255, .2); }
.m3-diamond i:nth-child(2) { right: 0; top: 0; background: var(--green); }
.m3-diamond i:nth-child(3) { right: 0; bottom: 0; background: var(--navy); border: 1px solid rgba(255, 255, 255, .2); }
.m3-diamond i:nth-child(4) { left: 0; bottom: 0; background: var(--green); }
.m3-orange { inset: 10% !important; background: var(--orange); transform: translateZ(-10px) rotate(-14deg); box-shadow: 0 0 60px rgba(254, 102, 0, .5); }
.m3-face { inset: 16% !important; display: grid; place-items: center; background: #fff; color: var(--green); font: 700 clamp(4rem, 8vw, 6.5rem)/1 Georgia, 'Times New Roman', serif; transform: translateZ(40px) rotate(-8deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-radius: 4px; }
.mark-3d-shadow { position: absolute; left: 15%; right: 15%; bottom: -18%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); animation: shadow-pulse 7s ease-in-out infinite; }

/* Rotating brand cube (Why Pietech) -------------------------------------------- */
.why-cube { width: 150px; height: 150px; margin-top: 50px; perspective: 800px; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cube-spin 18s linear infinite; }
.cube span { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(4px); display: grid; place-items: center; font: 700 3.4rem Georgia, serif; color: #fff; }
.cube .f1 { transform: translateZ(75px); background: rgba(254, 102, 0, .55); }
.cube .f2 { transform: rotateY(180deg) translateZ(75px); background: rgba(0, 153, 51, .5); }
.cube .f3 { transform: rotateY(90deg) translateZ(75px); background: rgba(0, 0, 101, .7); }
.cube .f4 { transform: rotateY(-90deg) translateZ(75px); background: rgba(255, 255, 255, .12); }
.cube .f5 { transform: rotateX(90deg) translateZ(75px); background: rgba(255, 255, 255, .9); color: var(--green); }
.cube .f6 { transform: rotateX(-90deg) translateZ(75px); background: rgba(254, 102, 0, .35); }

/* Keyframes ------------------------------------------------------------------- */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mark-spin { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }
@keyframes cube-spin { from { transform: rotateX(-24deg) rotateY(0) rotateZ(0); } to { transform: rotateX(-24deg) rotateY(360deg) rotateZ(360deg); } }
@keyframes shadow-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.8); opacity: .6; } }
@keyframes preload { 0%, 100% { transform: rotate(var(--r, 0deg)) translateZ(0); } 50% { filter: brightness(1.2); } }
@keyframes aurora { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6%, -8%) scale(1.15); } 66% { transform: translate(-6%, 6%) scale(.92); } }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes blink { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js [data-reveal], .js [data-hero-in] { opacity: 1 !important; }
    .scrub-word { opacity: 1; }
}