/* V5 — screenshot-led timeline, quieter framing and more direct copy. */

.v5 {
  --violet: #d7b5bf;
  --hot-pink: #d7b5bf;
  --retro-pink: #e1c9d0;
  --pink: var(--retro-pink);
  --oil-blue: #c8dfe6;
  --oil-mint: #dce7df;
  --oil-pink: #f2d8ea;
  --oil-cream: #eee8d8;
}

.v5 .bc-welcome-content {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: clamp(52px, 7vw, 124px);
}

.v5 .bc-welcome h1,
.v5 .hero h1,
.v5 .chapters-header h2,
.v5 .chapter-copy h3,
.v5 .section-heading h2,
.v5 .about-copy h2 {
  font-family: var(--body);
  text-wrap: balance;
}

.v5 .bc-welcome-intro,
.v5 .hero-intro { max-width: 600px; }

.v5 .bc-welcome h1 {
  max-width: 900px;
  font-size: clamp(46px, 4.4vw, 78px);
  line-height: .96;
  letter-spacing: -.055em;
}

.v5 .hero h1 {
  max-width: 900px;
  font-size: clamp(46px, 4.7vw, 84px);
  line-height: .96;
  letter-spacing: -.055em;
}

.v5 .eyebrow::before,
.v5 .bc-welcome-kicker::before,
.v5 .bc-welcome-status i {
  box-shadow: 0 0 0 5px rgba(215, 181, 191, .16);
}

.v5 .bc-welcome-playhead { box-shadow: 0 0 24px rgba(215, 181, 191, .42); }

.v5 .bc-welcome-kicker,
.v5 .hero .eyebrow {
  width: max-content;
  max-width: 100%;
  font-size: clamp(12px, .9vw, 15px);
  animation: v5-capture-loop 5.2s cubic-bezier(.65, 0, .35, 1) infinite;
  will-change: opacity, clip-path, transform;
}

.v5 .bc-welcome-bin {
  box-shadow: 16px 16px 0 rgba(201, 221, 227, .9);
  transform: perspective(1400px) rotateX(var(--bc-tilt-y, 0deg)) rotateY(var(--bc-tilt-x, 0deg));
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

.v5 .bc-welcome-clips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v5 .bc-clip:nth-child(1),
.v5 .bc-clip:nth-child(2),
.v5 .bc-clip:nth-child(4),
.v5 .bc-clip:nth-child(5) { grid-column: span 3; }
.v5 .bc-clip:nth-child(3) { grid-column: 1 / -1; }
.v5 .bc-clip b {
  font-size: clamp(11px, .9vw, 15px);
  line-height: 1.16;
  overflow-wrap: anywhere;
}
.v5 .bc-welcome-status strong {
  font-weight: 400;
  white-space: nowrap;
}

.v5 .bc-clip {
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.v5 .bc-clip:hover { transform: translateY(-5px); filter: saturate(1.06); }

.v5 .project-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.v5 .project-ticket .project-media video { object-position: center 36%; }
.v5 .project-ticket .project-media.video-fallback {
  background: #32303b url("blue-cheese-site-assets/roof-rhymez-stairs-loop.jpg") center / cover no-repeat;
}
.v5 .project-ticket .project-media.video-fallback video { opacity: 0; }

.v5 .film-chapters {
  background:
    radial-gradient(ellipse 64% 22% at 15% 16%, rgba(178, 211, 223, .8), transparent 72%),
    radial-gradient(ellipse 58% 20% at 86% 35%, rgba(230, 214, 225, .76), transparent 70%),
    radial-gradient(ellipse 72% 18% at 12% 62%, rgba(218, 230, 223, .9), transparent 74%),
    radial-gradient(ellipse 70% 24% at 88% 86%, rgba(225, 201, 208, .5), transparent 76%),
    linear-gradient(168deg, #c9dee5 0%, #dce7df 42%, #ece6dc 67%, #e8d8dd 100%);
}

.v5 .liquid-field {
  opacity: .72;
  filter: saturate(.88);
}

.v5 .timeline-spine { z-index: 5; width: 1px; background: rgba(17, 17, 22, .42); }
.v5 .timeline-spine i { background: var(--hot-pink); box-shadow: 0 0 16px rgba(215, 181, 191, .38); }
.v5 .film-chapter::after { z-index: 7; }

.v5 .chapters-header {
  min-height: 86svh;
  padding-bottom: 10svh;
}

.v5 .chapters-header h2 {
  max-width: 1080px;
  font-size: clamp(58px, 8.1vw, 136px);
  line-height: .9;
}

.v5 .film-chapter {
  min-height: 118svh;
  padding-top: calc(var(--header) + 86px);
  padding-bottom: 96px;
}

.v5 .chapter-copy {
  max-width: 520px;
  margin-left: clamp(12px, 2vw, 38px);
}

.v5 .chapter-copy h3 {
  max-width: 520px;
  font-size: clamp(52px, 5.4vw, 88px);
  line-height: .9;
}

.v5 .chapter-copy > p:nth-of-type(2) {
  max-width: 470px;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.62;
}

.v5 .skill-card {
  max-width: 440px;
  gap: 6px 15px;
  margin-top: 26px;
  padding: 13px 15px;
  border: 0;
  border-left: 3px solid var(--hot-pink);
  background: rgba(248, 246, 239, .43);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(115%);
}

.v5 .skill-card span { color: #695f67; }
.v5 .skill-card strong { font-size: 14px; }
.v5 .skill-card em { font-size: 10px; }

/* 01 — four synchronized crops from one continuous Tickle frame. */
.v5 .shape-pair {
  width: min(47vw, 740px);
  height: min(62vh, 610px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .55vw, 9px);
  opacity: 0;
  box-shadow: none;
  transform: translateY(52px);
}

.v5 .pair-half {
  position: relative;
  width: auto;
  height: 88%;
  flex: 1 1 0;
  overflow: hidden;
  opacity: 0;
  background: #111116;
  border-radius: 70px 70px 16px 16px / 48px 48px 16px 16px;
  box-shadow: none;
  transform: translateY(76px) scaleY(.42);
  transform-origin: center bottom;
  transition: opacity .75s ease, transform 1.25s cubic-bezier(.16, 1, .3, 1);
}

.v5 .stripe-1 { height: 76%; transition-delay: .04s; }
.v5 .stripe-2 { height: 94%; transition-delay: .13s; }
.v5 .stripe-3 { height: 84%; transition-delay: .22s; }
.v5 .stripe-4 { height: 90%; transition-delay: .31s; }

.v5 .shape-pair video {
  top: -42px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 84px);
  animation: v5-breathe 12s ease-in-out infinite alternate;
}

.v5 .stripe-1 video { object-position: 8% center; }
.v5 .stripe-2 video { object-position: 36% center; }
.v5 .stripe-3 video { object-position: 64% center; }
.v5 .stripe-4 video { object-position: 92% center; }
.v5 .chapter-artist.is-entered .shape-pair { opacity: 1; transform: translateY(0); }
.v5 .chapter-artist.is-entered .pair-half { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); }

/* 02 — matching arches with enough space to read as two frames, not eggs. */
.v5 .chapter-unique {
  min-height: 126svh;
  display: block;
}

.v5 .chapter-unique .chapter-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.v5 .chapter-unique .chapter-copy > span {
  position: absolute;
  top: 16%;
  left: calc(50% + 42px);
}

.v5 .chapter-unique .chapter-copy > p:first-of-type {
  position: absolute;
  top: 20%;
  left: calc(50% + 42px);
}

.v5 .chapter-unique .chapter-copy h3 {
  position: absolute;
  top: 43%;
  left: calc(50% + 42px);
  width: min(12vw, 180px);
  font-size: clamp(32px, 3vw, 48px);
  line-height: .96;
  letter-spacing: -.045em;
}

.v5 .chapter-unique .chapter-copy > p:nth-of-type(2) {
  position: absolute;
  left: clamp(80px, 19vw, 300px);
  right: calc(50% + 86px);
  bottom: 8%;
  width: auto;
  max-width: 460px;
}

.v5 .chapter-unique .skill-card {
  position: absolute;
  right: clamp(78px, 12vw, 190px);
  bottom: 7%;
  width: min(27vw, 410px);
}

.v5 .shape-split {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(78vw, 1220px);
  height: min(67vh, 660px);
  gap: clamp(190px, 22vw, 360px);
  transform: translate3d(-50%, -50%, 0);
}

.v5 .shape-split::after { top: -13%; bottom: -13%; }
.v5 .split-half {
  width: min(28vw, 350px);
  max-width: 350px;
  flex: 0 1 350px;
  height: 94%;
  background: #111116;
  border-radius: 50% 50% 3px 3px / 16% 16% 3px 3px;
  box-shadow: none;
}
.v5 .split-left { transform: translate3d(-88px, 48px, 0); }
.v5 .split-right { transform: translate3d(88px, -42px, 0); }
.v5 .chapter-unique.is-entered .split-left { transform: translate3d(-20px, 20px, 0); }
.v5 .chapter-unique.is-entered .split-right { transform: translate3d(20px, -20px, 0); }
.v5 .split-left video { object-position: 50% center; }
.v5 .split-right video { object-position: 54% center; }
.v5 .split-half video {
  top: -42px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 84px);
}

/* 03 — the cleaner V4 frame, with a quieter pink offset. */
.v5 .chapter-details .shape-blob {
  z-index: 3;
  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%;
  background: #111116;
  box-shadow:
    14px 14px 0 rgba(215, 181, 191, .22),
    0 26px 58px rgba(45, 52, 62, .1);
}

.v5 .chapter-details .shape-blob video {
  left: -3px;
  width: calc(100% + 6px);
  object-position: 54% center;
}

/* 04 — simple circle, deliberately quieter than the earlier objects. */
.v5 .chapter-afterlife {
  background:
    radial-gradient(ellipse 48% 58% at 76% 52%, rgba(225, 201, 208, .72), transparent 74%),
    radial-gradient(ellipse 48% 55% at 22% 28%, rgba(238, 232, 216, .82), transparent 76%),
    linear-gradient(125deg, #e9e4d8 0%, #e6d8dc 72%, var(--retro-pink) 100%);
}

.v5 .chapter-afterlife .shape-circle {
  width: min(35vw, 530px);
  height: min(35vw, 530px);
  background: #111116;
  box-shadow:
    0 0 0 18px rgba(225, 201, 208, .32),
    0 28px 68px rgba(92, 64, 76, .14);
}

.v5 .chapter-afterlife .shape-circle video {
  left: -3px;
  width: calc(100% + 6px);
}

/* The brand trinity draws itself once when it enters the frame. */
.v5 .about-mark { background: var(--retro-pink); }

.v5 .brand-trinity {
  position: relative;
  width: min(82%, 470px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.v5 .about-mark .brand-trinity svg {
  width: 58%;
  overflow: visible;
  fill: none;
  stroke: var(--paper);
  stroke-width: .72;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v5 .trinity-cheese .cheese-outline {
  stroke-dasharray: 112;
  stroke-dashoffset: 112;
}

.v5 .trinity-cheese circle {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.v5 .trinity-point {
  position: absolute;
  opacity: 0;
  color: var(--paper);
  font: 500 clamp(9px, .78vw, 12px)/1.25 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(9px);
}

.v5 .trinity-top { top: 18%; left: 54%; }
.v5 .trinity-left { left: 14%; bottom: 22%; }
.v5 .trinity-right { right: 14%; bottom: 20%; }

.v5 .about-mark.is-visible .cheese-outline { animation: v5-cheese-draw 1.65s cubic-bezier(.65, 0, .35, 1) forwards; }
.v5 .about-mark.is-visible .trinity-cheese circle:first-of-type { animation: v5-cheese-draw .55s 1.05s ease-out forwards; }
.v5 .about-mark.is-visible .trinity-cheese circle:last-of-type { animation: v5-cheese-draw .5s 1.38s ease-out forwards; }
.v5 .about-mark.is-visible .trinity-point { animation: v5-trinity-label .68s cubic-bezier(.16, 1, .3, 1) forwards; }
.v5 .about-mark.is-visible .trinity-top { animation-delay: .9s; }
.v5 .about-mark.is-visible .trinity-left { animation-delay: 1.24s; }
.v5 .about-mark.is-visible .trinity-right { animation-delay: 1.58s; }

.v5 .bc-welcome-brand svg path,
.v5 .brand-mark > path:first-child {
  stroke-dasharray: 112;
  stroke-dashoffset: 112;
  animation: v5-cheese-draw 1.45s .18s cubic-bezier(.65, 0, .35, 1) forwards;
}

.v5 .bc-welcome-brand svg circle,
.v5 .brand-mark circle {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: v5-cheese-draw .46s 1.05s ease-out forwards;
}

.v5 .shape-frame,
.v5 .pair-half,
.v5 .split-half {
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Four compact service cards keep the personal offer scannable. */
.v5 .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v5 .service-item { min-height: 410px; }
.v5 .service-item:nth-child(4) {
  border-top: 7px solid rgba(215, 181, 191, .72);
  background: rgba(239, 226, 230, .54);
}
.v5 .service-item.motion-reveal:nth-child(4) { transition-delay: .12s; }

@keyframes v5-breathe {
  from { transform: translate3d(-.35%, .2%, 0) scale(1.04); }
  to { transform: translate3d(.35%, -.2%, 0) scale(1.075); }
}

@keyframes v5-capture-loop {
  0%, 100% { opacity: .18; clip-path: inset(0 100% 0 0); transform: translateX(-5px); }
  14%, 76% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
  88% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateX(3px); }
}

@keyframes v5-cheese-draw { to { stroke-dashoffset: 0; } }

@keyframes v5-trinity-label {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) and (min-width: 851px) {
  .v5 .film-chapter { gap: 42px; padding-inline: 74px; }
  .v5 .shape-pair { width: 48vw; }
  .v5 .shape-split { width: 82vw; gap: 18vw; }
  .v5 .chapter-details .shape-blob { margin-left: -5vw; }
}

@media (max-width: 850px) {
  .v5 .bc-welcome-content { grid-template-columns: 1fr; }
  .v5 .service-list { grid-template-columns: 1fr; }
  .v5 .service-item { min-height: auto; }
  .v5 .chapters-header { min-height: 68svh; }
  .v5 .film-chapter { min-height: auto; padding-block: 94px 110px; }
  .v5 .chapter-copy { margin-left: 0; }
  .v5 .shape-pair { width: min(86vw, 620px); }
  .v5 .chapter-unique { display: grid; }
  .v5 .chapter-unique .chapter-copy {
    position: relative;
    inset: auto;
    max-width: 520px;
    pointer-events: auto;
  }
  .v5 .chapter-unique .chapter-copy > span,
  .v5 .chapter-unique .chapter-copy > p:first-of-type,
  .v5 .chapter-unique .chapter-copy h3,
  .v5 .chapter-unique .chapter-copy > p:nth-of-type(2),
  .v5 .chapter-unique .skill-card {
    position: static;
    width: auto;
    max-width: 100%;
  }
  .v5 .chapter-unique .chapter-copy h3 { font-size: clamp(52px, 12vw, 78px); }
  .v5 .chapter-unique .shape-split {
    position: relative;
    left: auto;
    top: auto;
    width: min(86vw, 620px);
    transform: none;
    gap: 34px;
  }
  .v5 .chapter-unique .split-half { width: calc(50% - 17px); max-width: none; flex: 0 0 calc(50% - 17px); }
  .v5 .chapter-unique.is-entered .split-left { transform: translate3d(-8px, 12px, 0); }
  .v5 .chapter-unique.is-entered .split-right { transform: translate3d(8px, -12px, 0); }
  .v5 .chapter-details .shape-blob { width: min(82vw, 510px); margin-left: 0; }
  .v5 .chapter-afterlife .shape-circle { width: min(78vw, 500px); height: min(78vw, 500px); }
}

@media (max-width: 520px) {
  .v5 .bc-welcome-clips { grid-template-columns: 1fr 1fr; }
  .v5 .bc-clip:nth-child(1),
  .v5 .bc-clip:nth-child(2),
  .v5 .bc-clip:nth-child(4),
  .v5 .bc-clip:nth-child(5) { grid-column: span 1; }
  .v5 .bc-clip:nth-child(3) { grid-column: 1 / -1; }
  .v5 .bc-welcome-status span b { display: inline; }
  .v5 .bc-welcome-status > strong { display: none; }
  .v5 .chapters-header h2 { font-size: clamp(50px, 14vw, 70px); }
  .v5 .chapter-copy h3 { font-size: clamp(48px, 13.5vw, 66px); }
  .v5 .shape-pair { width: 88vw; height: 50svh; gap: 5px; }
  .v5 .chapter-unique .shape-split { width: 84vw; height: 58svh; gap: 28px; }
  .v5 .split-half { width: calc(50% - 14px); }
  .v5 .chapter-details .shape-blob { height: 39svh; border-width: 1px; }
  .v5 .skill-card { grid-template-columns: 1fr; }
  .v5 .brand-trinity { width: min(88%, 390px); }
  .v5 .trinity-point { font-size: 8px; letter-spacing: .055em; }
}

@media (prefers-reduced-motion: reduce) {
  .v5 .shape-pair,
  .v5 .pair-half { opacity: 1; transform: none !important; }
  .v5 .shape-pair video { animation: none; }
  .v5 .bc-welcome-kicker,
  .v5 .hero .eyebrow { opacity: 1; clip-path: none; transform: none; animation: none; }
  .v5 .trinity-cheese .cheese-outline,
  .v5 .trinity-cheese circle,
  .v5 .bc-welcome-brand svg path,
  .v5 .bc-welcome-brand svg circle,
  .v5 .brand-mark > path:first-child,
  .v5 .brand-mark circle { stroke-dashoffset: 0; animation: none; }
  .v5 .trinity-point { opacity: 1; transform: none; animation: none; }
}