/*
 * motion3d — shared 3D depth & motion layer (E-Public Touch).
 * Floating 3D objects, pointer parallax, tilt cards, 3D scroll reveals.
 * Everything is decorative and switches off for prefers-reduced-motion.
 */
:root { --m3d-ease: cubic-bezier(.2,.7,.2,1); }

/* ---------- 3D scene of floating objects ---------- */
.m3d-scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  perspective: 1100px; perspective-origin: 50% 40%; overflow: hidden;
}
.m3d-stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--m3d-ease); }
.m3d-scene.m3d-paused * { animation-play-state: paused !important; }
.m3d-obj {
  position: absolute; transform-style: preserve-3d;
  transition: transform 1.1s var(--m3d-ease);
}
.m3d-float { transform-style: preserve-3d; animation: m3d-float var(--float, 9s) ease-in-out infinite; animation-delay: var(--delay, 0s); }

/* cube: six translucent faces */
.m3d-cube { position: relative; width: var(--s, 80px); height: var(--s, 80px); transform-style: preserve-3d; animation: m3d-spin var(--spin, 24s) linear infinite; }
.m3d-cube i {
  position: absolute; inset: 0; border-radius: 16%;
  border: 1px solid rgba(var(--m3d-rgb), .38);
  background: linear-gradient(135deg, rgba(var(--m3d-rgb), .22), rgba(255,255,255,.06));
  box-shadow: inset 0 0 22px rgba(255,255,255,.18);
}
.m3d-cube i:nth-child(1) { transform: translateZ(calc(var(--s, 80px) / 2)); }
.m3d-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s, 80px) / 2)); }
.m3d-cube i:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--s, 80px) / 2)); }
.m3d-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s, 80px) / 2)); }
.m3d-cube i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--s, 80px) / 2)); }
.m3d-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s, 80px) / 2)); }

/* ring seen at an angle */
.m3d-ring {
  width: var(--s, 160px); height: var(--s, 160px); border-radius: 50%;
  border: calc(var(--s, 160px) * .085) solid rgba(var(--m3d-rgb), .26);
  box-shadow: inset 0 0 28px rgba(var(--m3d-rgb), .28), 0 24px 60px rgba(var(--m3d-rgb), .16);
  animation: m3d-tumble var(--spin, 30s) linear infinite;
}

/* frosted glass card */
.m3d-panel {
  width: var(--w, 170px); height: var(--h, 110px); border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 60px rgba(10,37,64,.13);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: m3d-sway var(--spin, 16s) ease-in-out infinite;
}
.m3d-panel::before, .m3d-panel::after {
  content: ""; position: absolute; left: 16px; height: 8px; border-radius: 6px; background: rgba(var(--m3d-rgb), .35);
}
.m3d-panel::before { top: 20px; width: 46%; }
.m3d-panel::after  { top: 40px; width: 70%; background: rgba(var(--m3d-rgb), .18); }

/* glossy sphere */
.m3d-sphere {
  width: var(--s, 60px); height: var(--s, 60px); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0, rgba(var(--m3d-rgb), .55) 42%, rgba(var(--m3d-rgb), .95) 100%);
  box-shadow: 0 24px 44px rgba(var(--m3d-rgb), .32);
}

/* pyramid */
.m3d-pyramid { position: relative; width: var(--s, 70px); height: var(--s, 70px); transform-style: preserve-3d; animation: m3d-spin-y var(--spin, 20s) linear infinite; }
.m3d-pyramid i {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(var(--m3d-rgb), .55), rgba(var(--m3d-rgb), .12));
}
.m3d-pyramid i:nth-child(1) { transform: translateZ(calc(var(--s, 70px) / 2)) rotateX(26deg); }
.m3d-pyramid i:nth-child(2) { transform: rotateY(90deg)  translateZ(calc(var(--s, 70px) / 2)) rotateX(26deg); }
.m3d-pyramid i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s, 70px) / 2)) rotateX(26deg); }
.m3d-pyramid i:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--s, 70px) / 2)) rotateX(26deg); }

@keyframes m3d-spin   { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes m3d-spin-y { to { transform: rotateY(360deg); } }
@keyframes m3d-tumble { from { transform: rotateX(66deg) rotateY(-12deg) rotateZ(0); } to { transform: rotateX(66deg) rotateY(-12deg) rotateZ(360deg); } }
@keyframes m3d-sway   { 0%, 100% { transform: rotateY(-20deg) rotateX(10deg); } 50% { transform: rotateY(16deg) rotateX(-6deg); } }
@keyframes m3d-float  { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -16px, 0); } }

/* perspective grid floor */
.m3d-floor {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 70%;
  transform: perspective(620px) rotateX(64deg); transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(var(--m3d-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--m3d-rgb), .16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: m3d-floor 6s linear infinite;
}
@keyframes m3d-floor { to { background-position: 0 64px; } }

/* ---------- tilt cards ---------- */
.m3d-tilt { transform-style: preserve-3d; transition: transform .5s var(--m3d-ease), box-shadow .5s var(--m3d-ease); will-change: transform; }
.m3d-tilt.is-tilting { transition: transform .08s linear, box-shadow .3s var(--m3d-ease); }
.m3d-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 55%);
  transition: opacity .4s var(--m3d-ease); mix-blend-mode: soft-light;
}
.m3d-tilt.is-tilting .m3d-glare { opacity: 1; }

/* ---------- 3D scroll reveal ---------- */
html.m3d-on [data-m3d-reveal] {
  opacity: 0; transform: perspective(1200px) translate3d(0, 46px, -90px) rotateX(14deg);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--m3d-ease), transform 1.1s var(--m3d-ease);
  transition-delay: var(--m3d-delay, 0ms);
}
html.m3d-on [data-m3d-reveal].m3d-in { opacity: 1; transform: none; }

/* ---------- small screens: fewer, smaller objects ---------- */
@media (max-width: 760px) {
  .m3d-obj[data-m3d-mobile="hide"] { display: none; }
  .m3d-scene { perspective: 800px; }
}

@media (prefers-reduced-motion: reduce) {
  .m3d-float, .m3d-cube, .m3d-ring, .m3d-panel, .m3d-pyramid, .m3d-floor { animation: none !important; }
  .m3d-stage, .m3d-obj, .m3d-tilt { transition: none !important; }
  html.m3d-on [data-m3d-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- "Designed by E-Public Touch" badge ---------- */
.ept-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #e3e7ec; color: #14213a !important;
  font: 600 13px/1 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20,33,58,.06);
  transition: transform .35s var(--m3d-ease), box-shadow .35s var(--m3d-ease), border-color .35s var(--m3d-ease);
}
.ept-badge .ept-pre { color: #8a92a0; font-weight: 500; font-size: 12px; }
.ept-badge strong {
  font-weight: 800; letter-spacing: .01em; color: #14213a;
  background: linear-gradient(100deg, #14213a 0 42%, #c9a24b 50%, #14213a 58% 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position 1s var(--m3d-ease);
}
.ept-badge svg { flex-shrink: 0; transition: transform .8s var(--m3d-ease); }
.ept-badge:hover, .ept-badge:focus-visible {
  transform: translateY(-2px); border-color: #c9a24b;
  box-shadow: 0 10px 24px rgba(168,127,51,.22);
}
.ept-badge:hover svg, .ept-badge:focus-visible svg { transform: rotate(-180deg) scale(1.08); }
.ept-badge:hover strong, .ept-badge:focus-visible strong { background-position: 0 0; }
.ept-badge:focus-visible { outline: 2px solid #c9a24b; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ept-badge, .ept-badge svg, .ept-badge strong { transition: none; } }