/* V4 — the welcome motion language, extended gently through the portfolio. */

.v4 {
  --violet: #ffb3de;
  --hot-pink: #ffb3de;
  --motion-x: 0px;
  --motion-y: 0px;
  --scroll-soft: 0;
}

.v4 ::selection { color: var(--ink); background: var(--hot-pink); }
.v4 .brand-mark .steam,
.v4 h1 em,
.v4 .chapter-copy > span,
.v4 .form-note { color: var(--hot-pink); }

.v4 .eyebrow::before,
.v4 .bc-welcome-kicker::before,
.v4 .bc-welcome-status i {
  background: var(--hot-pink);
  box-shadow: 0 0 0 5px rgba(255,179,222,.2);
}

.v4 .bc-welcome-top > p b,
.v4 .bc-welcome h1 em { color: var(--hot-pink); }
.v4 .bc-clip-violet { background: var(--hot-pink); color: var(--ink); }
.v4 .bc-welcome-playhead { background: var(--hot-pink); box-shadow: 0 0 26px rgba(255,179,222,.72); }
.v4 .bc-welcome-playhead i { border-top-color: var(--hot-pink); }
.v4 .bc-orb-violet { background: var(--hot-pink); }
.v4 .bc-enter:hover,
.v4 .button-dark:hover,
.v4 .media-play:hover { color: var(--ink); background: var(--hot-pink); }

.v4 main { overflow: clip; }
.v4 .page-section,
.v4 .about { isolation: isolate; }

/* One quiet floating colour field per major section. */
.v4 .work::after,
.v4 .services::after,
.v4 .process::after,
.v4 .contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(120px, 15vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .58;
  filter: blur(.2px);
  translate: calc(var(--motion-x) * .18) calc(var(--motion-y) * .18 + var(--section-drift, 0px));
  transition: translate .22s ease-out;
}

.v4 .work,
.v4 .services,
.v4 .process,
.v4 .contact { position: relative; }
.v4 .work::after { top: 12%; right: -5%; background: var(--hot-pink); }
.v4 .services::after { bottom: 8%; left: -6%; background: var(--paper); opacity: .72; }
.v4 .process::after { top: 10%; right: 4%; background: var(--blue); }
.v4 .contact::after { bottom: 5%; right: -4%; background: var(--hot-pink); opacity: .42; }

.v4 .motion-reveal {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}

.v4 .motion-reveal.is-visible {
  translate: calc(var(--motion-x) * var(--motion-depth, .025)) calc(var(--motion-y) * var(--motion-depth, .025));
}

.v4 .project,
.v4 .service-item,
.v4 .process-list li,
.v4 .project-form {
  transition: translate .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease, background-color .4s ease;
}

.v4 .project:hover,
.v4 .service-item:hover,
.v4 .process-list li:hover { translate: 0 -7px; }
.v4 .service-item:hover { background: rgba(248,246,239,.24); }

.v4 .film-chapters {
  background:
    radial-gradient(circle at 18% 18%, rgba(201,221,227,.72), transparent 31%),
    radial-gradient(circle at 83% 72%, rgba(255,179,222,.48), transparent 34%),
    var(--paper);
}

.v4 .liquid-field::after,
.v4 .liquid-field i:nth-child(2) { background: var(--hot-pink); opacity: .32; }
.v4 .timeline-spine i { background: var(--hot-pink); }
.v4 .film-chapter::after { border-color: var(--ink); background: var(--paper); }
.v4 .film-chapter.is-passed::after { background: var(--hot-pink); }

.v4 .chapters-header {
  min-height: 72svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v4 .chapters-header h2 {
  max-width: 980px;
  font-size: clamp(58px, 8.6vw, 148px);
  line-height: .87;
  letter-spacing: -.065em;
}

.v4 .film-chapter { min-height: 112svh; }
.v4 .chapter-copy { max-width: 540px; }
.v4 .chapter-copy > p:nth-of-type(2) { max-width: 500px; font-size: clamp(15px,1.25vw,20px); line-height: 1.68; }
.v4 .skill-card { background: rgba(248,246,239,.64); backdrop-filter: blur(12px); }

.v4 .chapter-artist .shape-arch {
  width: min(40vw, 610px);
  height: min(62vh, 600px);
  border-radius: 48% 48% 3px 3px / 20% 20% 3px 3px;
  box-shadow: 20px 20px 0 rgba(255,179,222,.42);
}

.v4 .shape-split {
  width: min(53vw, 820px);
  height: min(62vh, 610px);
  gap: clamp(36px,4.4vw,72px);
}
.v4 .shape-split::after {
  content: "";
  position: absolute;
  top: -11%; bottom: -11%; left: 50%;
  width: 1px;
  background: var(--ink);
}
.v4 .split-half { z-index: 1; }
.v4 .split-half video { animation: v4-breathe 10s ease-in-out infinite alternate; }
.v4 .split-right video { animation-delay: -5s; }

.v4 .chapter-details .shape-blob {
  width: min(39vw,590px);
  height: min(51vh,480px);
  margin-left: -4vw;
  border: 1px solid var(--ink);
  border-radius: 42% 58% 47% 53% / 55% 42% 58% 45%;
  clip-path: none;
  box-shadow: 20px 18px 0 rgba(255,179,222,.38);
}
.v4 .chapter-details .shape-blob::after { display: none; }

.v4 .chapter-afterlife .shape-circle {
  width: min(39vw,580px);
  height: min(39vw,580px);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,179,222,.24);
}

.v4 .shape-frame video { transition: filter .8s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
.v4 .shape-frame:hover video { transform: scale(1.045); filter: saturate(1.08) contrast(1.02); }

.v4 .chapter-navigator a { gap: 12px; }
.v4 .chapter-navigator i { transition: background .3s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.v4 .chapter-navigator a.is-active i { background: var(--hot-pink); transform: scale(1.22); }
.v4 .chapter-navigator span { font-family: var(--body); text-transform: none; letter-spacing: 0; }

@keyframes v4-breathe {
  from { transform: scale(1.01) translate3d(-.6%,0,0); }
  to { transform: scale(1.07) translate3d(.6%,-.5%,0); }
}

@media (max-width: 850px) {
  .v4 .chapters-header { min-height: 58svh; }
  .v4 .film-chapter { min-height: auto; padding-block: 100px; }
  .v4 .chapter-artist .shape-arch,
  .v4 .chapter-details .shape-blob,
  .v4 .chapter-afterlife .shape-circle { width: min(86vw,560px); }
  .v4 .chapter-details .shape-blob { margin-left: 0; }
  .v4 .chapter-afterlife .shape-circle { height: min(86vw,560px); }
  .v4 .work::after,
  .v4 .services::after,
  .v4 .process::after,
  .v4 .contact::after { opacity: .32; }
}

@media (max-width: 520px) {
  .v4 .chapters-header h2 { font-size: clamp(51px,15vw,74px); }
  .v4 .shape-split { height: 49svh; gap: 24px; }
  .v4 .shape-split::after { top: -8%; bottom: -8%; }
  .v4 .chapter-artist .shape-arch { height: 48svh; }
  .v4 .chapter-details .shape-blob { height: 39svh; }
}

@media (prefers-reduced-motion: reduce) {
  .v4 .motion-reveal.is-visible,
  .v4 .work::after,
  .v4 .services::after,
  .v4 .process::after,
  .v4 .contact::after { translate: none !important; }
  .v4 .split-half video { animation: none; }
}