/* ═══════════════════════════════════════════════════
   Zephor motion layer — reveals, counts, tilts, nav
   Loaded globally after page-specific CSS.
═══════════════════════════════════════════════════ */

/* ── Reveal on scroll ─────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),
              transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].z-in    { opacity: 1; transform: translateY(0); }
[data-reveal="right"] { transform: translateX(-40px); }
[data-reveal="right"].z-in { transform: translateX(0); }
[data-reveal="left"]  { transform: translateX(40px); }
[data-reveal="left"].z-in  { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].z-in { transform: scale(1); }

/* ── Nav hide-on-scroll + scrolled chrome ─────────── */
header[data-nav-auto] {
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
header.z-nav-hidden { transform: translateY(-100%); }
header.z-nav-scrolled nav {
  background: rgba(10,0,0,.92) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(241,90,36,.28);
}

/* ── Magnetic / tilt baseline ─────────────────────── */
[data-magnetic] { transition: transform .35s cubic-bezier(.2,.7,.2,1); }

[data-tilt] {
  position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  transform-style: preserve-3d;
  will-change: transform;
}
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%),
    rgba(241,90,36,.18), transparent 45%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}
[data-tilt]:hover::after { opacity: 1; }

/* ── Hero kinetic intro ───────────────────────────── */
.hero-text .logo-text {
  display: inline-flex;
  overflow: hidden;
  animation: none;       /* cancel any page-level animation on the container */
}
.hero-text .z-char {
  display: inline-block;
  transform: translateY(110%);
  animation: z-char-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes z-char-rise { to { transform: translateY(0); } }

.hero-text p {
  opacity: 0;
  animation: z-fade-up 1s .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes z-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-logo {
  opacity: 0;
  transform: scale(.85) rotate(-6deg);
  animation: z-logo-drop 1.4s .4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes z-logo-drop { to { opacity: 1; transform: scale(1) rotate(0); } }

/* Hero ambient orbs */
.hero .z-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,90,36,.22), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: z-orb-float 14s ease-in-out infinite;
}
.hero .z-orb.o1 { width:420px; height:420px; top:-80px; left:-60px; animation-delay:0s; }
.hero .z-orb.o2 {
  width:260px; height:260px; bottom:-40px; right:8%; animation-delay:-5s;
  background: radial-gradient(circle, rgba(241,90,36,.16), transparent 65%);
}
.hero .z-orb.o3 {
  width:180px; height:180px; top:30%; right:20%; animation-delay:-9s;
  background: radial-gradient(circle, rgba(241,90,36,.12), transparent 65%);
}
@keyframes z-orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.08); }
  66%     { transform: translate(-30px,25px) scale(.95); }
}

/* Hero floating sparks */
.hero .z-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: z-spark 7s linear infinite;
}
.hero .z-spark:nth-child(4) { left:15%; bottom:10%; animation-delay:0s; }
.hero .z-spark:nth-child(5) { left:85%; bottom:20%; animation-delay:-1.8s; }
.hero .z-spark:nth-child(6) { left:35%; bottom:5%;  animation-delay:-3.5s; width:3px; height:3px; }
.hero .z-spark:nth-child(7) { left:60%; bottom:15%; animation-delay:-5.2s; width:5px; height:5px; }
.hero .z-spark:nth-child(8) { left:75%; bottom:8%;  animation-delay:-2.2s; width:3px; height:3px; }
@keyframes z-spark {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: .85; }
  100% { transform: translateY(-90vh); opacity: 0; }
}

/* ── Page fade-in ─────────────────────────────────── */
.block-content { animation: z-page-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes z-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Enhanced stats hover ─────────────────────────── */
.stats-row .stat-item {
  position: relative;
  padding: 16px 30px;
  transition: transform .3s, opacity .9s cubic-bezier(.2,.7,.2,1);
}
.stats-row .stat-item:hover { transform: translateY(-4px); }
.stats-row .stat-item::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.stats-row .stat-item:hover::before { width: 100%; }

/* ── Button shine sweep ───────────────────────────── */
.btn-submit, .btn-primary, .mc-link-btn, .csr-btn {
  position: relative;
  overflow: hidden;
}
.btn-submit::after,
.btn-primary::after,
.mc-link-btn::after,
.csr-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .65s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.btn-submit:hover::after,
.btn-primary:hover::after,
.mc-link-btn:hover::after,
.csr-btn:hover::after  { left: 140%; }
.btn-submit:active,
.btn-primary:active,
.mc-link-btn:active,
.csr-btn:active         { transform: scale(.97); }

/* ── Portal cards — glow follow ───────────────────── */
.portal-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.portal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    rgba(241,90,36,.14), transparent 45%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.portal-card:hover::after { opacity: 1; }
.portal-card .portal-icon-wrap {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s;
}
.portal-card:hover .portal-icon-wrap {
  transform: rotate(-6deg) scale(1.08);
  background: rgba(241,90,36,.22);
}
.portal-card .portal-num {
  transition: color .4s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.portal-card:hover .portal-num {
  color: rgba(241,90,36,.38);
  transform: translateY(-4px);
}

/* ── Contact info items hover ─────────────────────── */
.contact-info-items { transition: transform .3s; }
.contact-info-items:hover { transform: translateX(4px); }
.contact-info-items:hover .contact-icon-wrap {
  background: rgba(241,90,36,.25);
  border-color: var(--accent);
}
.contact-icon-wrap { transition: all .25s; }

/* ── Form input focus glow ─────────────────────────── */
.form-field input:focus,
.form-field textarea:focus { animation: z-focus-pulse .6s; }
@keyframes z-focus-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(241,90,36,.5); }
  100% { box-shadow: 0 0 0 6px rgba(241,90,36,0); }
}

/* ── Footer shimmer strip ─────────────────────────── */
footer::before { animation: z-footer-sweep 8s ease-in-out infinite; }
@keyframes z-footer-sweep {
  0%, 100% { opacity: .3; }
  50%      { opacity: .75; }
}

/* ── Socials wobble ───────────────────────────────── */
.social-icons img { transition: all .25s cubic-bezier(.2,.7,.2,1); }
.social-icons img:hover {
  transform: translateY(-3px) rotate(-4deg);
  filter: drop-shadow(0 4px 8px rgba(241,90,36,.4));
}

/* ── Value cards: ensure position for tilt ─────────── */
.value-card { position: relative; }

/* ── Respect reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal]         { opacity: 1 !important; transform: none !important; }
  .hero-text .z-char    { transform: none !important; }
  .hero-logo            { opacity: 1 !important; transform: none !important; }
}