/* OZDIGITAL motion layer, shared by index.html and lab.html (loaded after the page styles).
   motion.js adds the pointer and scroll parts: card tilt + spotlight, magnetic buttons, hero flashlight,
   scroll progress, scroll-linked process scale and the velocity marquee.
   Reveals use the individual `translate` / `scale` properties, so `transform` stays free for the tilt.
   Everything that moves on its own sits behind prefers-reduced-motion: no-preference. */

@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root { interpolate-size: allow-keywords; }
.ph-deco, .work > .ph, .steps .ph, .svc .ph-big, .btn .ph, .faq summary .ph { display: inline-block; }

/* ---------- Nav: a floating glass pill instead of the full-width bar ---------- */
/* The header keeps no height of its own, so main takes over the 64px the old bar used and nothing below moves. */
.nav {
  top: 14px; height: 0;
  background: none; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
main { padding-top: 64px; }
html { scroll-padding-top: 88px; }
.nav .wrap {
  width: max-content; max-width: calc(100% - 32px); margin: 0 auto;
  height: 56px; padding: 0 8px 0 20px; gap: clamp(16px, 2.4vw, 40px);
  border-radius: 999px; background: var(--nav-bg);
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px -20px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.brand { font-size: 16px; }
.nav nav a { font-size: 14px; padding: 8px 10px; }
.nav nav a:hover { background: none; }
.nav nav a.is-active { color: var(--text); }
.lang-btn { background: transparent; }
@media (max-width: 767px) {
  .nav { top: 10px; }
  .nav .wrap { width: auto; max-width: none; margin: 0 10px; padding: 0 6px 0 16px; gap: 8px; }
  .nav nav a { padding: 8px 6px; font-size: 13.5px; white-space: nowrap; }
}
@media (max-width: 430px) {
  .nav .wrap { padding: 0 4px 0 14px; gap: 4px; }
  .nav nav { gap: 0; }
  .nav nav a { padding: 8px 5px; font-size: 13px; }
  .brand { gap: 8px; font-size: 15px; }
  .lang-btn { height: 32px; min-width: 36px; padding: 0 8px; margin-left: 2px; }
  .theme-btn { min-width: 32px; width: 32px; }
  .theme-btn + .lang-btn { margin-left: 2px; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-fill), #2997ff);
  transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
}

/* ---------- Tilt cards: 3D tilt, cursor spotlight and a light that runs along the border ---------- */
.tilt {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --mx: 50%; --my: 50%; --px: 0; --py: 0;
  position: relative;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}
.tilt.is-hover { --lift: -6px; box-shadow: var(--shadow); }
.tilt::before, .tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.tilt::after {
  z-index: 2;
  background: radial-gradient(460px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
}
.tilt::before {
  z-index: 3; padding: 1px;
  background: radial-gradient(280px circle at var(--mx) var(--my), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tilt.is-hover::before, .tilt.is-hover::after { opacity: 1; }
.svc.tilt::after { z-index: -1; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; translate: 0 40px; scale: 0.97; filter: blur(6px);
    transition: opacity 0.9s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), filter 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .reveal.in { opacity: 1; translate: none; scale: none; filter: none; }
  /* Section headings wipe in from a mask instead of blurring. A mask, not clip-path:
     a fully clipped element never reports an intersection, so it would never be revealed. */
  .js .sec-head.reveal {
    filter: none; scale: none; translate: 0 0.5em;
    -webkit-mask-image: linear-gradient(#000 40%, transparent 60%); mask-image: linear-gradient(#000 40%, transparent 60%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
    transition-property: opacity, translate, -webkit-mask-position, mask-position;
    transition-duration: 1.1s;
  }
  .js .sec-head.reveal.in { -webkit-mask-position: 0 0; mask-position: 0 0; translate: none; }

  /* Tilt cards keep the staggered reveal but answer the pointer at once. */
  .js .tilt, .js .tilt.reveal {
    transition:
      opacity 0.9s var(--ease) calc(var(--i, 0) * 90ms), translate 0.9s var(--ease) calc(var(--i, 0) * 90ms),
      scale 0.9s var(--ease) calc(var(--i, 0) * 90ms), filter 0.9s var(--ease) calc(var(--i, 0) * 90ms),
      transform 0.7s var(--ease), box-shadow 0.4s var(--ease);
  }
  .js .tilt.is-hover, .js .tilt.reveal.in.is-hover {
    transition: transform 0.14s linear, box-shadow 0.4s var(--ease), opacity 0.9s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), filter 0.9s var(--ease);
  }
}

/* ---------- Hero ---------- */
@keyframes breathe {
  from { transform: translateX(-50%) scale(0.9); opacity: 0.75; }
  to   { transform: translateX(-46%) scale(1.12); opacity: 1; }
}
@keyframes gridDrift { to { background-position: 28px 28px; } }
@keyframes wordUp { from { translate: 0 105%; rotate: 4deg; } to { translate: none; rotate: none; } }
.hero .wrap { z-index: 1; }
/* Dot grid that the cursor lights up like a flashlight; a faint band stays visible at the top. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(360px circle at var(--hx, 50%) var(--hy, -20%), #000, transparent 70%);
  mask-image: radial-gradient(360px circle at var(--hx, 50%) var(--hy, -20%), #000, transparent 70%);
  opacity: 0.55; transition: opacity 0.6s var(--ease);
}
.hero.is-lit::after { opacity: 1; }
.hero h1, .lab-title { translate: 0 calc(var(--hs, 0) * -70px); }
.hero h1 .w, .hero h1 .w > span, .lab-title .w, .lab-title .w > span { display: inline-block; }
.hero h1 .w, .lab-title .w { overflow: hidden; vertical-align: top; padding: 0 0.04em 0.1em; margin: 0 -0.04em -0.1em; }
.js .split { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: breathe 9s ease-in-out infinite alternate; }
  .hero::after { animation: gridDrift 6s linear infinite; }
  .split .w > span { animation: wordUp 1s var(--ease) both; animation-delay: calc(80ms + var(--wi) * 75ms); }
}

/* ---------- Marquee (velocity-driven by motion.js) ---------- */
.marquee {
  position: relative; overflow: hidden; padding: 28px 0;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track { display: flex; width: max-content; will-change: transform; transform: translateX(var(--mq, 0px)) skewX(var(--mk, 0deg)); }
.mq-group { display: flex; align-items: center; flex-shrink: 0; }
.mq-group span {
  padding: 0 28px; white-space: nowrap;
  font-size: clamp(40px, 6.4vw, 92px); line-height: 1; font-weight: 650; letter-spacing: -0.045em;
}
.mq-group span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 55%, transparent); }
.mq-group .ph { font-size: clamp(26px, 3.4vw, 48px); color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .mq-group .ph { animation: spin 7s linear infinite; }
}

/* ---------- Ambient idle motion: the page keeps breathing even without a cursor ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes bobSmall { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes svcGlow {
  0%   { --gx: 100%; --gy: 0%; }
  50%  { --gx: 60%;  --gy: 30%; }
  100% { --gx: 0%;   --gy: 10%; }
}
@keyframes redactScan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-fill) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

.svc {
  background: radial-gradient(120% 100% at var(--gx) var(--gy), color-mix(in srgb, var(--accent-fill) 26%, var(--surface)), var(--surface) 62%);
}
.svc .ph-deco { translate: calc(var(--px) * -28px) calc(var(--py) * -28px); transition: translate 0.8s var(--ease); }
.svc .ph-big { translate: calc(var(--px) * 10px) calc(var(--py) * 10px); transition: translate 0.6s var(--ease), scale 0.4s var(--ease); }
.svc.is-hover .ph-big { scale: 1.15; }
.svc h3, .svc p { transition: translate 0.6s var(--ease); }
.svc.is-hover h3 { translate: calc(var(--px) * 6px) 0; }

.card .media video, .card .media img { transition: transform 0.8s var(--ease), translate 0.8s var(--ease); }
.card.is-hover .media video { transform: scale(1.06); translate: calc(var(--px) * -10px) calc(var(--py) * -8px); }
.card .thumbs img { transition: translate 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.card.is-hover .thumbs img { translate: 0 -5px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.45); }
.card.is-hover .thumbs img:nth-child(2) { transition-delay: 50ms; }
.card.is-hover .thumbs img:nth-child(3) { transition-delay: 100ms; }
.card .icon { transition: transform 0.5s var(--ease); }
.card.is-hover .icon { transform: rotate(-8deg) scale(1.08); }

.member .avatar img { transition: transform 0.8s var(--ease); }
.member.is-hover .avatar img { transform: scale(1.08) translate(calc(var(--px) * -6px), calc(var(--py) * -6px)); }
.member .role { transition: opacity 0.5s var(--ease), translate 0.5s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); }
.member .role:hover { background: color-mix(in srgb, var(--accent-fill) 26%, var(--surface-2)); border-color: var(--accent); }
.member .socials a { transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--ease); }
.member .socials a:hover { transform: translateY(-3px) rotate(-6deg); }

.work > .ph { transition: translate 0.6s var(--ease); translate: calc(var(--px) * 10px) calc(var(--py) * 10px); }
.redact {
  background: linear-gradient(100deg, var(--redact) 40%, color-mix(in srgb, var(--redact) 55%, var(--accent)) 50%, var(--redact) 60%);
  background-size: 250% 100%;
}

.steps li { position: relative; }
.steps .ph { transition: scale 0.4s var(--ease); }
.steps li:hover .ph { scale: 1.2; }

.links a { position: relative; isolation: isolate; transition: padding 0.4s var(--ease); }
.links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px;
  background: var(--surface-2); transform-origin: left; scale: 0 1; transition: scale 0.5s var(--ease);
}
.links a:hover { padding-left: 16px; padding-right: 16px; }
.links a:hover::before { scale: 1 1; }
.links .ph-logo { transition: transform 0.4s var(--ease); }
.links a:hover .ph-logo { transform: rotate(-10deg) scale(1.12); }

.btn { translate: var(--bx, 0px) var(--by, 0px); transition: transform 0.15s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), translate 0.5s var(--ease); }
.btn.is-magnet { transition: transform 0.15s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), translate 0.12s linear; }
.btn .ph { transition: translate 0.35s var(--ease); }
.btn:hover .ph-arrow-right { translate: 4px 0; }
.btn:hover .ph-arrow-down { translate: 0 3px; }
.btn:hover .ph-arrow-left { translate: -4px 0; }
.btn:hover .ph-arrow-up-right { translate: 2px -2px; }

.faq summary { transition: color 0.25s var(--ease), padding 0.4s var(--ease); }
.faq summary:hover { color: var(--accent); padding-left: 8px; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

.process { scale: var(--ps, 1); border-radius: var(--pr, 32px); }

@media (prefers-reduced-motion: no-preference) {
  .svc { animation: svcGlow 14s ease-in-out infinite alternate; }
  .svc:nth-child(2) { animation-delay: -5s; }
  .svc:nth-child(3) { animation-delay: -9s; }
  .svc-apps .ph-deco, .svc-web .ph-deco { animation: bob 7s ease-in-out infinite; }
  .svc-web .ph-deco { animation-delay: -3s; }
  .svc-tools .ph-deco { animation: spin 26s linear infinite; }

  .work > .ph { animation: bob 5s ease-in-out infinite; }
  .work:nth-child(2) > .ph { animation-delay: -1.2s; }
  .work:nth-child(3) > .ph { animation-delay: -2.4s; }
  .work:nth-child(4) > .ph { animation-delay: -3.6s; }
  .redact { animation: redactScan 3.4s linear infinite; }

  .steps .ph { animation: bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  /* Step divider lines draw in left to right once the step is revealed. */
  .js .steps li { border-top-color: transparent; }
  .js .steps li::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: rgba(255, 255, 255, 0.5); transform-origin: left; scale: 0 1;
    transition: scale 1.2s var(--ease) calc(250ms + var(--i, 0) * 140ms);
  }
  .js .steps li.in::before { scale: 1 1; }

  .member .avatar { animation: bobSmall 6s ease-in-out infinite; }
  .member:nth-child(2) .avatar { animation-delay: -3s; }
  .js .member.reveal .role { opacity: 0; translate: 0 10px; }
  .js .member.reveal.in .role { opacity: 1; translate: none; transition-delay: 350ms; }
  .js .member.reveal.in .role:nth-child(2) { transition-delay: 450ms; }
  .js .member.reveal.in .role:nth-child(3) { transition-delay: 550ms; }

  .card .tag-new { animation: pulseRing 2s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .hero h1, .lab-title { translate: none; }
  .process { scale: none; }
}