/* ==========================================================================
   RIIS-DATA – 3D effects on the public pages (Admin → Front page → "3D effects").
   Only CSS 3D transforms + vanilla JS (assets/js/fx3d.js) – no libraries, no WebGL.
   html.fx3d-on   = effects switched on in the admin (static depth: spheres, extruded numbers, 3D buttons)
   html.fx3d-js   = motion allowed (JS running and the visitor has not asked for reduced motion)
   ========================================================================== */

/* ---------- 3D spheres (the logo's dots) floating behind the content ---------- */
.fx-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-orb { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1;
  transform: translate3d(calc(var(--mx, 0) * var(--z) * 1px), calc(var(--my, 0) * var(--z) * 1px + var(--sy, 0) * var(--z) * -.25px), 0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1); opacity: var(--o, 1); filter: blur(var(--b, 0px)); }
.fx-orb i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 3%, #cfd8dc 9%, #78909c 32%, #455a64 62%, #263238 100%);
  box-shadow: inset -.35em -.45em .9em rgba(0, 0, 0, .35), 0 1.2em 1.6em -.9em rgba(38, 50, 56, .55);
  font-size: calc(var(--s) / 6); animation: fxBob var(--t, 7s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.fx-orb.ink i { background: radial-gradient(circle at 32% 28%, #9a9aa5 0 3%, #4a4a52 12%, #1b1b1f 45%, #000 100%); }
.fx-orb.light i { background: radial-gradient(circle at 32% 28%, #fff 0 8%, #eceff1 30%, #b0bec5 70%, #90a4ae 100%); box-shadow: inset -.35em -.45em .9em rgba(38, 50, 56, .25), 0 1.2em 1.6em -.9em rgba(0, 0, 0, .35); }
@keyframes fxBob { from { transform: translate3d(0, -10px, 0) rotate(0deg); } to { transform: translate3d(0, 12px, 0) rotate(20deg); } }

/* ---------- 3D grid floor ---------- */
.fx-floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 48%; perspective: 300px; perspective-origin: 50% 0%; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%, rgba(0, 0, 0, .5) 45%, transparent 75%); mask-image: linear-gradient(to top, transparent 0%, #000 18%, rgba(0, 0, 0, .5) 45%, transparent 75%); }
.page-head .fx-floor { height: 60%; opacity: .6; }
.fx-floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300%; transform-origin: 50% 100%; transform: rotateX(80deg);
  background-image: linear-gradient(rgba(84, 110, 122, .38) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(84, 110, 122, .38) 1.5px, transparent 1.5px);
  background-size: 64px 64px; animation: fxFloor 2.8s linear infinite; }
.section-dark .fx-floor::before, .cta-box .fx-floor::before { background-image: linear-gradient(rgba(144, 164, 174, .35) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(144, 164, 174, .35) 1.5px, transparent 1.5px); }
@keyframes fxFloor { to { background-position: 0 64px; } }

.fx3d-on .hero > .container, .fx3d-on .page-head > .container, .fx3d-on .section-dark > .container, .fx3d-on .cta-box > .row { position: relative; z-index: 1; }
.fx3d-on .page-head { overflow: hidden; }

/* ---------- Hero: the photo card tilts in 3D with the mouse; badge and chips float in front at different depths ---------- */
.fx3d-on .hero-visual { perspective: 1100px; }
.fx3d-on .fx-tilt { position: relative; transform-style: preserve-3d; transform: rotateX(calc(var(--ty, 3) * 1deg)) rotateY(calc(var(--tx, -6) * 1deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx3d-on .fx-tilt.fx-live { transition: transform .12s linear; }
.fx3d-on .fx-tilt .hero-photo { isolation: auto; transform-style: preserve-3d; }
.fx3d-on .fx-tilt .hero-photo::before { z-index: auto; transform: translateZ(-60px) scale(1.06); }
.fx3d-on .fx-tilt .hero-photo picture, .fx3d-on .fx-tilt .hero-photo > img:not(.hero-badge) { display: block; transform: translateZ(0); }
.fx3d-on .fx-tilt .hero-badge { transform: translateZ(90px); animation: fxCoin 9s ease-in-out infinite; }
.fx3d-on .fx-tilt .hero-chip { animation: fxChip 6s ease-in-out infinite; }
.fx3d-on .fx-tilt .hero-chip.c1 { --cz: 120px; animation-delay: -1s; }
.fx3d-on .fx-tilt .hero-chip.c2 { --cz: 150px; animation-delay: -3s; }
.fx3d-on .fx-tilt .hero-chip.c3 { --cz: 100px; animation-delay: -2s; }
.fx3d-on .fx-tilt .glow { transform: translateZ(-120px) scale(1.3); }
@keyframes fxChip { 0%, 100% { transform: translate3d(0, 0, var(--cz, 100px)); } 50% { transform: translate3d(0, -12px, var(--cz, 100px)); } }
@keyframes fxCoin { 0%, 100% { transform: translateZ(90px) rotateY(-28deg); } 50% { transform: translateZ(90px) rotateY(28deg); } }
/* moving light reflection on the photo */
.fx-glare { position: absolute; inset: 0; border-radius: 28px; pointer-events: none; transform: translateZ(1px); opacity: var(--go, 0); transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%); mix-blend-mode: soft-light; }
/* touch screens: a slow sway instead of following the mouse */
@media (hover: none) { .fx3d-js .fx-tilt { animation: fxSway 9s ease-in-out infinite; } }
@keyframes fxSway { 0%, 100% { transform: rotateX(4deg) rotateY(-8deg); } 50% { transform: rotateX(-3deg) rotateY(8deg); } }

/* ---------- Headings: the words flip up in 3D ---------- */
.fx-words { perspective: 900px; }
.fx-w { display: inline-block; transform-origin: 50% 100% -30px; animation: fxWord .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes fxWord { from { opacity: 0; transform: rotateX(-95deg) translateY(.3em); } to { opacity: 1; transform: none; } }
/* hide the heading until the words are split (never longer than 1.2 s, even if the script fails) */
.fx3d-js .hero h1:not(.fx-words), .fx3d-js .page-head h1:not(.fx-words) { opacity: 0; animation: fxFailsafe 0s 1.2s forwards; }
@keyframes fxFailsafe { to { opacity: 1; } }

/* ---------- Cards tilt in 3D under the mouse, with a light reflection ---------- */
.fx-card { position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1000px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateY(var(--lift, 0px));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.fx-card.fx-live { --lift: -6px; transition: transform .1s linear, box-shadow .3s, border-color .3s; box-shadow: 0 30px 50px -24px rgba(38, 50, 56, .45); }
.fx-card:hover { transform: perspective(1000px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateY(var(--lift, 0px)); }
.fx-card .fx-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%); mix-blend-mode: soft-light; }
.fx-card.fx-live .fx-shine { opacity: 1; }
.fx-card.fx-live .icon-dot, .fx-card.fx-live .product-type, .fx-card.fx-live .price { transform: translateZ(40px); }
.fx-card .icon-dot, .fx-card .price { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.cta-box.fx-card { transform: perspective(1400px) rotateX(calc(var(--rx, 0) * .5deg)) rotateY(calc(var(--ry, 0) * .5deg)); }

/* ---------- Content flips in when scrolled into view ---------- */
.fx-hide { opacity: 0; transform: perspective(1000px) rotateX(22deg) translateY(48px) scale(.96); transform-origin: 50% 100%; }
.fx-hide.fx-in { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }

/* ---------- Static depth (also without motion) ---------- */
.fx3d-on .stat .num { text-shadow: 1px 1px 0 #cfd8dc, 2px 2px 0 #b0bec5, 3px 3px 0 #90a4ae, 4px 4px 0 #78909c, 5px 5px 0 #607d8b, 8px 10px 16px rgba(38, 50, 56, .3); }
.fx3d-on .stat .num span { text-shadow: inherit; }
.fx3d-on .process-step .dot { background: radial-gradient(circle at 32% 28%, #7a7a86 0 4%, #2a2a30 30%, #0b0b0c 70%); box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .55), 0 16px 24px -12px rgba(0, 0, 0, .55); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.fx3d-on .process-step:first-child .dot { background: radial-gradient(circle at 32% 28%, #eceff1 0 4%, #78909c 30%, #37474f 80%); }
.fx3d-on .process-step:hover .dot { transform: perspective(400px) rotateY(360deg) translateZ(20px); }
.fx3d-on .icon-dot { box-shadow: inset 0 -4px 0 rgba(38, 50, 56, .08), 0 8px 16px -10px rgba(38, 50, 56, .4); }
/* buttons with a little depth: they are pressed in when clicked */
.fx3d-on main .btn-brand, .fx3d-on main .btn-ink, .fx3d-on .hero .btn-brand, .fx3d-on .hero .btn-ink { box-shadow: 0 5px 0 #263238, 0 12px 22px -10px rgba(38, 50, 56, .6); transform: translateY(-2px); transition: transform .12s, box-shadow .12s, background-color .2s; }
.fx3d-on main .btn-ink, .fx3d-on .hero .btn-ink { box-shadow: 0 5px 0 #000, 0 12px 22px -10px rgba(0, 0, 0, .5); }
.fx3d-on main .btn-brand:hover, .fx3d-on main .btn-ink:hover, .fx3d-on .hero .btn-brand:hover, .fx3d-on .hero .btn-ink:hover { transform: translateY(-3px); }
.fx3d-on main .btn-brand:active, .fx3d-on main .btn-ink:active, .fx3d-on .hero .btn-brand:active, .fx3d-on .hero .btn-ink:active { transform: translateY(3px); box-shadow: 0 0 0 #263238, 0 4px 10px -6px rgba(38, 50, 56, .6); }

/* ---------- Visitors who prefer less motion get the depth, but nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-orb, .fx-orb i, .fx-floor::before, .fx-tilt .hero-chip, .fx-tilt .hero-badge, .fx-w, .fx-card { animation: none !important; transition: none !important; }
  .fx-tilt { animation: none !important; }
  .fx-hide { opacity: 1; transform: none; }
}
@media print { .fx-orbs, .fx-floor, .fx-glare, .fx-shine { display: none !important; } .fx-hide { opacity: 1 !important; transform: none !important; } }