/* Motion art direction. Shared typography and forms remain in styles.css.
   Track length controls how long each scene stays pinned; motion.js owns transforms. */
:root {
  --scene-blue: oklch(0.4 0.15 245);
  --scene-lime: oklch(0.92 0.14 120);
  --scene-pink: oklch(0.86 0.08 10);
  --hero-scroll-distance: 115svh;
  --valor-scroll-distance: 70svh;
}
.site-header {
  max-width: none;
  background: var(--scene-lime);
  height: 86px;
  color: var(--scene-blue);
}
.site-header .brand-symbol {
  color: var(--scene-blue);
}
.site-header .nav-contact {
  border-color: var(--scene-blue);
}
.hero-scroll {
  position: relative;
  background: var(--scene-blue);
  color: white;
}
.hero-stage {
  position: relative;
  height: calc(100svh - 86px);
  min-height: 730px;
  overflow: hidden;
  isolation: isolate;
}
html[data-motion="on"] .hero-scroll {
  height: calc(100svh + var(--hero-scroll-distance));
  min-height: calc(730px + var(--hero-scroll-distance));
}
html[data-motion="on"] .hero-stage {
  position: sticky;
  top: 0;
}
.hero-backtype {
  position: absolute;
  top: 32%;
  left: -8%;
  white-space: nowrap;
  font-size: clamp(130px, 23vw, 340px);
  font-weight: 800;
  line-height: 1;
  color: oklch(0.52 0.12 245);
  letter-spacing: -0.04em;
  pointer-events: none;
  opacity: 0.45;
}
.hero-intro {
  position: absolute;
  top: 36px;
  left: 20px;
  right: 20px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 17px;
}
.hero-intro h1 {
  font-size: clamp(54px, 7.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.hero-intro h1 span {
  font-size: 1em;
  color: var(--scene-lime);
  white-space: normal;
}
.hero-intro > p:last-child {
  font-size: 16px;
  margin-top: 18px;
}
.hero-artwork {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.floating-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  box-shadow: 12px 18px 0 oklch(0.2 0.07 245 / 0.33);
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  transform-origin: 50% 55%;
  background: white;
}
.window-bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
  font-size: 8px;
  border-bottom: 1px solid var(--ink);
}
.window-bar > span:first-child {
  font-size: 6px;
  letter-spacing: 2px;
}
.window-architecture {
  transform: translate3d(calc(-50% - 285px), -5px, 0) rotate(-14deg);
  z-index: 1;
}
.window-commerce {
  transform: translate3d(calc(-50% + 285px), 20px, 0) rotate(14deg);
  z-index: 2;
}
.window-main {
  width: 430px;
  transform: translate3d(-50%, -35px, 0) rotate(-3deg);
  z-index: 3;
}
.window-photo {
  height: 245px;
  position: relative;
  overflow: hidden;
}
.window-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.72);
}
.window-photo > span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 38px;
  letter-spacing: -0.04em;
  line-height: 1.03;
  font-weight: 600;
  color: white;
}
.window-footer {
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 8px;
}
.window-shop {
  background: var(--scene-pink);
  height: 285px;
  position: relative;
  padding: 20px;
  color: var(--ink);
}
.window-shop strong {
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
  font-weight: 600;
}
.window-shop img {
  position: absolute;
  width: 255px;
  height: 255px;
  right: -15px;
  bottom: 0;
  object-fit: contain;
}
.window-shop > span {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-size: 8px;
}
.window-canvas {
  position: relative;
  height: 290px;
  background: var(--scene-lime);
  padding: 20px;
  color: var(--scene-blue);
  overflow: hidden;
}
.canvas-brand {
  font-size: 9px;
  font-weight: 700;
}
.window-canvas > strong {
  position: relative;
  z-index: 2;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-top: 25px;
  font-weight: 700;
}
.window-canvas > strong > span {
  color: var(--scene-blue);
}
.window-canvas > img {
  position: absolute;
  width: 300px;
  max-width: none;
  height: 320px;
  object-fit: contain;
  right: -65px;
  top: -3px;
  transform: rotate(15deg);
}
.canvas-footer {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  z-index: 2;
}
.canvas-button {
  background: var(--scene-blue);
  color: white;
  border-radius: 20px;
  padding: 7px 13px;
}
.floating-sticker {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 4;
  color: var(--scene-blue);
}
.sticker-star {
  left: 12%;
  top: 33%;
  color: var(--scene-lime);
  font-size: 110px;
  line-height: 1;
  transform: rotate(-15deg);
}
.sticker-code {
  right: 10%;
  top: 39%;
  border: 2px solid var(--ink);
  background: var(--scene-pink);
  font-size: 30px;
  font-weight: 700;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  transform: rotate(14deg);
}
.sticker-label {
  right: 21%;
  top: 87%;
  background: var(--scene-lime);
  border: 2px solid var(--ink);
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 800;
  transform: rotate(-9deg);
}
.hero-rail {
  position: absolute;
  bottom: 22px;
  left: 42px;
  right: 42px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.scroll-invitation {
  margin-left: 90px;
  font-size: 12px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.scroll-invitation span {
  font-size: 23px;
}
.hero-cta {
  color: var(--scene-blue);
  background: var(--scene-lime);
  border-radius: 40px;
  font-weight: 600;
}
.hero-cta:hover {
  background: white;
}
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: oklch(0.9 0 0 / 0.15);
  z-index: 6;
}
.hero-progress > span {
  display: block;
  height: 100%;
  background: var(--scene-lime);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-story {
  position: absolute;
  z-index: 4;
  left: 6%;
  top: 15%;
  max-width: 35%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(50px);
}
.hero-story > span {
  font-size: 12px;
}
.hero-story h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.3;
  font-weight: 700;
  margin: 15px 0;
}
.hero-story h2 span {
  color: var(--scene-lime);
  margin-left: 10px;
}
.hero-story p {
  color: oklch(0.95 0.025 230);
  font-size: 16px;
  line-height: 1.8;
}
.capabilities {
  background: var(--scene-lime);
  color: var(--scene-blue);
  border: 0;
  position: relative;
  padding-block: 30px;
  overflow: hidden;
}
.capabilities i {
  color: var(--scene-blue);
}
.services .section-heading {
  align-self: start;
  position: sticky;
  top: 50px;
}
.work-grid {
  gap: 45px;
}
.project-preview {
  border-radius: 16px;
}
.project-commerce {
  margin-top: 130px;
}
.architecture-preview {
  background: oklch(0.88 0.07 225);
}
.commerce-preview {
  background: var(--scene-pink);
}
.parallax-layer {
  object-position: var(--position, center);
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.architecture-image > img {
  inset: -35% 0;
  height: 170%;
}
.valor-scroll {
  background: var(--scene-lime);
  color: var(--scene-blue);
  position: relative;
}
.valor-stage {
  position: relative;
  min-height: 650px;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
html[data-motion="on"] .valor-scroll {
  height: calc(100svh + var(--valor-scroll-distance));
  min-height: calc(650px + var(--valor-scroll-distance));
}
html[data-motion="on"] .valor-stage {
  position: sticky;
  top: 0;
}
.valor-word {
  position: absolute;
  font-size: clamp(100px, 21vw, 300px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  opacity: 0.15;
  white-space: nowrap;
}
.word-dev {
  top: 2%;
  left: -5%;
}
.word-valor {
  bottom: 2%;
  right: -8%;
}
.valor-sculpture {
  position: absolute;
  right: -5%;
  top: 0;
  width: 68%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  transform: rotate(-20deg);
}
.valor-copy {
  position: relative;
  z-index: 3;
  padding: 140px 6%;
  width: 62%;
  pointer-events: none;
}
.valor-copy > a {
  pointer-events: auto;
}
.valor-copy > span {
  font-size: 12px;
}
.valor-copy h2 {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.35;
  font-weight: 700;
  margin: 22px 0;
}
.valor-copy p {
  font-size: 14px;
  color: var(--scene-blue);
  margin-bottom: 25px;
}
.valor-copy .button {
  background: var(--scene-blue);
  border-radius: 30px;
}
.contact {
  border-radius: 20px;
  background: var(--scene-pink);
}
.contact .blue {
  color: var(--scene-blue);
}
.motion-tools {
  position: fixed;
  bottom: 14px;
  left: 16px;
  z-index: 15;
}
.motion-tools button {
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 9px 14px;
  background: white;
  color: var(--ink);
  font-size: 11px;
  box-shadow: 0 3px 12px oklch(0.1 0 0 / 0.08);
}
html[data-motion="off"] {
  scroll-behavior: auto;
}
html[data-motion="off"] .hero-progress {
  display: none;
}
html[data-motion="off"] .hero-story {
  display: none;
}
html[data-motion="off"] .parallax-layer {
  transform: none !important;
}
@media (min-width: 1550px) {
  .site-header {
    padding-inline: 56px;
  }
}
@media (max-width: 1100px) {
  .floating-window {
    width: 320px;
  }
  .window-main {
    width: 380px;
  }
  .window-architecture {
    transform: translate3d(calc(-50% - 230px), 0, 0) rotate(-14deg);
  }
  .window-commerce {
    transform: translate3d(calc(-50% + 230px), 20px, 0) rotate(14deg);
  }
  .sticker-star {
    left: 6%;
  }
  .sticker-code {
    right: 5%;
  }
  .hero-story {
    left: 4%;
  }
  .hero-story h2 {
    font-size: 48px;
  }
}
@media (max-width: 760px) {
  :root {
    --hero-scroll-distance: 85svh;
    --valor-scroll-distance: 35svh;
  }
  .site-header {
    height: 76px;
  }
  .site-header nav {
    top: 76px;
    background: var(--scene-lime);
  }
  .hero-stage {
    height: calc(100svh - 76px);
    min-height: 760px;
  }
  html[data-motion="on"] .hero-scroll {
    min-height: calc(760px + var(--hero-scroll-distance));
  }
  .hero-intro {
    top: 36px;
    left: 16px;
    right: 16px;
  }
  .hero-eyebrow {
    font-size: 9px;
    margin-bottom: 23px;
  }
  .hero-intro h1 {
    font-size: clamp(43px, 11.8vw, 76px);
    line-height: 1.03;
  }
  .hero-intro > p:last-child {
    font-size: 12px;
    margin-top: 16px;
  }
  .hero-backtype {
    font-size: 140px;
    top: 43%;
    left: -30%;
  }
  .floating-window {
    width: 245px;
    top: 48%;
  }
  .window-main {
    width: 285px;
    transform: translate3d(-50%, 20px, 0) rotate(-3deg);
  }
  .window-architecture {
    transform: translate3d(calc(-50% - 125px), -10px, 0) rotate(-16deg);
  }
  .window-commerce {
    transform: translate3d(calc(-50% + 130px), 50px, 0) rotate(17deg);
  }
  .window-bar {
    height: 24px;
    font-size: 6px;
  }
  .window-canvas {
    height: 230px;
    padding: 15px;
  }
  .window-canvas > strong {
    font-size: 49px;
    margin-top: 26px;
  }
  .window-canvas > img {
    width: 220px;
    height: 255px;
    right: -62px;
    top: 4px;
  }
  .canvas-brand {
    font-size: 7px;
  }
  .canvas-footer {
    left: 15px;
    right: 15px;
    font-size: 6px;
  }
  .canvas-button {
    padding: 5px 8px;
  }
  .window-shop {
    height: 220px;
    padding: 15px;
  }
  .window-shop strong {
    font-size: 24px;
  }
  .window-shop img {
    width: 205px;
    height: 205px;
    right: -35px;
  }
  .window-photo {
    height: 205px;
  }
  .window-photo > span {
    font-size: 28px;
    left: 15px;
    bottom: 15px;
  }
  .window-footer {
    font-size: 6px;
  }
  .sticker-star {
    font-size: 70px;
    left: 7%;
    top: 33%;
  }
  .sticker-code {
    width: 57px;
    height: 57px;
    font-size: 22px;
    right: 5%;
    top: 31%;
  }
  .sticker-label {
    font-size: 8px;
    top: 84%;
    right: 12%;
    padding: 6px 10px;
  }
  .hero-rail {
    left: 20px;
    right: 20px;
    bottom: 22px;
    gap: 12px;
  }
  .scroll-invitation {
    margin-left: 0;
    position: absolute;
    bottom: 60px;
    font-size: 9px;
    gap: 8px;
    max-width: 120px;
    line-height: 1.7;
  }
  .hero-cta {
    margin-left: auto;
    font-size: 11px;
    padding: 11px 15px;
    gap: 13px;
    min-height: 45px;
  }
  .hero-story {
    top: 7%;
    left: 24px;
    max-width: 85%;
  }
  .hero-story h2 {
    font-size: 38px;
    line-height: 1.2;
    margin-block: 12px;
  }
  .hero-story h2 br {
    display: none;
  }
  .hero-story > span {
    font-size: 10px;
  }
  .hero-story p {
    font-size: 12px;
  }
  .hero-story p br {
    display: none;
  }
  .services .section-heading {
    position: static;
  }
  .project-commerce {
    margin-top: 0;
  }
  .work-grid {
    gap: 40px;
  }
  .valor-stage {
    min-height: 700px;
  }
  html[data-motion="on"] .valor-scroll {
    min-height: calc(700px + var(--valor-scroll-distance));
  }
  .valor-copy {
    padding: 65px 24px;
    width: 100%;
  }
  .valor-copy h2 {
    font-size: 38px;
    margin-block: 18px;
  }
  .valor-copy p {
    font-size: 12px;
    max-width: 330px;
  }
  .valor-sculpture {
    width: 90%;
    height: 60%;
    top: 42%;
    right: -12%;
    opacity: 0.95;
  }
  .valor-word {
    font-size: 125px;
  }
  .word-dev {
    top: 0;
    left: -5%;
  }
  .word-valor {
    bottom: 0;
    right: -50%;
  }
  .valor-copy > a {
    min-height: 45px;
    font-size: 11px;
  }
  .motion-tools {
    left: 10px;
    bottom: 10px;
  }
  .motion-tools button {
    font-size: 10px;
    padding: 7px 11px;
  }
}
@media (max-height: 600px) and (min-width: 761px) {
  .hero-stage {
    min-height: 730px;
  }
  .hero-intro h1 {
    font-size: 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll,
  .valor-scroll {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-stage,
  .valor-stage {
    position: relative !important;
  }
  .hero-story {
    display: none;
  }
  .hero-progress {
    display: none;
  }
  .parallax-layer {
    transform: none !important;
  }
}