/* CNHS public website — professional 3D depth: tilting cards, orbit rings and hero parallax.
   Pointer-driven effects only run on mouse/trackpad devices and never with reduced motion. */

@keyframes orbit { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes orbit-reverse { from { transform: rotateX(72deg) rotateY(14deg) rotateZ(360deg); } to { transform: rotateX(72deg) rotateY(14deg) rotateZ(0deg); } }

/* Hero: 3D stage */
.hero { perspective: 1200px; }
.hero__inner { transform-style: preserve-3d; }
.hero__visual { position: relative; display: grid; place-items: center; width: 220px; height: 220px; transform-style: preserve-3d; flex: 0 0 auto; }
.hero__visual .hero__logo {
    position: relative; z-index: 2;
    transform: translateZ(40px) rotateX(calc(var(--my, 0) * -10deg)) rotateY(calc(var(--mx, 0) * 14deg));
    transition: transform .25s ease-out;
    box-shadow: 0 0 0 4px var(--gold), 0 24px 50px rgba(0, 0, 0, .45), 0 0 60px rgba(212, 160, 23, .25);
}
.hero__ring {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(246, 231, 176, .55);
    box-shadow: 0 0 18px rgba(212, 160, 23, .25), inset 0 0 18px rgba(212, 160, 23, .15);
    animation: orbit 16s linear infinite; pointer-events: none;
}
.hero__ring--2 { inset: -26px; border-color: rgba(246, 231, 176, .3); animation: orbit-reverse 24s linear infinite; }
.hero__ring--3 { inset: 26px; border-style: dashed; border-color: rgba(255, 255, 255, .22); animation-duration: 30s; }
.hero__text { transform: translateZ(20px) translateX(calc(var(--mx, 0) * -6px)) translateY(calc(var(--my, 0) * -4px)); transition: transform .3s ease-out; }
@media (min-width: 900px) { .hero__visual { width: 260px; height: 260px; } }

/* Floating depth shapes in the hero background */
.hero__depth { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.hero__depth span {
    position: absolute; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(2px);
    transform: translate3d(calc(var(--mx, 0) * var(--depth) * 1px), calc(var(--my, 0) * var(--depth) * 1px), 0) rotate(var(--rot));
    transition: transform .4s ease-out;
}
.hero__depth span:nth-child(1) { width: 180px; height: 180px; left: 4%; top: 12%; --depth: 18; --rot: 18deg; }
.hero__depth span:nth-child(2) { width: 110px; height: 110px; right: 8%; top: 18%; --depth: -26; --rot: -12deg; }
.hero__depth span:nth-child(3) { width: 240px; height: 240px; right: 22%; bottom: -90px; --depth: 12; --rot: 32deg; }

/* Cards: 3D tilt with light glare */
.grid { perspective: 1400px; }
.card { transform-style: preserve-3d; will-change: transform; position: relative; }
.card.is-tilting { transition: transform .08s linear, box-shadow .3s ease; }
.card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 55%);
    transition: opacity .3s ease; mix-blend-mode: soft-light;
}
.card.is-tilting::after { opacity: 1; }
.card__body { transform: translateZ(24px); }
.card {
    box-shadow: 0 1px 2px rgba(122, 11, 16, .06), 0 8px 20px rgba(122, 11, 16, .08), 0 22px 44px -22px rgba(122, 11, 16, .25);
}

/* Detail hero photo: subtle 3D lift */
.detail__hero { transform: perspective(1200px) rotateX(2deg); transform-origin: top center; transition: transform .5s ease; }
.detail__hero:hover { transform: perspective(1200px) rotateX(0deg) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    .hero__ring, .hero__depth span, .hero__visual .hero__logo, .hero__text, .card, .detail__hero { animation: none !important; transform: none !important; }
}