/* =====================================================
   Gigglezen — MOTION LAYER additions
   ===================================================== */

:root { --vel-skew: 0deg; --focus-blur: 0px; --letterbox: 0; }

/* Cinematic focus pull — the whole background subtly blurs on fast scroll */
.bg-field { filter: blur(var(--focus-blur)); transition: filter .35s cubic-bezier(.2,.7,.2,1); }

/* Atmospheric spotlight — follows the action, very subtle */
.spotlight {
  position: absolute; inset: -10%;
  background: radial-gradient(700px 500px at var(--sx, 50%) var(--sy, 35%),
    rgba(255,233,168,.10) 0%, rgba(225,29,42,.04) 40%, transparent 70%);
  mix-blend-mode: screen;
  transition: background .25s ease-out;
  pointer-events: none;
}

/* Cinematic letterbox bars — only show during fast scroll moments */
.letterbox {
  position: fixed; inset: 0; pointer-events: none; z-index: 199;
}
.letterbox .lb {
  position: absolute; left: 0; right: 0; height: 60px;
  background: #000; opacity: var(--letterbox);
  transform: scaleY(var(--letterbox));
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.letterbox .top { top: 0; transform-origin: top; }
.letterbox .bottom { bottom: 0; transform-origin: bottom; }

/* ============================================================
   Kinetic character split (hero SOFTWARE)
   ============================================================ */
.line.stroke em { display: inline-flex; gap: 0; }
.kch {
  display: inline-block;
  transition: translate .35s cubic-bezier(.2,.7,.2,1), color .25s;
  will-change: translate;
  transform-origin: 50% 100%;
  animation: kchIn .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--ki) * 60ms + .8s);
}
@keyframes kchIn {
  0%   { transform: translateY(60%) rotate(8deg); opacity: 0; filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { transform: translateY(0) rotate(0); opacity: 1; filter: blur(0); }
}

/* ============================================================
   Section title — word-by-word reveal
   ============================================================ */
.section-title .kword,
.contact-title .kword {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%) skewY(8deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  will-change: transform, opacity;
}
.section-title .kword.in,
.contact-title .kword.in {
  opacity: 1;
  transform: translateY(0) skewY(0);
}
/* Inherit the chroma gradient on word-wrapped children, otherwise the
   background-clip:text trick on the parent <em.chroma> leaves the inner
   words transparent with no visible fill. */
.chroma .kword {
  background: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* keep clipping so words rise from below the line */
.section-title, .contact-title { overflow: hidden; padding-bottom: .18em; }

/* ============================================================
   Horizontal pinned scroll — showcase section
   ============================================================ */
.h-scroll-wrap {
  position: relative;
  /* total height = 1 viewport for pin + extra for horizontal travel */
  height: 360vh;
}
.h-scroll-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.h-scroll-track {
  display: flex;
  gap: 24px;
  padding: 0 8vw;
  will-change: transform;
}
.h-card {
  flex: 0 0 460px !important;
  width: 460px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  height: 540px !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column;
}
.h-card .sc-body { margin-top: 30px; max-width: none; }
.h-card .sc-art { width: 80%; height: 200px; bottom: 30px; right: 30px; left: auto; }
.h-card.show-card .sc-art.art-skyline { width: calc(100% - 60px); left: 30px; right: 30px; height: 55%; }
.h-card.show-card .sc-art.art-orbit { width: 160px; height: 160px; }

.h-progress {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.h-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #E11D2A, #D4AF37, #FFE9A8);
  background-size: 200% 100%;
  animation: chroma 6s ease infinite;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .15s linear;
  box-shadow: 0 0 14px rgba(212,175,55,.5);
}

/* Fallback on small screens — back to vertical stack */
@media (max-width: 1100px) {
  .h-scroll-wrap { height: auto; }
  .h-scroll-stage { position: relative; height: auto; overflow: visible; }
  .h-scroll-track {
    flex-direction: column;
    padding: 0 24px;
  }
  .h-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
  }
  .h-progress { display: none; }
}

/* ============================================================
   3D card tilt — base
   ============================================================ */
.tiltable {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
/* nudge sub-elements forward so they pop in 3D */
.service .svc-inner > * { transform: translateZ(20px); }
.price-card > * { transform: translateZ(15px); }

/* ============================================================
   Scroll velocity skew on marquee track
   ============================================================ */
.marquee-track {
  transform: translateZ(0) skewY(var(--vel-skew));
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   Section reveal — add motion blur during entry
   ============================================================ */
.service, .show-card, .port-tile, .phase, .price-card, .faq, .stack-grid li, .leader, .mv, .values, .lead-card {
  /* set by JS: opacity 0 + translateY 28; add filter for cinematic blur */
  filter: blur(0);
  transition-property: opacity, transform, filter !important;
}
.service[style*="opacity: 0"], .show-card[style*="opacity: 0"],
.port-tile[style*="opacity: 0"], .phase[style*="opacity: 0"],
.price-card[style*="opacity: 0"], .stack-grid li[style*="opacity: 0"] {
  filter: blur(8px);
}

/* ============================================================
   Hero — make sure transforms don't stomp on parallax data
   ============================================================ */
.hero-inner { transition: transform .15s ease-out, opacity .2s ease-out; will-change: transform, opacity; }
.hero-3d   { transition: transform .25s ease-out; will-change: transform; }

/* ============================================================
   "Magic" serif — kinetic hover glow
   ============================================================ */
.line.glow .serif {
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), text-shadow .5s;
  cursor: none;
}
.line.glow .serif:hover {
  transform: rotate(-2deg) scale(1.04);
  text-shadow: 0 0 40px rgba(212,175,55,.6);
}

/* ============================================================
   Reduced motion — disable cinematic layers
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .kch, .section-title .kword, .contact-title .kword { animation: none !important; opacity: 1 !important; transform: none !important; }
  .h-scroll-wrap { height: auto; }
  .h-scroll-stage { position: relative; height: auto; }
  .h-scroll-track { flex-direction: column; }
  .tiltable { transition: none; }
}