/* Mobile Safari: keep the page colour through rubber-band scrolling. */
html {
  background:#111019;
  overscroll-behavior-y:none;
}
body {
  min-height:100vh;
  overscroll-behavior-y:none;
}

/* Draw controls as shapes, so iOS cannot substitute coloured emoji glyphs. */
.big-play,
.more-film-play,
.collection-play {
  font-size:0;
}
.big-play::before,
.more-film-play::before,
.collection-play::before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:17px solid currentColor;
  transform:translateX(2px);
}
.collection-play::before {color:#fff;filter:drop-shadow(0 2px 8px #000)}
.social-links a {display:inline-flex;align-items:center;gap:.22em}
.external-arrow {display:inline-block;width:.8em;height:.8em;flex:none;vertical-align:middle}

/* Every illuminated zone is precisely aligned to the same transparent artwork.
   Soft masks modulate the light without creating rectangular boundaries. */
.neon-selected .neon-rest {
  opacity:.62;
  animation:none;
}
.neon-selected .neon-piece {
  display:block;
  background:url('/assets/bilby-neon-films-shits-v2.png') center/contain no-repeat;
  opacity:.7;
  animation:neon-zone 4.1s linear infinite;
}
.neon-selected .neon-left-ear {
  mask-image:radial-gradient(ellipse 31% 48% at 28% 24%,#000 50%,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 31% 48% at 28% 24%,#000 50%,transparent 82%);
  animation-delay:-1.3s;
}
.neon-selected .neon-right-ear {
  mask-image:radial-gradient(ellipse 31% 48% at 72% 24%,#000 50%,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 31% 48% at 72% 24%,#000 50%,transparent 82%);
  animation-duration:4.9s;
  animation-delay:-3.2s;
}
.neon-selected .neon-eyes {
  mask-image:radial-gradient(ellipse 27% 17% at 50% 51%,#000 54%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 27% 17% at 50% 51%,#000 54%,transparent 90%);
  animation-duration:3.7s;
  animation-delay:-2.1s;
}
.neon-selected .neon-name {
  mask-image:radial-gradient(ellipse 45% 20% at 50% 70%,#000 63%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 45% 20% at 50% 70%,#000 63%,transparent 90%);
  animation-duration:5.2s;
  animation-delay:-.8s;
}
.neon-selected .neon-production {
  mask-image:radial-gradient(ellipse 39% 10% at 50% 89%,#000 57%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 39% 10% at 50% 89%,#000 57%,transparent 90%);
  animation-duration:3.3s;
  animation-delay:-2.7s;
}
@keyframes neon-zone {
  0%,43%,45%,47%,100% {opacity:.7}
  43.4%,46.1% {opacity:.04}
  44.2% {opacity:.37}
}

/* The original signature remains white on every background. */
.archive .brand .logo-original-light,
.service-page .brand .logo-original-light {display:block}
.archive .brand .logo-original-dark,
.service-page .brand .logo-original-dark {display:none}
.brand .logo-original-light {filter:none}

@media(max-width:700px) {
  .big-play::before,
  .more-film-play::before,
  .collection-play::before {
    border-top-width:9px;
    border-bottom-width:9px;
    border-left-width:14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .neon-selected .neon-piece,
  .home .brand .logo-original-light {animation:none}
}

/* One exact image. JavaScript changes light intensity in its pixels by zone;
   the raster is never stacked over a second, slightly offset copy. */
.neon-selected .neon-piece {display:none!important}
.neon-selected {width:310px;height:245px}
.neon-selected .neon-rest {opacity:1!important;animation:none!important}
.neon-selected .neon-canvas {
  position:absolute;left:0;top:50%;width:100%;height:auto;
  transform:translateY(-50%);opacity:0;pointer-events:none;
}
.neon-selected.neon-ready .neon-rest {opacity:0!important}
.neon-selected.neon-ready .neon-canvas {opacity:1}

/* Keep the original graffiti mark fully visible; the traced mask revealed it in blocks. */
.home .brand .logo-original-light {display:block!important;animation:none!important;clip-path:none!important}
.home .brand .logo-original-dark {display:none!important}

/* An AI production offer with the same editorial hierarchy as the rest of the site. */
.ai-home {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:5vw;align-items:end;padding:65px var(--pad) 70px;background:#b991b6;color:var(--ink);border-top:1px solid #17152255}
.ai-home h2 {font-size:clamp(66px,9vw,170px);margin-top:15px}
.ai-home h2 em {color:var(--paper)}
.ai-home>div:last-child {padding-bottom:9px}
.ai-home>div:last-child p {font-size:clamp(17px,1.4vw,24px);max-width:380px;line-height:1.35}
.ai-home-link {display:inline-block;margin-top:30px;border-bottom:2px solid currentColor;padding-bottom:8px;font-size:12px;letter-spacing:.13em;font-weight:800}
.ai-home-link:hover {color:#fff}
.ai-page {background:#171522}
.ai-intro,.ai-process,.ai-examples,.ai-last {padding:clamp(55px,7vw,115px) var(--pad)}
.ai-intro {background:linear-gradient(145deg,#5b4d93 0%,#a77fa8 55%,#efb499 100%);color:#171522}
.ai-intro .eyebrow {display:block;position:relative;z-index:1}
.ai-intro h1 {font-size:clamp(72px,12vw,220px);line-height:1;margin:50px 0 55px;max-width:1250px}
.ai-intro h1 em {color:#f8eee3}
.ai-intro-grid {display:grid;grid-template-columns:1.3fr 1fr;gap:8vw;align-items:start}
.ai-statement {font:clamp(33px,4.2vw,77px)/1.08 Anton,Impact,sans-serif;text-transform:uppercase}
.ai-serious {display:block;color:#fff}
.ai-intro-grid>div {font-size:clamp(19px,1.7vw,28px);line-height:1.36}
.ai-intro-grid>div p+p {margin-top:1.2em}
.ai-ask {display:inline-block;margin-top:36px;padding:14px 20px;border:2px solid #171522;font-size:12px;font-weight:800;letter-spacing:.1em}
.ai-ask:hover {background:#171522;color:#f8eee3}
.ai-process {background:#efe6d9;color:#171522;display:grid;grid-template-columns:1fr 2fr;gap:30px}
.ai-process>div {display:flex;gap:15px;flex-wrap:wrap}
.ai-process>div span {border:1px solid #171522;padding:8px 11px;font-size:10px;font-weight:800;letter-spacing:.08em}
.ai-process>p:last-child {grid-column:2;max-width:850px;font-size:clamp(18px,1.5vw,25px);line-height:1.4}
.ai-examples {background:#171522;color:#f8eee3}
.ai-examples .section-heading {margin-bottom:20px}
.ai-disclaimer {color:#b9b3c5;font-size:13px;margin-bottom:40px}
.ai-example-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 35px}
.ai-example:nth-child(3n) {grid-column:span 2;display:grid;grid-template-columns:1.3fr .7fr;gap:35px;align-items:center}
.ai-example-media {display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:#302543;border:0;padding:0;width:100%;cursor:pointer;text-align:left}
.ai-example-media img {width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ai-example-media:hover img {transform:scale(1.035)}
.ai-example-media>span {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border:1px solid white;border-radius:50%;background:#17152299}
.ai-example-media>span::before {content:"";width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:17px solid #fff;transform:translateX(2px)}
.ai-example-caption {padding-top:18px}
.ai-example-caption h3 {font-size:clamp(31px,3.7vw,68px);margin:10px 0}
.ai-example-caption>p:not(.eyebrow) {max-width:560px;font-size:16px;line-height:1.5;color:#d4cbd5}
.ai-example-caption .ai-example-link {display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.1em;font-weight:800;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;padding:0 0 2px;cursor:pointer}
.ai-last {background:#b991b6;color:#171522}
.ai-last h2 {max-width:1000px;margin:25px 0;font-size:clamp(60px,9vw,155px)}
.ai-last h2 em {color:#f8eee3}
.ai-last>a {font:clamp(25px,3vw,48px)/1 Anton,sans-serif;border-bottom:3px solid currentColor}
@media(max-width:700px) {
  .neon-selected {width:min(180px,48vw);height:150px}
  .ai-home,.ai-intro-grid,.ai-process,.ai-example-grid,.ai-example:nth-child(3n) {display:block}
  .ai-home {padding:48px var(--pad) 58px}
  .ai-home h2 {font-size:19vw;line-height:.98}
  .ai-home>div:last-child {margin-top:25px}
  .ai-intro h1 {font-size:19vw;margin:30px 0 35px}
  .ai-statement {font-size:11vw}
  .ai-intro-grid>div {margin-top:30px;font-size:19px}
  .ai-process>div {margin:25px 0}
  .ai-process>p:last-child {font-size:18px}
  .ai-example {margin-bottom:55px}
  .ai-example-media>span {width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce) {
  .ai-example-media img {transition:none}
}