/* GIN HOMEPAGE — MOTION DIRECTION V21
   Homepage only: no changes to shared navigation, page titles or footer.
   One independently animated color-fill per actual typographic line. */
body.gin-motion-home{--gm-ease:cubic-bezier(.22,1,.36,1);--gm-mint:#00f5a0}
body.gin-motion-home main{transition:filter .86s var(--gm-ease),opacity .86s ease;will-change:auto}
body.gin-motion-home.gin-loading main{filter:blur(9px);opacity:.7}
body.gin-motion-home.gin-home-ready main{filter:blur(0);opacity:1}
body.gin-motion-home .v18-hero{isolation:isolate;overflow:hidden}
body.gin-motion-home .v18-hero-content{perspective:900px}
body.gin-motion-home .v18-hero h1{transform-origin:left bottom;transition:transform 1.1s var(--gm-ease),opacity 1s ease}
body.gin-motion-home.gin-loading .v18-hero h1{transform:translate3d(0,17px,0);opacity:.4}
body.gin-motion-home .v18-hero-symbol{transition:transform .3s ease-out}
body.gin-motion-home .v18-hero-symbol i{animation:gin-orbital 19s linear infinite}
@keyframes gin-orbital{from{transform:rotate(0deg) rotateX(70deg)}to{transform:rotate(360deg) rotateX(70deg)}}

/* Key behavior: each line is its own real element, independently scrolled and filled. */
body.gin-motion-home .gin-motion-line{
  --gin-line-progress:0%;
  display:block;
  width:fit-content;
  max-width:100%;
  position:relative;
  color:transparent!important;
  background-image:linear-gradient(
    90deg,
    var(--gin-line-active,#090909) 0%,
    var(--gin-line-active,#090909) var(--gin-line-progress),
    var(--gin-line-idle,#a5a9a6) var(--gin-line-progress),
    var(--gin-line-idle,#a5a9a6) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent!important;
  transition:background-position .08s linear;
}
body.gin-motion-home .gin-motion-line .mint{
  color:var(--gm-mint)!important;
  -webkit-text-fill-color:var(--gm-mint)!important;
}
body.gin-motion-home .gin-motion-line.gin-motion-line-dark{
  --gin-line-active:#f7f7f7;
  --gin-line-idle:#666b6d;
}
body.gin-motion-home .gin-motion-line.gin-motion-line-light{
  --gin-line-active:#080808;
  --gin-line-idle:#adb1b0;
}
body.gin-motion-home .v18-hero-strap .gin-motion-line{
  --gin-line-active:#fff;
  --gin-line-idle:#606768;
  width:max-content;
  max-width:100%;
}
body.gin-motion-home .v18-manifest h2,
body.gin-motion-home .v18-universe h2,
body.gin-motion-home .v18-journal-tease h2,
body.gin-motion-home .v18-section-title h2{max-width:100%;overflow-wrap:normal}
body.gin-motion-home .v18-universe h2 .gin-motion-line{--gin-line-active:#f8f8f8;--gin-line-idle:#707474}
body.gin-motion-home .v18-universe h2 .gin-motion-line .mint{
  /* The user asked for a grey-to-white sweep in dark sections, not green-on-black. */
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
}
body.gin-motion-home .v18-manifest h2 .gin-motion-line span:not(.mint){color:inherit;-webkit-text-fill-color:transparent}
body.gin-motion-home .v18-manifest h2 .gin-motion-line:nth-child(3){--gin-line-idle:#8a8e8c}
body.gin-motion-home .v18-journal-tease h2 .gin-motion-line,
body.gin-motion-home .v18-showcase h2 .gin-motion-line{--gin-line-idle:#afb3b0}

/* Layered reveals: headlines are scroll-scrubbed, supporting content is observer-driven. */
body.gin-motion-home .gm-reveal{
  opacity:0;
  transform:translate3d(0,35px,0);
  filter:blur(5px);
  transition:opacity .85s var(--gm-ease),transform 1.05s var(--gm-ease),filter .85s var(--gm-ease);
  transition-delay:var(--gm-delay,0ms);
}
body.gin-motion-home .gm-reveal.gm-active{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
body.gin-motion-home .gm-project{
  --gm-image-scale:1.085;
  opacity:0;
  transform:translate3d(0,55px,0) scale(.975);
  transition:opacity 1s var(--gm-ease),transform 1.15s var(--gm-ease);
  transition-delay:var(--gm-delay,0ms);
}
body.gin-motion-home .gm-project.gm-active{opacity:1;transform:translate3d(0,0,0) scale(1)}
body.gin-motion-home .gm-project .v18-project-art img{
  transform:scale(var(--gm-image-scale));
  transition:transform 1.45s var(--gm-ease);
}
body.gin-motion-home .gm-project.gm-active .v18-project-art img{--gm-image-scale:1}
body.gin-motion-home .gm-project:hover .v18-project-art img{transform:scale(1.055)!important;transition-duration:.55s}
body.gin-motion-home .gm-project .v18-project-meta{
  opacity:.6;transform:translateY(11px);
  transition:opacity .7s ease .14s,transform .7s var(--gm-ease) .14s;
}
body.gin-motion-home .gm-project.gm-active .v18-project-meta{opacity:1;transform:none}
body.gin-motion-home .v18-micro,
body.gin-motion-home .v18-overline{position:relative}
body.gin-motion-home main .gm-rule:after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  transform:scaleX(0);transform-origin:left;background:currentColor;opacity:.52;
  transition:transform 1.2s var(--gm-ease);
}
body.gin-motion-home main .gm-rule.gm-active:after{transform:scaleX(1)}
body.gin-motion-home .v18-system a{transition:background-color .25s,color .25s,transform .4s var(--gm-ease)}
body.gin-motion-home .v18-system a:hover{transform:translateX(5px)}
body.gin-motion-home .v18-orbit{transition:transform 1.3s var(--gm-ease)}
body.gin-motion-home .v18-orbit.gm-active{transform:rotate(4deg)}
body.gin-motion-home .v18-orbit i{animation:gin-orbital 23s linear infinite}
body.gin-motion-home .v18-journal-row{transition:padding-left .4s var(--gm-ease),color .25s ease}
body.gin-motion-home .v18-journal-row:hover{padding-left:14px}

/* Loading is self-dismissing in CSS if JavaScript is unavailable. */
#gin-energy-loader{
  position:fixed;inset:0;z-index:10000;
  background:#080909;color:#f3f4f3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;
  font-family:Manrope,Arial,sans-serif;
  animation:gm-failsafe-hide .45s ease 2.65s forwards;
}
#gin-energy-loader.gm-loading-done{animation:gm-loader-exit .6s var(--gm-ease) forwards}
#gin-energy-loader.gm-loader-hidden{display:none}
#gin-energy-loader .gm-loader-name{font-size:11px;font-weight:800;letter-spacing:.2em}
#gin-energy-loader .gm-loader-caption{font-size:9px;font-weight:800;letter-spacing:.15em;color:#adb0ae}
#gin-energy-loader .gm-ring{width:min(30vw,172px);min-width:118px;aspect-ratio:1;position:relative;display:grid;place-items:center}
#gin-energy-loader .gm-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#gin-energy-loader .gm-ring-track{fill:none;stroke:#343638;stroke-width:2.5}
#gin-energy-loader .gm-ring-power{
  fill:none;stroke:#00f5a0;stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px rgba(0,245,160,.75));
  animation:gm-ring-charge 1.85s cubic-bezier(.28,.1,.16,1) forwards;
}
#gin-energy-loader .gm-ring-inner{
  position:absolute;font:800 19px/1 Manrope,Arial,sans-serif;letter-spacing:-.035em;
}
#gin-energy-loader .gm-loader-skip{
  position:absolute;bottom:clamp(24px,6vh,65px);
  border:1px solid #4c4f50;background:transparent;color:#f3f3f3;
  font:800 10px Manrope,Arial,sans-serif;letter-spacing:.08em;
  padding:12px 17px;min-height:43px;cursor:pointer;
}
#gin-energy-loader .gm-loader-skip:hover{color:#070707;background:#00f5a0;border-color:#00f5a0}
@keyframes gm-ring-charge{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes gm-failsafe-hide{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes gm-loader-exit{to{opacity:0;visibility:hidden;pointer-events:none;filter:blur(15px)}}

/* Bespoke SVG doodle runner: animated arms, legs, head + translation;
   one triggered signature moment in a high contrast white corridor. */
.gm-runway{
  position:relative;overflow:hidden;isolation:isolate;
  background:#f6f7f4;color:#0b0c0b;
  min-height:165px;border-top:1px solid #dedfda;border-bottom:1px solid #dedfda;
  display:grid;align-items:center;padding:23px var(--g);
}
.gm-runway .gm-runway-top{
  display:flex;justify-content:space-between;gap:18px;
  align-self:start;position:relative;z-index:3;
  font:800 10px Manrope,Arial,sans-serif;letter-spacing:.12em;
}
.gm-runway .gm-runway-track{
  position:absolute;left:var(--g);right:var(--g);bottom:26px;height:1px;background:#bec4bd;
}
.gm-runway .gm-runner{
  position:absolute;bottom:26px;left:0;width:111px;height:124px;
  transform:translate3d(-132px,0,0);
  z-index:2;will-change:transform;pointer-events:none;
}
.gm-runway.gm-run-now .gm-runner{animation:gm-run-across 5.5s cubic-bezier(.4,.02,.2,1) both}
.gm-runway .gm-runner svg{display:block;width:100%;height:100%;overflow:visible}
.gm-runway .gm-leg-front,.gm-runway .gm-leg-back,
.gm-runway .gm-arm-front,.gm-runway .gm-arm-back{
  transform-box:fill-box;transform-origin:50% 7%;
}
.gm-runway.gm-run-now .gm-leg-front{animation:gm-run-leg .33s ease-in-out infinite alternate}
.gm-runway.gm-run-now .gm-leg-back{animation:gm-run-leg .33s ease-in-out infinite alternate-reverse}
.gm-runway.gm-run-now .gm-arm-front{animation:gm-run-arm .33s ease-in-out infinite alternate-reverse}
.gm-runway.gm-run-now .gm-arm-back{animation:gm-run-arm .33s ease-in-out infinite alternate}
.gm-runway.gm-run-now .gm-runner svg{animation:gm-run-bounce .17s ease-in-out infinite alternate}
.gm-runway .gm-runway-shadow{position:absolute;bottom:21px;left:0;width:85px;height:6px;background:#24242428;border-radius:50%;filter:blur(2px);transform:translateX(-130px)}
.gm-runway.gm-run-now .gm-runway-shadow{animation:gm-shadow-across 5.5s cubic-bezier(.4,.02,.2,1) both}
@keyframes gm-run-across{0%{transform:translate3d(-132px,0,0)}100%{transform:translate3d(calc(100vw + 132px),0,0)}}
@keyframes gm-shadow-across{0%{transform:translateX(-132px)}100%{transform:translateX(calc(100vw + 132px))}}
@keyframes gm-run-leg{from{transform:rotate(-35deg)}to{transform:rotate(40deg)}}
@keyframes gm-run-arm{from{transform:rotate(-39deg)}to{transform:rotate(34deg)}}
@keyframes gm-run-bounce{from{transform:translateY(-2px)}to{transform:translateY(2px)}}

/* Mobile: prioritized content, not visual noise. */
@media(max-width:760px){
  body.gin-motion-home .v18-hero-strap .gin-motion-line{white-space:normal}
  body.gin-motion-home .v18-hero-symbol i{animation-duration:30s}
  .gm-runway{min-height:145px}
  .gm-runway .gm-runner{width:89px;height:103px}
  .gm-runway .gm-runway-top{font-size:9px}
  #gin-energy-loader .gm-ring{width:135px}
}
@media(prefers-reduced-motion:reduce){
  body.gin-motion-home main{filter:none!important;opacity:1!important;transition:none!important}
  body.gin-motion-home .gm-reveal,body.gin-motion-home .gm-project{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  body.gin-motion-home .gm-project img{transform:none!important;transition:none!important}
  body.gin-motion-home .gm-project .v18-project-meta{opacity:1!important;transform:none!important}
  body.gin-motion-home .gin-motion-line{
    background:none!important;-webkit-background-clip:initial!important;
    color:var(--gin-line-active,#080808)!important;-webkit-text-fill-color:var(--gin-line-active,#080808)!important
  }
  body.gin-motion-home .gin-motion-line .mint{-webkit-text-fill-color:var(--gm-mint)!important}
  #gin-energy-loader{display:none!important}
  .gm-runway .gm-runner{transform:translate3d(60%,0,0)!important;animation:none!important}
  .gm-runway .gm-runner svg,.gm-runway .gm-runner svg *{animation:none!important}
  .gm-runway .gm-runway-shadow{display:none}
}