/* ========================================================================== BCE interaction layer — hero mouse-parallax (+ card 3D tilt, phase 2) Pure CSS/JS. Transform-only, GPU-composited. All motion is gated behind , which enhance.js adds ONLY when: - the pointer is fine (mouse, not touch), and - prefers-reduced-motion is not set. With no fx-on class the layout is completely static — this is the reduced-motion / touch / no-JS fallback, for free. ========================================================================== */ /* --- Hero foreground emblem (the floating gold/logo layer) ----------------- */ .bce-home-hero .hero-emblem { position: absolute; top: 50%; right: 5%; z-index: 1; /* above bg/overlay (0), behind .wrap text (2) */ width: clamp(220px, 26vw, 440px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; opacity: 0.18; transition: opacity .9s ease; will-change: transform; } /* Slow idle "breathe" so the emblem feels alive even with no cursor input. Lives on the so it composes with the parallax transform on the parent .hero-emblem. Only under fx-on (so reduced-motion users get none). */ @keyframes bce-emblem-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(0.9deg); } } html.fx-on .bce-home-hero .hero-emblem img { animation: bce-emblem-float 11s ease-in-out infinite; } .bce-home-hero .hero-emblem img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(212, 162, 74, 0.35)); } /* Hide the emblem on banner slides (where the hero content is hidden too). */ .bce-home-hero.banner-active .hero-emblem { opacity: 0; } /* No emblem on small screens — keep mobile light. 920 to match MOBILE_MAX in index.html; the two must agree. */ @media (max-width: 920px) { .bce-home-hero .hero-emblem { display: none; } } /* --- Parallax (active only under .fx-on) ---------------------------------- enhance.js writes two eased custom properties on the hero section: --mx, --my normalized cursor offset from centre, range ~[-1, 1]. Each layer multiplies them by a depth factor. Background moves least, foreground emblem moves most (capped at 14px). React only ever sets background-image on .bg, so it never clobbers these CSS transforms. */ html.fx-on .bce-home-hero .bg:not(.is-banner) { /* keep the existing cover-zoom; bump scale so a 14px shift never reveals the dark backplate at the edges */ transform: scale(1.06) translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 4px), 0); will-change: transform; } html.fx-on .bce-home-hero .overlay { transform: scale(1.06) translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px), 0); will-change: transform; } html.fx-on .bce-home-hero .hero-content { transform: translate3d(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 9px), 0); will-change: transform; } html.fx-on .bce-home-hero .hero-emblem { /* foreground: moves most (the ~14px cap), with a hair of rotation for depth */ transform: translateY(-50%) translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 14px), 0) rotate(calc(var(--mx, 0) * 1.4deg)); } /* --- Card 3D tilt (Phase 2, active only under .fx-on) ---------------------- The rotateX/rotateY/lift transform is written inline by enhance.js per frame. Here we only set up the 3D context and the soft shadow, which we transition in/out via the .fx-tilt class for a smooth spring-back feel. */ html.fx-on .bce-service-card, html.fx-on .bce-proj-card { position: relative; transform-style: preserve-3d; transition: box-shadow .28s ease, border-color .28s ease; } html.fx-on .bce-service-card.fx-tilt, html.fx-on .bce-proj-card.fx-tilt { box-shadow: 0 26px 56px -18px rgba(10, 45, 34, 0.5); border-color: rgba(212, 162, 74, 0.55); /* gold accent on hover */ z-index: 2; } /* Soft gold light that tracks the cursor across the card face. JS sets --gx/--gy (cursor position as %); the glow fades in/out with .fx-tilt. */ html.fx-on .bce-service-card::after, html.fx-on .bce-proj-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(212, 162, 74, 0.13), transparent 60%); } html.fx-on .bce-service-card.fx-tilt::after, html.fx-on .bce-proj-card.fx-tilt::after { opacity: 1; }