/* ============================================================
   Bytes Yatra — 3D Theme
   Shared by all public pages (loaded after each page's own styles).
   Pure CSS 3D + a small script: no WebGL libraries, so pages stay fast
   and all content stays as plain HTML for search engines.
   ============================================================ */

:root {
    --y3d-brand: var(--primary, #3F5FC0);
    --y3d-brand-2: var(--secondary, #5B7FE8);
    --y3d-night: #0B1120;
    --y3d-depth: color-mix(in srgb, var(--y3d-brand) 62%, #000);
    --y3d-ease: cubic-bezier(.7, 0, .25, 1);
}

/* ═══════════ LOADER + PAGE-CHANGE DOORS ═══════════ */
#y3d-loader {
    position: fixed; inset: 0; z-index: 100000;
    perspective: 1600px; overflow: hidden;
    /* Safety net: if the script never runs, never keep content hidden */
    animation: y3dFailsafe 0s linear 4s forwards;
}
#y3d-loader.y3d-js { animation: none; }
@keyframes y3dFailsafe { to { visibility: hidden; opacity: 0; } }

.y3d-door {
    position: absolute; top: 0; bottom: 0; width: 50.5%;
    background: var(--y3d-night);
    transition: transform .75s var(--y3d-ease), filter .75s var(--y3d-ease);
    backface-visibility: hidden; will-change: transform;
}
.y3d-door::after { /* panel edge highlight for a thick, physical feel */
    content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(transparent, rgba(255,255,255,.35), transparent);
}
.y3d-door-left  { left: 0;  transform-origin: left center;  --door-x: 100%; }
.y3d-door-left::after  { right: 0; }
.y3d-door-right { right: 0; transform-origin: right center; --door-x: 0%; }
.y3d-door-right::after { left: 0; }

.y3d-loader-core {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.6rem;
    transform-style: preserve-3d;
    transition: transform .7s var(--y3d-ease), opacity .45s ease;
}
.y3d-logo {
    position: relative; width: 96px; height: 96px;
    transform-style: preserve-3d;
    animation: y3dSpin 2.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
.y3d-logo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    transform: translateZ(calc(var(--z) * -2.5px));
}
.y3d-logo img:not(:first-child) { filter: brightness(.45) saturate(1.2); }
@keyframes y3dSpin {
    0%   { transform: rotateX(12deg) rotateY(0deg); }
    50%  { transform: rotateX(-12deg) rotateY(180deg); }
    100% { transform: rotateX(12deg) rotateY(360deg); }
}
.y3d-orbit { position: absolute; width: 190px; height: 190px; transform-style: preserve-3d; animation: y3dOrbit 7s linear infinite; }
.y3d-orbit span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--y3d-brand-2) 70%, #fff);
    opacity: .45;
}
.y3d-orbit span:nth-child(1) { transform: rotateX(72deg); }
.y3d-orbit span:nth-child(2) { transform: rotateY(72deg); }
.y3d-orbit span:nth-child(3) { transform: rotateX(72deg) rotateY(60deg); border-style: dashed; }
@keyframes y3dOrbit { to { transform: rotateZ(360deg) rotateX(360deg); } }
.y3d-loader-name {
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .78rem;
    letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.85);
    margin-top: 3.2rem;
}

/* Doors swing open into the screen; logo flies toward the viewer */
#y3d-loader.y3d-open { pointer-events: none; }
#y3d-loader.y3d-open .y3d-door-left  { transform: rotateY(96deg);  filter: brightness(.5); }
#y3d-loader.y3d-open .y3d-door-right { transform: rotateY(-96deg); filter: brightness(.5); }
#y3d-loader.y3d-open .y3d-loader-core { transform: translateZ(700px); opacity: 0; }
#y3d-loader.y3d-gone { visibility: hidden; }

/* ═══════════ SCROLL PROGRESS ═══════════ */
#y3d-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001;
    background: var(--y3d-brand);
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ═══════════ NAVBAR ═══════════ */
.navbar { perspective: 600px; }
.nav-brand img { transition: transform .9s cubic-bezier(.2, .8, .2, 1) !important; }
.nav-brand:hover img { transform: rotateY(360deg) !important; }

/* ═══════════ 3D BUTTONS ═══════════ */
.btn-primary, .job-apply, .submit-btn, .newsletter-form button, .y3d-btn {
    box-shadow: 0 5px 0 var(--y3d-depth), 0 14px 26px -10px color-mix(in srgb, var(--y3d-brand) 70%, transparent) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .2s !important;
}
.btn-primary:hover, .job-apply:hover, .submit-btn:hover:not(:disabled), .newsletter-form button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 0 var(--y3d-depth), 0 20px 32px -10px color-mix(in srgb, var(--y3d-brand) 75%, transparent) !important;
}
.btn-primary:active, .job-apply:active, .submit-btn:active, .newsletter-form button:active {
    transform: translateY(4px) !important;
    box-shadow: 0 1px 0 var(--y3d-depth), 0 4px 10px -6px color-mix(in srgb, var(--y3d-brand) 70%, transparent) !important;
}
.newsletter-form button { --y3d-depth: color-mix(in srgb, var(--accent, #FF6B35) 60%, #000); }
.btn-outline { box-shadow: 0 5px 0 color-mix(in srgb, var(--y3d-brand) 25%, transparent); transition: transform .18s, box-shadow .18s, background .2s, color .2s !important; }
.btn-outline:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--y3d-brand) 25%, transparent); }

/* ═══════════ 3D HEADINGS ═══════════ */
.hero h1, .page-banner h1, .post-title {
    text-shadow:
        1px 1px 0 color-mix(in srgb, var(--y3d-brand) 22%, #fff),
        2px 2px 0 color-mix(in srgb, var(--y3d-brand) 18%, #fff),
        3px 3px 0 color-mix(in srgb, var(--y3d-brand) 14%, #fff),
        6px 10px 18px color-mix(in srgb, var(--y3d-brand) 22%, transparent);
}
.section-title { text-shadow: 1px 1px 0 color-mix(in srgb, var(--y3d-brand) 16%, #fff), 2px 2px 0 color-mix(in srgb, var(--y3d-brand) 10%, #fff), 4px 8px 14px color-mix(in srgb, var(--y3d-brand) 14%, transparent); }
.stat-number { text-shadow: 1px 1px 0 rgba(0,0,0,.25), 2px 2px 0 rgba(0,0,0,.2), 3px 3px 0 rgba(0,0,0,.15), 4px 10px 18px rgba(0,0,0,.3); }

/* ═══════════ HERO / BANNER 3D SCENE ═══════════ */
.hero, .page-banner { position: relative; overflow: hidden; isolation: isolate; }
.page-banner > *:not(.y3d-scene), .hero > *:not(.y3d-scene) { position: relative; z-index: 1; }
.y3d-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; overflow: hidden; }

/* Perspective grid floor */
.y3d-grid {
    position: absolute; left: -50%; right: -50%; bottom: -12%; height: 70%;
    background-image:
        linear-gradient(color-mix(in srgb, var(--y3d-brand) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--y3d-brand) 22%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: rotateX(72deg); transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    animation: y3dGridMove 3.5s linear infinite;
}
@keyframes y3dGridMove { to { background-position: 0 56px, 0 0; } }

/* Floating wireframe cubes */
.y3d-mini {
    position: absolute; width: var(--size, 46px); height: var(--size, 46px);
    left: var(--x); top: var(--y); transform-style: preserve-3d;
    animation: y3dFloat var(--dur, 14s) linear infinite; animation-delay: var(--delay, 0s);
    opacity: .75;
}
.y3d-mini i {
    position: absolute; inset: 0;
    border: 1.5px solid color-mix(in srgb, var(--y3d-brand) 55%, transparent);
    background: color-mix(in srgb, var(--y3d-brand-2) 7%, transparent);
    border-radius: 6px;
}
.y3d-mini i:nth-child(1) { transform: translateZ(calc(var(--size, 46px) / 2)); }
.y3d-mini i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--size, 46px) / 2)); }
.y3d-mini i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--size, 46px) / 2)); }
.y3d-mini i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--size, 46px) / 2)); }
.y3d-mini i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--size, 46px) / 2)); }
.y3d-mini i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--size, 46px) / 2)); }
@keyframes y3dFloat {
    0%   { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    50%  { transform: translate3d(0, -26px, 60px) rotateX(180deg) rotateY(90deg); }
    100% { transform: translate3d(0, 0, 0) rotateX(360deg) rotateY(360deg); }
}

/* ═══════════ HOMEPAGE HERO CUBE ═══════════ */
.y3d-cube-stage { --s: 230px; position: relative; width: calc(var(--s) * 1.7); height: calc(var(--s) * 1.7); display: flex; align-items: center; justify-content: center; perspective: 1100px; }
.y3d-cube-tilt { transform-style: preserve-3d; transition: transform .4s ease-out; }
.y3d-cube {
    position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d;
    animation: y3dCube 18s linear infinite;
}
.y3d-cube-stage:hover .y3d-cube { animation-play-state: paused; }
@keyframes y3dCube { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.y3d-face {
    position: absolute; inset: 0; border-radius: 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem;
    background: var(--y3d-brand);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 0 40px rgba(255,255,255,.12), inset 0 -18px 30px rgba(0,0,0,.18);
    backface-visibility: hidden;
}
.y3d-face i { font-size: 2.6rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.y3d-face img { width: 46%; height: auto; filter: brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.y3d-face small { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .74rem; opacity: .85; }
.y3d-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.y3d-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.y3d-face.f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.y3d-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.y3d-face.f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.y3d-face.f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.y3d-cube-shadow {
    position: absolute; bottom: 4%; left: 50%; width: calc(var(--s) * 1.05); height: 34px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--y3d-brand) 38%, transparent), transparent);
    filter: blur(6px); animation: y3dShadow 5s ease-in-out infinite;
}
.y3d-cube-float { animation: y3dBob 5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes y3dBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes y3dShadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.82); opacity: .6; } }
.y3d-cube-stage .hero-float { z-index: 2; }

/* ═══════════ 3D TILT CARDS ═══════════ */
/* theme-3d.js sets the transform inline while the pointer is over the card */
.y3d-tilt { position: relative; }
.y3d-tilt.y3d-active {
    transition: transform .08s linear, box-shadow .3s ease !important;
    box-shadow: var(--sx, 0px) var(--sy, 18px) 42px -14px color-mix(in srgb, var(--y3d-brand) 45%, transparent) !important;
}
.y3d-tilt.y3d-settle { transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease !important; }
.y3d-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.38), transparent 55%);
    opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.y3d-tilt.y3d-active .y3d-glare { opacity: 1; }

/* Icons inside cards get a subtle extruded look */
.service-icon, .about-feat i, .culture-card i, .contact-icon, .value-card i {
    box-shadow: 0 4px 0 color-mix(in srgb, var(--y3d-brand) 20%, transparent);
}
.culture-card i, .about-feat i, .value-card i { box-shadow: none; text-shadow: 2px 3px 0 color-mix(in srgb, var(--y3d-brand) 22%, transparent); }

/* ═══════════ 3D SCROLL REVEALS ═══════════ */
.reveal { transform: perspective(1200px) rotateX(24deg) translate3d(0, 50px, -90px); transform-origin: 50% 100%; }
.reveal.left  { transform: perspective(1200px) rotateY(28deg) translate3d(-50px, 0, -90px); transform-origin: 0 50%; }
.reveal.right { transform: perspective(1200px) rotateY(-28deg) translate3d(50px, 0, -90px); transform-origin: 100% 50%; }
.reveal.scale { transform: perspective(1200px) translateZ(-220px); }
.reveal.visible { transform: none; }

html [data-aos="fade-up"][data-aos="fade-up"]       { transform: perspective(1200px) rotateX(24deg) translate3d(0, 60px, -90px); transform-origin: 50% 100%; }
html [data-aos="fade-right"][data-aos="fade-right"] { transform: perspective(1200px) rotateY(28deg) translate3d(-60px, 0, -90px); transform-origin: 0 50%; }
html [data-aos="fade-left"][data-aos="fade-left"]   { transform: perspective(1200px) rotateY(-28deg) translate3d(60px, 0, -90px); transform-origin: 100% 50%; }
html [data-aos][data-aos][data-aos].aos-animate     { transform: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
    html body .hero .hero-visual { display: flex !important; justify-content: center; margin-top: 1rem; }
    .y3d-cube-stage { --s: 150px; }
    .y3d-cube-stage .hero-float { display: none; }
    .y3d-face i { font-size: 1.8rem; }
    .y3d-face { font-size: .85rem; border-radius: 18px; }
    .y3d-face small { display: none; }
    .y3d-mini { --size: 30px !important; }
}
@media (max-width: 380px) { .y3d-cube-stage { --s: 120px; } }

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
    .y3d-logo, .y3d-orbit, .y3d-grid, .y3d-mini, .y3d-cube, .y3d-cube-float, .y3d-cube-shadow { animation: none !important; }
    .y3d-door, .y3d-loader-core { transition-duration: .2s !important; }
    .reveal, html [data-aos][data-aos] { transform: none !important; }
}