/* ================================================================
   ColabContent — Motion Layer
   Layered on top of site.css. Does NOT modify existing styles.
   All class names prefixed cc- to avoid collisions.
   ================================================================ */

:root{
  --cc-ease: cubic-bezier(.2,.7,.1,1);
  --cc-ease-back: cubic-bezier(.34,1.3,.64,1);
}

/* === Letterbox cinematic bars (subtle, fixed top + bottom) === */
.cc-letterbox{
  position:fixed;left:0;right:0;height:14px;
  background:var(--ink);z-index:120;pointer-events:none;
  transition:transform .8s var(--cc-ease);
}
.cc-letterbox.top{top:0;transform:translateY(-100%)}
.cc-letterbox.bot{bottom:0;transform:translateY(100%)}
body.cc-motion-ready .cc-letterbox.top{transform:translateY(0)}
body.cc-motion-ready .cc-letterbox.bot{transform:translateY(0)}

/* === Hero video background === */
.cc-hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:0;
  transition:opacity 1.6s var(--cc-ease);
  pointer-events:none;
  filter:saturate(.92) contrast(1.04);
  will-change:transform,opacity;
}
.cc-hero-video.cc-loaded{opacity:.7}
.cc-hero-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  pointer-events:none;
  filter:saturate(.92) contrast(1.04);
}
.cc-hero-video.cc-loaded ~ .cc-hero-poster{opacity:0;transition:opacity 1s var(--cc-ease)}

/* === Hero word-mask reveal === */
.cc-word-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  /* Extra room for Fraunces descenders/italic overshoot */
  padding-bottom:.06em;line-height:1;
}
.cc-word-inner{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1.1s cubic-bezier(.2,.7,.1,1);
  will-change:transform;
}
.cc-word-wrap.cc-in .cc-word-inner{transform:translateY(0)}

/* === Brass highlight underline (drawn under "Built") === */
.cc-highlight{position:relative;display:inline-block}
.cc-highlight .cc-bar{
  position:absolute;left:0;right:0;bottom:.04em;
  height:.08em;background:var(--brass);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--cc-ease) .8s;
  border-radius:1px;
}
.cc-highlight.cc-in .cc-bar{transform:scaleX(1)}

/* === Hero subhead + CTA staggered fadeup === */
.cc-hero-fadeup{
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--cc-ease),transform 1s var(--cc-ease);
  will-change:opacity,transform;
}
.cc-hero-fadeup.cc-in{opacity:1;transform:translateY(0)}

/* === Magnetic CTAs (transform handled by JS) === */
.cc-magnetic{
  will-change:transform;
  transition:transform .35s var(--cc-ease-back);
}

/* === Counter-up (display only, JS writes the number) === */
.cc-counter{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}

/* === Trust strip number reveal === */
.cc-trust-num{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  line-height:1;padding-bottom:.05em;
}
.cc-trust-num > span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.2,.7,.1,1);
}
.cc-trust-num.cc-in > span{transform:translateY(0)}

/* === Marquee enhancements (edge fades, hover pause) === */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%);
}
.marquee:hover .marquee-track{animation-play-state:paused}

/* === Two Questions — italic numeral entrance === */
.cc-num-drop{
  display:inline-block;
  transform:translateY(-30px);opacity:0;
  transition:transform .9s var(--cc-ease-back),opacity .6s var(--cc-ease);
  will-change:transform,opacity;
}
.cc-num-drop.cc-in{transform:translateY(0);opacity:1}

article.framed{transition:border-color .5s var(--cc-ease),background-color .5s var(--cc-ease)}
article.framed:hover{border-color:var(--brass) !important}

/* === Industries feat lift === */
.feat{transition:transform .4s var(--cc-ease),background-color .4s var(--cc-ease) !important;will-change:transform}
.feat:hover{transform:translateY(-6px)}

/* === Case study tile lift + brass border activate === */
.cc-case-tile{
  position:relative;
  transition:transform .45s var(--cc-ease) !important;
  will-change:transform;
}
.cc-case-tile::before{
  content:"";position:absolute;inset:0;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .5s var(--cc-ease);
  z-index:3;
}
.cc-case-tile:hover{transform:translateY(-6px)}
.cc-case-tile:hover::before{border-color:var(--brass)}

/* The big italic number inside each case tile - dramatic entrance */
.cc-case-num{
  display:inline-block;
  overflow:hidden;
  line-height:1;padding-bottom:.05em;
  vertical-align:bottom;
}
.cc-case-num > span{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1.1s cubic-bezier(.2,.7,.1,1);
}
.cc-case-num.cc-in > span{transform:translateY(0)}

/* === Process strip — sequential reveal + timeline connector === */
ol.cc-process-list{position:relative}
ol.cc-process-list > li{
  position:relative;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--cc-ease),transform .9s var(--cc-ease);
}
ol.cc-process-list.cc-in > li{opacity:1;transform:translateY(0)}
ol.cc-process-list.cc-in > li:nth-child(1){transition-delay:.05s}
ol.cc-process-list.cc-in > li:nth-child(2){transition-delay:.2s}
ol.cc-process-list.cc-in > li:nth-child(3){transition-delay:.35s}
ol.cc-process-list.cc-in > li:nth-child(4){transition-delay:.5s}

/* The Roman numerals inside process — slow draw */
ol.cc-process-list > li .cc-process-numeral{
  display:inline-block;
  transform:scale(.6);opacity:0;
  transition:transform 1.2s var(--cc-ease-back),opacity .8s var(--cc-ease);
  transition-delay:inherit;
  transform-origin:left center;
}
ol.cc-process-list.cc-in > li .cc-process-numeral{transform:scale(1);opacity:1}

/* === Custom cursor REMOVED (native cursor stays for clickability) === */

/* === Hero offer card tilt baseline === */
aside.framed{
  transform-style:preserve-3d;
  transition:transform .55s var(--cc-ease);
  will-change:transform;
}

/* === Section scroll reveal enhancement (additive to data-reveal) === */
/* The existing site.js already handles [data-reveal] → adds .in class.
   These rules just extend the visual treatment. */

[data-reveal] h1,[data-reveal] h2,[data-reveal] h3,
[data-reveal-group] h2,[data-reveal-group] h3{
  letter-spacing:-.035em;
}

/* === Touch / no-hover overrides === */
@media (hover:none),(pointer:coarse){
  .cc-magnetic{transform:none !important}
  aside.framed{transform:none !important}
}

/* === Reduced motion === */
@media (prefers-reduced-motion:reduce){
  .cc-hero-video{display:none}
  .cc-word-inner,.cc-trust-num > span,.cc-case-num > span{
    transform:translateY(0) !important;
  }
  .cc-hero-fadeup{opacity:1 !important;transform:none !important}
  .cc-highlight .cc-bar{transform:scaleX(1) !important;transition:none !important}
  .cc-letterbox{display:none}
  ol.cc-process-list > li{opacity:1 !important;transform:none !important}
  ol.cc-process-list > li .cc-process-numeral{opacity:1 !important;transform:none !important}
  .cc-num-drop{opacity:1 !important;transform:none !important}
}

/* === Mobile breakpoints === */
@media (max-width:760px){
  .cc-letterbox{height:8px}
  .cc-hero-video.cc-loaded{opacity:.55}
  /* Faster word reveal on mobile so users don't wait */
  .cc-word-inner{transition-duration:.85s}
}