/* WEB 2 · ajustes de identidad, movimiento y campañas · 2026-10-19 */
.footer-top > .eyebrow,
.directors .team-role-line,
.dop-intro,
.project-info .byline,
.card-byline,
.mobile-menu .menu-intro,
.mobile-menu .menu-directors a,
.mobile-menu .menu-email {
  font-family:DM,Arial,sans-serif;
  font-style:normal;
  font-weight:700;
  letter-spacing:.15em;
  line-height:1.45;
  text-transform:uppercase;
}
.footer-top > .eyebrow {font-size:13px;color:var(--peach)}
.directors .team-role-line {font-size:12px;color:#d0bed6;margin-top:12px}
.dop-intro {font-size:12px;margin:15px 0}
.project-info .byline,.card-byline {font-size:11px}
.mobile-menu .menu-intro {font-size:11px}
.mobile-menu .menu-directors a,.mobile-menu .menu-email {font-size:15px;letter-spacing:.09em}

/* A poster is shown first. Moving covers never replace an image before loading. */
.film-frame .film-poster,.film-frame .motion-layer {display:block;width:100%;height:100%;object-fit:cover}
.film-frame .motion-layer {position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s ease}
.film-frame .motion-layer.motion-ready {opacity:1}
.film-frame .film-play {z-index:2}
.film-poster,.brand-image img,.stills img,.service-gallery img,.more-film-image img {opacity:0;transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.film-poster.asset-ready,.brand-image img.asset-ready,.stills img.asset-ready,.service-gallery img.asset-ready,.more-film-image img.asset-ready {opacity:1}
.reveal {opacity:0;transform:translate3d(0,22px,0);transition:opacity .75s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.revealed {opacity:1;transform:translate3d(0,0,0)}

/* The tube artwork itself is transparent. Soft masks avoid rectangular light patches. */
.neon-selected .neon-rest {opacity:.25}
.neon-selected .neon-piece {background-image:url('/assets/bilby-neon-films-shits.png');animation:neon-tube-flicker 4.4s ease-in-out infinite}
.neon-selected .neon-left-ear {clip-path:none;mask-image:radial-gradient(ellipse 29% 46% at 29% 24%,#000 58%,transparent 84%);-webkit-mask-image:radial-gradient(ellipse 29% 46% at 29% 24%,#000 58%,transparent 84%);animation-duration:3.7s;animation-delay:-1.6s}
.neon-selected .neon-right-ear {clip-path:none;mask-image:radial-gradient(ellipse 29% 46% at 72% 24%,#000 58%,transparent 84%);-webkit-mask-image:radial-gradient(ellipse 29% 46% at 72% 24%,#000 58%,transparent 84%);animation-duration:4.8s;animation-delay:-3.1s}
.neon-selected .neon-eyes {clip-path:none;mask-image:radial-gradient(ellipse 25% 14% at 50% 51%,#000 55%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 25% 14% at 50% 51%,#000 55%,transparent 90%);animation-duration:4.1s;animation-delay:-2.2s}
.neon-selected .neon-name {clip-path:none;mask-image:radial-gradient(ellipse 44% 19% at 50% 71%,#000 65%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 44% 19% at 50% 71%,#000 65%,transparent 92%);animation-duration:5.2s;animation-delay:-3.8s}
.neon-selected .neon-production {clip-path:none;mask-image:radial-gradient(ellipse 35% 10% at 50% 91%,#000 55%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 35% 10% at 50% 91%,#000 55%,transparent 92%);animation-duration:3.3s;animation-delay:-.8s}
@keyframes neon-tube-flicker {
  0%,13%,16%,53%,56%,100% {opacity:1}
  14% {opacity:.49}
  15% {opacity:.75}
  54% {opacity:.63}
  55% {opacity:.86}
}

/* Additional videos are a tactile horizontal film strip. */
.more-films {overflow:hidden;padding:68px var(--pad) 98px;background:linear-gradient(180deg,#221a27,#4e3850 72%,#62506a)}
.more-films>.more-heading {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}
.more-heading .eyebrow {margin:0 0 10px;color:#e9bfce}
.more-heading h2 {font:clamp(42px,7vw,100px)/.96 Anton,Impact,sans-serif;letter-spacing:.01em;margin:0}
.more-heading h2 em {font-style:normal;color:#f2b5aa}
.more-actions {display:flex;align-items:center;gap:10px;font:700 10px DM,Arial,sans-serif;letter-spacing:.12em;color:#eee0dd;white-space:nowrap}
.more-actions span {margin-right:9px}
.more-actions button {width:44px;height:44px;border:1px solid #fae9e6a8;border-radius:50%;background:transparent;color:#fff;font:22px DM,Arial,sans-serif;cursor:pointer}
.more-actions button:hover:not(:disabled),.more-actions button:focus-visible {background:#f0b5b7;color:#211928}
.more-actions button:disabled {opacity:.28;cursor:default}
.more-films>.more-film-track {display:flex;grid-template-columns:none;align-items:flex-start;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#f0b5b7 transparent;overscroll-behavior-x:contain;padding:16px 9% 32px 4px}
.more-films .more-film-card {flex:0 0 min(48vw,610px);min-width:330px;width:auto;display:block;scroll-snap-align:start;appearance:none;border:0;background:transparent!important;color:#fff;text-align:left;padding:0!important;cursor:pointer;transform:translateY(0) rotate(-1deg);transition:transform .45s cubic-bezier(.16,1,.3,1),filter .45s ease}
.more-film-card:nth-child(even) {transform:translateY(22px) rotate(1.4deg)}
.more-film-card:hover,.more-film-card:focus-visible {transform:translateY(-6px) rotate(0) scale(1.025);filter:drop-shadow(0 15px 17px #0007)}
.more-film-image {position:relative;display:block;overflow:hidden;aspect-ratio:1.35;clip-path:polygon(2% 0,100% 4%,96% 100%,0 95%);background:#33243d}
.more-film-card:nth-child(even) .more-film-image {aspect-ratio:1.16;clip-path:polygon(0 5%,95% 0,100% 97%,3% 100%)}
.more-film-image img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.more-film-card:nth-child(3n+2) .more-film-image img {object-position:65% 50%}
.more-film-card:nth-child(3n+3) .more-film-image img {object-position:35% 50%}
.more-film-image:after {content:'';position:absolute;inset:0;background:linear-gradient(15deg,#19122177,transparent 45%)}
.more-film-index {position:absolute;top:20px;left:24px;z-index:1;font:700 11px DM,Arial,sans-serif;letter-spacing:.16em}
.more-film-play {position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:68px;height:68px;border:1px solid #fff;border-radius:50%;font-size:21px;background:#21192855;backdrop-filter:blur(6px)}
.more-film-label {display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:18px 6px 0;font:27px/1.1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.more-film-label b {font:700 11px DM,Arial,sans-serif;letter-spacing:.13em;color:#f3bdc6;white-space:nowrap}
@media(max-width:700px){
 .footer-top > .eyebrow{font-size:12px}
 .directors .team-role-line{font-size:11px}
 .more-films{padding:52px var(--pad) 75px}
 .more-films>.more-heading{align-items:start;flex-direction:column;gap:19px}
 .more-heading h2{font-size:clamp(43px,11vw,70px)}
 .more-actions{width:100%;justify-content:flex-end;font-size:8px}
 .more-actions span{margin-right:auto}
 .more-films>.more-film-track{margin-right:calc(-1 * var(--pad));padding-right:26vw;gap:13px}
 .more-films .more-film-card{flex-basis:76vw;min-width:260px}
 .more-film-label{font-size:20px}
 .more-film-label b{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .reveal,.film-poster,.brand-image img,.stills img,.service-gallery img,.more-film-image img,.film-frame .motion-layer{opacity:1;transform:none;transition:none}
 .neon-selected .neon-piece{animation:none}
 .more-film-card,.more-film-card:nth-child(even){transition:none}
}

.more-films.single-piece .more-actions button{display:none}
.more-films.single-piece .more-film-track{padding-right:4px;overflow-x:hidden}
.more-films.single-piece .more-film-card{flex-basis:min(48vw,610px)}
@media(max-width:700px){.more-films.single-piece .more-film-card{flex-basis:100%;min-width:0}}
/* Each extra piece keeps the proportions of its own Vimeo frame. */
.more-films .more-film-label{color:#fff}
.more-films .more-film-card[data-orientation="portrait"]{flex-basis:min(32vw,420px)}
.more-films .more-film-card[data-orientation="portrait"] .more-film-image{aspect-ratio:.77;max-height:570px}
.more-films .more-film-card[data-orientation="panorama"]{flex-basis:min(58vw,750px)}
.more-films .more-film-card[data-orientation="panorama"] .more-film-image{aspect-ratio:1.9}
@media(max-width:700px){
 .more-films .more-film-card[data-orientation="portrait"]{flex-basis:67vw}
 .more-films .more-film-card[data-orientation="panorama"]{flex-basis:84vw}
 .more-films.single-piece .more-film-card{flex-basis:100%!important}
}