@import url("site-core.css");
@import url("site-pages.css");

/* Add slightly more visible motion in the top portions of black pages */
.home-hero::after,
.page-hero::after,
.form-page::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  left:-20%;
  top:22%;
  width:145%;
  height:19%;
  background:linear-gradient(96deg,transparent 0%,rgba(255,255,255,.018) 29%,rgba(191,255,47,.052) 50%,rgba(255,255,255,.018) 64%,transparent 84%);
  transform:rotate(-7deg) translateX(-38%);
  filter:blur(12px);
  animation:webdotmeSectionSweep 8.8s ease-in-out infinite;
}

@keyframes webdotmeSectionSweep{
  0%,10%{transform:rotate(-7deg) translateX(-42%);opacity:.12}
  45%{opacity:.72}
  80%,100%{transform:rotate(-7deg) translateX(40%);opacity:.16}
}

@media(prefers-reduced-motion:reduce){
  .ambient::before,
  .ambient::after,
  body::before,
  .home-hero::after,
  .page-hero::after,
  .form-page::after{
    animation:none!important;
  }
}


/* =========================================================
   V6 — CINEMATIC REACTIVE FIELD
   Layered light planes + refractive lenses + rare acid pulse.
   CSS-only. Built to feel dimensional, not decorative.
   ========================================================= */

.motion-field{
  --mf-x:0px;
  --mf-y:0px;
  --mf-rot:0deg;
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  perspective:1100px;
  transform-style:preserve-3d;
  mix-blend-mode:normal;
}

/* Shared plane geometry */
.mf-plane{
  position:absolute;
  display:block;
  border:1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.00) 0%,
      rgba(255,255,255,.018) 29%,
      rgba(255,255,255,.08) 47%,
      rgba(191,255,47,.055) 54%,
      rgba(255,255,255,.018) 66%,
      rgba(255,255,255,0) 100%);
  box-shadow:
    inset 0 0 70px rgba(255,255,255,.015),
    0 0 80px rgba(0,0,0,.2);
  transform-style:preserve-3d;
  will-change:transform,opacity;
}

/* Far / graphite plane */
.mf-plane-a{
  width:108vw;
  height:29vh;
  left:-31vw;
  top:18vh;
  transform:rotateX(66deg) rotateZ(-16deg) translate3d(0,0,-240px);
  opacity:.44;
  filter:blur(.3px);
  animation:mfPlaneA 15s ease-in-out infinite alternate;
}

/* Mid plane with slightly more acid */
.mf-plane-b{
  width:96vw;
  height:22vh;
  right:-34vw;
  top:43vh;
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(255,255,255,.014) 27%,
      rgba(191,255,47,.085) 48%,
      rgba(255,255,255,.055) 57%,
      transparent 78%);
  transform:rotateX(61deg) rotateZ(17deg) translate3d(0,0,-80px);
  opacity:.38;
  animation:mfPlaneB 18s ease-in-out infinite alternate;
}

/* Near / sharp plane */
.mf-plane-c{
  width:82vw;
  height:13vh;
  left:19vw;
  top:67vh;
  border-color:rgba(255,255,255,.035);
  background:
    linear-gradient(96deg,
      transparent 0%,
      rgba(255,255,255,.016) 30%,
      rgba(255,255,255,.095) 48%,
      rgba(191,255,47,.055) 55%,
      transparent 79%);
  transform:rotateX(71deg) rotateZ(-7deg) translate3d(0,0,90px);
  opacity:.31;
  filter:blur(.5px);
  animation:mfPlaneC 11s ease-in-out infinite alternate;
}

@keyframes mfPlaneA{
  0%{transform:rotateX(66deg) rotateZ(-16deg) translate3d(-10vw,-3vh,-240px) scale(.94);opacity:.28}
  48%{opacity:.53}
  100%{transform:rotateX(66deg) rotateZ(-12deg) translate3d(28vw,9vh,-210px) scale(1.06);opacity:.4}
}
@keyframes mfPlaneB{
  0%{transform:rotateX(61deg) rotateZ(17deg) translate3d(10vw,4vh,-80px) scale(.95);opacity:.22}
  58%{opacity:.5}
  100%{transform:rotateX(61deg) rotateZ(12deg) translate3d(-30vw,-7vh,-40px) scale(1.05);opacity:.34}
}
@keyframes mfPlaneC{
  0%{transform:rotateX(71deg) rotateZ(-7deg) translate3d(-18vw,0,90px) scale(.92);opacity:.17}
  55%{opacity:.42}
  100%{transform:rotateX(71deg) rotateZ(-2deg) translate3d(21vw,-5vh,130px) scale(1.04);opacity:.28}
}

/* Refractive circular fields: they don't look like circles because of mask + blend */
.mf-lens{
  position:absolute;
  border-radius:50%;
  display:block;
  pointer-events:none;
  backdrop-filter:blur(1.8px) brightness(1.08) contrast(1.06);
  -webkit-backdrop-filter:blur(1.8px) brightness(1.08) contrast(1.06);
  background:
    radial-gradient(circle at 38% 34%,
      rgba(255,255,255,.04),
      rgba(191,255,47,.018) 32%,
      rgba(255,255,255,.012) 52%,
      transparent 73%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 18px -12px 45px rgba(191,255,47,.015);
  mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,.62) 67%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,.62) 67%,transparent 78%);
  will-change:transform,opacity;
}

.mf-lens-a{
  width:min(46vw,520px);
  height:min(46vw,520px);
  min-width:250px;
  min-height:250px;
  right:-10vw;
  top:13vh;
  opacity:.52;
  animation:mfLensA 13s ease-in-out infinite alternate;
}

.mf-lens-b{
  width:min(34vw,380px);
  height:min(34vw,380px);
  min-width:210px;
  min-height:210px;
  left:-8vw;
  bottom:10vh;
  opacity:.3;
  animation:mfLensB 17s ease-in-out infinite alternate;
}

@keyframes mfLensA{
  0%{transform:translate3d(6vw,-1vh,0) scale(.88) rotate(-8deg);opacity:.28}
  48%{opacity:.57}
  100%{transform:translate3d(-19vw,15vh,0) scale(1.14) rotate(11deg);opacity:.37}
}
@keyframes mfLensB{
  0%{transform:translate3d(-4vw,6vh,0) scale(.9);opacity:.18}
  52%{opacity:.4}
  100%{transform:translate3d(22vw,-16vh,0) scale(1.08);opacity:.28}
}

/* Rare event: acid energy pulse travels through the field every ~11 sec */
.mf-pulse{
  position:absolute;
  left:-45vw;
  top:26vh;
  width:190vw;
  height:8vh;
  display:block;
  transform:rotate(-11deg) translateX(-36%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(191,255,47,0) 28%,
      rgba(191,255,47,.08) 44%,
      rgba(191,255,47,.21) 50%,
      rgba(255,255,255,.05) 54%,
      rgba(191,255,47,.02) 63%,
      transparent 78%);
  filter:blur(15px);
  opacity:0;
  animation:mfPulse 11.6s ease-in-out infinite;
}

@keyframes mfPulse{
  0%,13%{transform:rotate(-11deg) translateX(-38%);opacity:0}
  18%{opacity:.16}
  27%{opacity:.72}
  38%{opacity:.18}
  49%,100%{transform:rotate(-11deg) translateX(43%);opacity:0}
}

/* Slow horizon line creates depth without "particles" */
.mf-horizon{
  position:absolute;
  left:-10%;
  right:-10%;
  top:58vh;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.06) 28%,
      rgba(191,255,47,.11) 49%,
      rgba(255,255,255,.05) 70%,
      transparent);
  opacity:.28;
  transform:perspective(800px) rotateX(58deg) scaleX(.9);
  box-shadow:0 0 22px rgba(191,255,47,.03);
  animation:mfHorizon 9s ease-in-out infinite alternate;
}
@keyframes mfHorizon{
  from{transform:perspective(800px) rotateX(58deg) translateY(-3vh) scaleX(.84);opacity:.16}
  to{transform:perspective(800px) rotateX(58deg) translateY(7vh) scaleX(1.08);opacity:.34}
}

/* Route / page-specific mood shifts — same system, different behavior */
body[data-page-label="Work"] .mf-plane-a,
#route-work:checked ~ .motion-field .mf-plane-a{
  opacity:.58;
  filter:blur(0);
}
body[data-page-label="Work"] .mf-lens-a,
#route-work:checked ~ .motion-field .mf-lens-a{
  transform:translate3d(-12vw,18vh,0) scale(1.1);
}
body[data-page-label="Services"] .mf-plane-b,
#route-services:checked ~ .motion-field .mf-plane-b{
  opacity:.52;
}
body[data-page-label="Services"] .mf-horizon,
#route-services:checked ~ .motion-field .mf-horizon{
  top:46vh;
  opacity:.4;
}
body[data-page-label="About"] .mf-plane-c,
#route-about:checked ~ .motion-field .mf-plane-c{
  opacity:.14;
}
body[data-page-label="About"] .mf-pulse,
#route-about:checked ~ .motion-field .mf-pulse{
  animation-duration:15s;
  opacity:.5;
}
body[data-page-label="Start project"] .mf-pulse,
#route-start:checked ~ .motion-field .mf-pulse{
  animation-duration:8.8s;
}
body[data-page-label="Start project"] .mf-lens-a,
#route-start:checked ~ .motion-field .mf-lens-a{
  opacity:.62;
}

/* Case study still gets its cream takeover */
.case-hero{
  position:relative;
  z-index:2;
}

/* content above field */
.site-nav,
.menu,
.preview-view,
main,
footer,
.preview-footer,
.preview-note,
.grain{
  z-index:2;
}
.site-nav,
.menu,
.grain,
.preview-note{z-index:60}
.menu{z-index:70}
.grain{z-index:80}

/* subtle depth response on desktop hover without JS */
@media(hover:hover) and (pointer:fine){
  body:has(.nav-cta:hover) .mf-plane-c,
  body:has(.button-line:hover) .mf-plane-c{
    opacity:.47;
    filter:blur(0);
  }
  body:has(.project-row:hover) .mf-lens-a,
  body:has(.browser:hover) .mf-lens-a{
    opacity:.67;
  }
}

/* Mobile tuning: less blur, more visible shape because screen is small */
@media(max-width:759px){
  .mf-plane-a{width:150vw;height:25vh;left:-55vw;top:17vh}
  .mf-plane-b{width:135vw;height:19vh;right:-55vw;top:47vh}
  .mf-plane-c{width:120vw;height:11vh;left:3vw;top:72vh}
  .mf-lens-a{right:-34vw;top:18vh}
  .mf-lens-b{left:-28vw;bottom:7vh}
  .mf-pulse{height:7vh;filter:blur(12px)}
  .mf-horizon{top:62vh}
}

@media(prefers-reduced-motion:reduce){
  .mf-plane,
  .mf-lens,
  .mf-pulse,
  .mf-horizon{
    animation:none!important;
  }
}


/* =========================================================
   V12 — SIGNAL FIELD
   More visible, moving, slightly glitch-like.
   Content remains stable; only the environment misbehaves.
   ========================================================= */

/* Stronger cinematic base */
.ambient{
  background:
    radial-gradient(82% 72% at 82% 7%,rgba(191,255,47,.13),transparent 58%),
    radial-gradient(72% 70% at 8% 78%,rgba(255,255,255,.065),transparent 62%),
    radial-gradient(55% 42% at 51% 46%,rgba(255,255,255,.018),transparent 74%),
    #070807 !important;
}

.ambient::before{
  width:240vw !important;
  height:136vh !important;
  left:-175vw !important;
  top:-16vh !important;
  opacity:1 !important;
  filter:blur(14px) !important;
  background:
    linear-gradient(
      108deg,
      transparent 0 26%,
      rgba(255,255,255,.024) 31%,
      rgba(255,255,255,.12) 39%,
      rgba(191,255,47,.16) 47%,
      rgba(255,255,255,.09) 55%,
      rgba(255,255,255,.018) 62%,
      transparent 71% 100%
    ) !important;
  animation:signalBlade 8.6s cubic-bezier(.55,.04,.42,.98) infinite alternate !important;
}

.ambient::after{
  inset:-130px !important;
  opacity:.9 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.058) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.058) 1px,transparent 1px),
    linear-gradient(119deg,transparent 37%,rgba(191,255,47,.06) 50%,transparent 63%) !important;
  background-size:
    66px 66px,
    66px 66px,
    185% 185% !important;
  animation:signalGrid 17s linear infinite !important;
}

@keyframes signalBlade{
  0%{
    transform:translate3d(-4vw,-2vh,0) rotate(-2deg) scale(1);
    opacity:.58;
  }
  24%{opacity:1}
  48%{
    transform:translate3d(50vw,4vh,0) rotate(1deg) scale(1.025);
    opacity:.72;
  }
  53%{
    transform:translate3d(55vw,3vh,0) rotate(-1deg) scale(1.025);
    opacity:.98;
  }
  100%{
    transform:translate3d(123vw,11vh,0) rotate(2deg) scale(1.06);
    opacity:.62;
  }
}

@keyframes signalGrid{
  0%{
    transform:translate3d(0,0,0) scale(1);
    background-position:0 0,0 0,-30% 25%;
  }
  32%{
    transform:translate3d(22px,14px,0) scale(1.015);
  }
  33%{
    transform:translate3d(-8px,15px,0) scale(1.018);
  }
  34%{
    transform:translate3d(26px,16px,0) scale(1.015);
  }
  68%{
    transform:translate3d(44px,39px,0) scale(1.025);
  }
  69%{
    transform:translate3d(21px,40px,0) scale(1.022);
  }
  70%{
    transform:translate3d(48px,40px,0) scale(1.025);
  }
  100%{
    transform:translate3d(66px,66px,0) scale(1);
    background-position:66px 66px,66px 66px,130% 76%;
  }
}

/* Existing dimensional motion gets pushed harder */
.motion-field{
  filter:saturate(1.16) brightness(1.08);
}

.mf-plane-a{
  opacity:.66 !important;
  animation-duration:11.8s !important;
}
.mf-plane-b{
  opacity:.56 !important;
  animation-duration:13.8s !important;
}
.mf-plane-c{
  opacity:.46 !important;
  animation-duration:8.4s !important;
}
.mf-lens-a{opacity:.68 !important}
.mf-lens-b{opacity:.44 !important}
.mf-pulse{
  opacity:1 !important;
  animation-duration:8.4s !important;
  filter:blur(10px) !important;
}
.mf-horizon{opacity:.43 !important}

/* Broad diagonal slab */
.motion-field::before{
  content:"";
  position:absolute;
  left:-82vw;
  top:17vh;
  width:220vw;
  height:24vh;
  transform:rotate(-10deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.018) 25%,
      rgba(255,255,255,.075) 38%,
      rgba(191,255,47,.13) 50%,
      rgba(255,255,255,.07) 62%,
      transparent 80%
    );
  filter:blur(11px);
  opacity:.78;
  animation:signalSlab 7.6s ease-in-out infinite alternate;
}

/* Large roaming glow */
.motion-field::after{
  content:"";
  position:absolute;
  width:min(70vw,780px);
  height:min(70vw,780px);
  right:-24vw;
  bottom:-22vw;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(191,255,47,.13),
      rgba(191,255,47,.045) 34%,
      rgba(255,255,255,.018) 47%,
      transparent 68%);
  filter:blur(10px);
  opacity:.6;
  animation:signalGlow 8.2s ease-in-out infinite alternate;
}

@keyframes signalSlab{
  0%{transform:rotate(-10deg) translateX(-22vw);opacity:.22}
  38%{opacity:.95}
  52%{transform:rotate(-9deg) translateX(8vw);opacity:.7}
  100%{transform:rotate(-10deg) translateX(44vw);opacity:.38}
}
@keyframes signalGlow{
  0%{transform:translate3d(0,0,0) scale(.84);opacity:.26}
  48%{opacity:.74}
  100%{transform:translate3d(-14vw,-16vh,0) scale(1.12);opacity:.48}
}

/* Digital scanline layer */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.20;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(255,255,255,.024) 4px,
      transparent 5px
    );
  mix-blend-mode:screen;
  animation:scanlineDrift 6.8s linear infinite;
}

@keyframes scanlineDrift{
  from{background-position:0 0}
  to{background-position:0 120px}
}

/* Signal tears — visible only in short bursts */
.glitch-field{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.glitch-field::before,
.glitch-field::after{
  content:"";
  position:absolute;
  left:-10%;
  width:120%;
  opacity:0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.06) 16%,
      rgba(191,255,47,.16) 34%,
      rgba(255,255,255,.08) 48%,
      rgba(191,255,47,.07) 70%,
      transparent
    );
  filter:blur(.6px);
}

.glitch-field::before{
  top:32%;
  height:8px;
  animation:tearA 7.4s steps(1,end) infinite;
}

.glitch-field::after{
  top:67%;
  height:4px;
  animation:tearB 9.1s steps(1,end) infinite;
}

@keyframes tearA{
  0%,12%,16%,42%,46%,74%,78%,100%{
    opacity:0;
    transform:translateX(0) scaleX(1);
  }
  13%{
    opacity:.75;
    transform:translateX(-6vw) scaleX(.92);
  }
  14%{
    opacity:.30;
    transform:translateX(9vw) scaleX(1.08);
  }
  15%{
    opacity:.65;
    transform:translateX(-2vw) scaleX(.97);
  }
  43%{
    opacity:.55;
    transform:translateX(12vw) scaleX(.86);
  }
  44%{
    opacity:.18;
    transform:translateX(-8vw) scaleX(1.04);
  }
  45%{
    opacity:.48;
    transform:translateX(3vw) scaleX(.96);
  }
  75%{
    opacity:.62;
    transform:translateX(-10vw) scaleX(1.12);
  }
  76%{
    opacity:.23;
    transform:translateX(7vw) scaleX(.9);
  }
  77%{
    opacity:.50;
    transform:translateX(-2vw) scaleX(1.01);
  }
}

@keyframes tearB{
  0%,28%,31%,58%,61%,87%,90%,100%{
    opacity:0;
    transform:translateX(0);
  }
  29%{
    opacity:.54;
    transform:translateX(10vw);
  }
  30%{
    opacity:.22;
    transform:translateX(-5vw);
  }
  59%{
    opacity:.48;
    transform:translateX(-12vw);
  }
  60%{
    opacity:.16;
    transform:translateX(4vw);
  }
  88%{
    opacity:.56;
    transform:translateX(8vw);
  }
  89%{
    opacity:.18;
    transform:translateX(-3vw);
  }
}

/* Occasional short rectangular block glitches */
.signal-blocks{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.signal-blocks span{
  position:absolute;
  height:3px;
  background:rgba(191,255,47,.25);
  opacity:0;
  box-shadow:0 0 12px rgba(191,255,47,.10);
}

.signal-blocks span:nth-child(1){
  top:23%;
  left:6%;
  width:21%;
  animation:blockA 8.7s steps(1,end) infinite;
}
.signal-blocks span:nth-child(2){
  top:54%;
  right:4%;
  width:16%;
  animation:blockB 10.3s steps(1,end) infinite;
}
.signal-blocks span:nth-child(3){
  top:81%;
  left:29%;
  width:27%;
  animation:blockC 11.4s steps(1,end) infinite;
}

@keyframes blockA{
  0%,18%,20%,62%,64%,100%{opacity:0;transform:translateX(0)}
  19%{opacity:.8;transform:translateX(11vw)}
  63%{opacity:.5;transform:translateX(-8vw)}
}
@keyframes blockB{
  0%,36%,38%,78%,80%,100%{opacity:0;transform:translateX(0)}
  37%{opacity:.65;transform:translateX(-12vw)}
  79%{opacity:.45;transform:translateX(7vw)}
}
@keyframes blockC{
  0%,22%,24%,69%,71%,100%{opacity:0;transform:translateX(0)}
  23%{opacity:.6;transform:translateX(8vw)}
  70%{opacity:.42;transform:translateX(-9vw)}
}

/* Section sweeps are more visible */
.home-hero::after,
.page-hero::after,
.form-page::after{
  height:24% !important;
  background:
    linear-gradient(
      96deg,
      transparent 0%,
      rgba(255,255,255,.035) 26%,
      rgba(191,255,47,.095) 50%,
      rgba(255,255,255,.036) 66%,
      transparent 88%
    ) !important;
  filter:blur(8px) !important;
  animation-duration:6.8s !important;
}

/* Keep all actual content above the signal field */
.site-nav,
.menu,
.preview-view,
main,
footer,
.preview-footer,
.preview-note,
.grain{
  z-index:2;
}
.site-nav,.menu,.grain,.preview-note{z-index:60}
.menu{z-index:70}
.grain{z-index:80}

/* mobile: glitch should still be obvious, but not strobe-like */
@media(max-width:759px){
  .ambient::after{
    background-size:58px 58px,58px 58px,180% 180% !important;
  }
  .glitch-field::before{height:6px}
  .glitch-field::after{height:3px}
  .signal-blocks span{height:2px}
  .mf-plane-a{opacity:.69 !important}
  .mf-plane-b{opacity:.59 !important}
  .mf-plane-c{opacity:.49 !important}
}

/* accessibility */
@media(prefers-reduced-motion:reduce){
  .ambient::before,
  .ambient::after,
  .motion-field::before,
  .motion-field::after,
  .glitch-field::before,
  .glitch-field::after,
  .signal-blocks span,
  body::after{
    animation:none !important;
  }
}


/* Mobile tap-target resilience */
@media(max-width:759px){
  .menu-btn{min-width:44px;min-height:44px;justify-content:flex-end}
  .menu-close{width:44px;height:44px}
  .down{width:44px;height:44px}
}

/* =========================================================
	V13 — PROOF, READABILITY + PURPOSEFUL MOTION
	The environment stays atmospheric. Projects carry the drama.
	========================================================= */

/* Faster route changes keep the motion feeling responsive. */
body.transitioning .page-transition{
	animation-duration:.44s;
}
body.page-enter .page-transition{
	animation-duration:.62s;
	animation-delay:.02s;
}
body.page-enter .pt-title{
	animation-duration:.56s;
	animation-delay:0s;
}
body.page-enter .pt-line{
	animation-duration:.52s;
	animation-delay:.02s;
}

/* Small type remains editorial without becoming hard to read. */
.eyebrow,
.kicker,
.section-head .num,
.section-head h2,
.work-intro span,
.browser-bar,
.case-link,
.person span,
.service-row small,
.service-panel span,
.process-top,
.swipe-note,
.page-index,
.case-kicker,
.case-bottom,
.case-stat small,
.chapter-num,
.service-num,
.deliverables span,
.about-name span,
.principle small,
.field > span,
.need-group legend,
.form-note,
.form-status,
.next-page small,
.menu-label,
.menu-link small,
.menu-foot,
footer{
	font-size:11px;
}
.case-foot p,
.about-split > p,
.service-panel p,
.process-card p,
.page-hero-foot p,
.case-copy p,
.chapter p,
.service-block > p,
.fit-card p,
.about-manifesto p,
.principle p,
.form-intro p{
	font-size:15px;
	line-height:1.58;
}
.desktop-nav a{
	font-size:11px;
}

/* Keyboard focus belongs to the same visual system. */
:focus-visible{
	outline:2px solid var(--acid);
	outline-offset:5px;
}

/* Client proof */
.testimonial{
	margin-top:58px;
	padding:30px 0 0;
	border-top:1px solid var(--line);
	display:grid;
	grid-template-columns:44px 1fr;
	gap:18px 12px;
}
.testimonial-mark{
	color:var(--acid);
	font-family:Georgia,serif;
	font-size:68px;
	line-height:.72;
}
.testimonial blockquote{
	margin:0;
	font-size:clamp(28px,7.6vw,52px);
	line-height:.97;
	letter-spacing:-.052em;
	max-width:25ch;
}
.testimonial-source{
	grid-column:2;
	display:flex;
	justify-content:space-between;
	gap:18px;
	padding-top:16px;
	border-top:1px solid var(--line2);
	color:var(--muted);
	font-size:11px;
	line-height:1.45;
	letter-spacing:.1em;
	text-transform:uppercase;
}
.testimonial-source span:last-child{
	color:var(--acid);
	text-align:right;
}
.testimonial-case{
	margin:0 0 92px;
}

/* Case-study problem framing */
.problem-intro{
	margin:0 0 34px;
	max-width:49ch;
	color:#b8b7b1;
	font-size:15px;
	line-height:1.58;
}
.problem-grid{
	display:grid;
	gap:10px;
}
.problem-card{
	min-height:280px;
	padding:20px;
	border:1px solid var(--line);
	background:rgba(14,14,14,.72);
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
}
.problem-card::after{
	content:"";
	position:absolute;
	right:-56px;
	bottom:-56px;
	width:150px;
	height:150px;
	border:1px solid rgba(191,255,47,.13);
	border-radius:50%;
	transition:transform .7s var(--ease),border-color .35s ease;
}
.problem-card:hover::after{
	transform:scale(1.22);
	border-color:rgba(191,255,47,.3);
}
.problem-card small{
	color:var(--acid);
	font-size:11px;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.problem-card h3{
	margin:auto 0 16px;
	font-size:clamp(30px,8vw,44px);
	line-height:.94;
	letter-spacing:-.052em;
	max-width:12ch;
}
.problem-card p{
	margin:0;
	color:#aeadA7;
	font-size:14px;
	line-height:1.55;
	max-width:39ch;
}

/* Inquiry availability */
.form-availability{
	margin-top:26px;
	padding-top:16px;
	border-top:1px solid var(--line);
	display:grid;
	grid-template-columns:10px 1fr;
	gap:10px;
	align-items:start;
	max-width:38ch;
	color:#aaa9a3;
	font-size:12px;
	line-height:1.5;
}
.availability-dot{
	width:7px;
	height:7px;
	margin-top:5px;
	border-radius:50%;
	background:var(--acid);
	box-shadow:0 0 16px rgba(191,255,47,.42);
	animation:availabilityPulse 2.8s ease-in-out infinite;
}
@keyframes availabilityPulse{
	50%{transform:scale(.72);opacity:.58}
}

/* The background responds quietly; the project surfaces respond directly. */
.motion-reactive .motion-field{
	transform:translate3d(var(--field-x,0),var(--field-y,0),0) scale(1.025);
	will-change:transform;
}
.browser,
.project-row,
.screen-frame{
	position:relative;
	isolation:isolate;
}
.browser::after,
.screen-frame::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:3;
	pointer-events:none;
	opacity:0;
	background:radial-gradient(420px circle at var(--card-x,50%) var(--card-y,50%),rgba(191,255,47,.14),transparent 46%);
	box-shadow:inset 0 0 0 1px rgba(191,255,47,.25);
	transition:opacity .35s ease;
}
.browser:hover::after,
.screen-frame:hover::after{
	opacity:1;
}
.lute-images img,
.screen-frame img{
	transition:transform .85s var(--ease),filter .6s ease;
}
.browser:hover .lute-images img:first-child{
	transform:rotate(-5deg) translate3d(-1.5%,-1.5%,0) scale(1.025);
}
.browser:hover .lute-images img:last-child{
	transform:rotate(3.5deg) translate3d(1.5%,7px,0) scale(1.025);
}
.screen-frame{
	overflow:hidden;
}
.screen-frame:hover img{
	transform:scale(1.018);
}
.project-row h2,
.project-row .arrow{
	transition:transform .5s var(--ease),color .3s ease;
}
.project-row:hover h2{
	transform:translateX(8px);
}
.project-row:hover .arrow{
	transform:translate(6px,-3px);
	color:var(--acid);
}

/* Less constant glitching gives the deliberate movement more impact. */
body::after{
	opacity:.11;
	animation-duration:11s;
}
.ambient::before{
	animation-duration:13.5s !important;
}
.ambient::after{
	animation-duration:24s !important;
}
.mf-plane-a{opacity:.52 !important;animation-duration:16s !important}
.mf-plane-b{opacity:.44 !important;animation-duration:19s !important}
.mf-plane-c{opacity:.36 !important;animation-duration:14s !important}
.mf-lens-a{opacity:.54 !important}
.mf-lens-b{opacity:.34 !important}
.mf-pulse{opacity:.62 !important;animation-duration:13.8s !important}
.glitch-field::before{animation-duration:11.8s}
.glitch-field::after{animation-duration:14.6s}
.signal-blocks span:nth-child(1){animation-duration:14.2s}
.signal-blocks span:nth-child(2){animation-duration:16.4s}
.signal-blocks span:nth-child(3){animation-duration:17.8s}

/* Reveal fallback */
.observer-reveal .reveal,
.observer-reveal .reveal-left{
	opacity:0;
	transform:translate3d(0,30px,0);
	transition:opacity .75s ease,transform .9s var(--ease);
}
.observer-reveal .reveal-left{
	transform:translate3d(-28px,0,0);
}
.observer-reveal .reveal.is-visible,
.observer-reveal .reveal-left.is-visible{
	opacity:1;
	transform:none;
}

@supports (animation-timeline:view()){
	.screen-frame img{
		animation:screenProof linear both;
		animation-timeline:view();
		animation-range:entry 0% cover 55%;
	}
	@keyframes screenProof{
		from{transform:scale(1.045);filter:saturate(.82) brightness(.86)}
		to{transform:scale(1);filter:none}
	}
}

@media(max-width:759px){
	.home-hero{
		min-height:92svh;
		padding-top:88px;
		padding-bottom:22px;
	}
	.hero-title{
		margin-top:42px;
	}
	.hero-bottom{
		padding-top:34px;
	}
	.testimonial{
		margin-top:48px;
	}
	.testimonial-case{
		margin-top:0;
		margin-bottom:72px;
	}
}

@media(min-width:760px){
	.testimonial{
		grid-template-columns:92px 1fr;
		gap:22px 28px;
		padding-top:42px;
	}
	.testimonial-mark{
		font-size:112px;
	}
	.testimonial-source{
		max-width:820px;
	}
	.problem-grid{
		grid-template-columns:repeat(2,1fr);
	}
	.problem-card{
		min-height:340px;
		padding:26px;
	}
}

@media(min-width:1180px){
	.problem-grid{
		grid-template-columns:repeat(4,1fr);
	}
}

@media(prefers-reduced-motion:reduce){
	.availability-dot,
	.screen-frame img{
		animation:none !important;
	}
	.motion-field{
		transform:none !important;
	}
}