/* Storyboard/Animatic uses the work-section header, submenu and reel canvas
   shared by 2D/3D animation. Only the animatics gallery uses a compact grid. */

/* The storyboard mode selector occupies exactly the existing top submenu rail. */
html body #views #work[data-cat] .od-work-common-bar > .od-storyboard-modes{
  display:none!important;
}
html body #views #work[data-cat="storyboard"]:not([data-cat="art2d"]) .od-work-common-bar > .od-work-bar-tab{
  display:none!important;
}
html body #views #work[data-cat="storyboard"] .od-work-common-bar > .od-storyboard-modes{
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#09090c!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-mode{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:34px!important;
  padding:8px clamp(11px,1.4vw,23px)!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#101014!important;
  color:#f4f4f5!important;
  -webkit-text-fill-color:#f4f4f5!important;
  font:600 11px/1.3 var(--od-site-copy,'Manrope',sans-serif)!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:none!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-mode:is(.is-active,[aria-pressed="true"]){
  background:#d1ff00!important;
  color:#09090c!important;
  -webkit-text-fill-color:#09090c!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-mode:hover:not(.is-active){
  background:#23232b!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-mode:focus-visible{
  outline:2px solid #d1ff00!important;
  outline-offset:-2px!important;
}

/* The reel uses the same centered footprint and identical player treatment. */
html body #views #work[data-cat="storyboard"][data-storyboard-mode="reel"] .od-animation-reels{
  display:block!important;
  position:relative!important;
  z-index:5!important;
  width:94%!important;
  max-width:1340px!important;
  min-width:0!important;
  margin:clamp(12px,1.5vw,22px) auto 90px!important;
  padding:0!important;
  left:var(--od-reel-center-offset,0px)!important;
  right:auto!important;
  translate:none!important;
  transform:none!important;
}
html body #views #work[data-cat="storyboard"] .od-animation-reel[data-reel-category="storyboard"]{
  display:block!important;
}
html body #views #work[data-cat="storyboard"] .od-animation-reel-layout{
  display:block!important;
  width:100%!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
}
html body #views #work[data-cat="storyboard"] .od-animation-reel-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
  width:100%!important;
  padding:12px 15px!important;
  margin:0 0 16px!important;
  border:0!important;
  background:#111317!important;
  color:#f7f7f7!important;
  font:600 11px/1.3 'IBM Plex Mono',monospace!important;
  letter-spacing:.08em!important;
}
html body #views #work[data-cat="storyboard"] .od-reel-screen{
  display:block!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  width:100%!important;
  min-width:0!important;
  grid-area:auto!important;
}
html body #views #work[data-cat="storyboard"] .od-reel-screen::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:0;
  pointer-events:none;
  background:#111317;
  box-shadow:0 18px 54px rgba(0,0,0,.38),0 5px 15px rgba(0,0,0,.23);
}
html body #views #work[data-cat="storyboard"] .od-reel-screen::after{content:none!important}
html body #views #work[data-cat="storyboard"] .od-reel-screen > .od-animation-reel-frame{
  position:relative!important;
  z-index:1!important;
  border:0!important;
  box-shadow:none!important;
}

/* The old placeholder project card is not part of this curated section. */
html body #views #work[data-cat="storyboard"] > .work-section > #projectGrid{
  display:none!important;
}

/* Sky Oceans: three video cards per desktop row, two on small desktop,
   one on mobile. Same restrained matte and typography as the reels. */
html body #views #work .od-storyboard-showcase{display:none!important}
html body #views #work[data-cat="storyboard"][data-storyboard-mode="animatics"] .od-storyboard-showcase{
  display:block!important;
  position:relative!important;
  z-index:5!important;
  width:94%!important;
  max-width:1340px!important;
  min-width:0!important;
  margin:clamp(12px,1.5vw,22px) auto 90px!important;
  padding:0!important;
  color:#fff!important;
  left:var(--od-reel-center-offset,0px)!important;
  right:auto!important;
  translate:none!important;
  transform:none!important;
}
html body #views #work .od-storyboard-group{min-width:0}
html body #views #work .od-storyboard-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 12px;
}
html body #views #work .od-storyboard-kicker{
  display:block;
  margin:0 0 9px;
  font:600 10px/1.5 'IBM Plex Mono',monospace;
  letter-spacing:.14em;
  color:#d1ff00;
}
html body #views #work .od-storyboard-head h3{
  margin:0;
  font:800 clamp(23px,2.7vw,37px)/1.15 Manrope,sans-serif;
  letter-spacing:-.04em;
  color:#fff;
}
html body #views #work .od-storyboard-note{
  max-width:74ch;
  margin:0 0 clamp(26px,3vw,38px);
  color:rgba(255,255,255,.8);
  font:400 clamp(13px,1.2vw,15px)/1.65 Manrope,sans-serif;
}
html body #views #work .od-storyboard-video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:clamp(20px,2vw,30px);
}
html body #views #work .od-storyboard-video-card{
  display:block;
  min-width:0;
  margin:0;
}
html body #views #work .od-storyboard-video{
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:16/9;
  background:#08080b;
}
html body #views #work .od-storyboard-video::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-6px;
  pointer-events:none;
  background:#111317;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
html body #views #work .od-storyboard-video iframe{
  display:block;
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
html body #views #work .od-storyboard-video-card figcaption{
  margin:12px 0 0;
  color:rgba(255,255,255,.73);
  font:600 10px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:.1em;
}
html body #views #work .od-copy-es{display:none}
html[lang="es"] body #views #work .od-copy-es{display:inline}
html[lang="es"] body #views #work .od-copy-en{display:none}

/* Share the work entrance rhythm and reduced-motion handling. */
html:not(.motion-paused) body #views.od-section-arriving #work.active[data-cat="storyboard"] .od-storyboard-showcase{
  animation:odWorkForegroundReveal .43s cubic-bezier(.18,.78,.2,1) .64s both!important;
}
@media(max-width:1100px){
  html body #views #work .od-storyboard-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  html body #views #work[data-cat="storyboard"] .od-storyboard-mode{
    min-height:43px!important;
    padding:8px 12px!important;
    font-size:10px!important;
  }
  html body #views #work[data-cat="storyboard"][data-storyboard-mode="reel"] .od-animation-reels,
  html body #views #work[data-cat="storyboard"][data-storyboard-mode="animatics"] .od-storyboard-showcase{
    width:100%!important;
    margin-bottom:60px!important;
  }
  html body #views #work[data-cat="storyboard"] .od-reel-screen::before{
    inset:-8px;
    box-shadow:0 12px 30px rgba(0,0,0,.32);
  }
  html body #views #work[data-cat="storyboard"] .od-animation-reel-top{
    padding:11px 12px!important;
    margin-bottom:12px!important;
    font-size:10px!important;
  }
  html body #views #work .od-storyboard-video-grid{
    grid-template-columns:1fr;
    gap:25px;
  }
}
@media(prefers-reduced-motion:reduce){
  html body #views.od-section-arriving #work .od-storyboard-showcase{
    animation:none!important;
    opacity:1!important;
  }
}
/* v335 — Sky Oceans introduction: solid legible panel over light backgrounds.
   Keep the heading, description and art-direction credit in one dark block;
   the credit starts on its own line instead of wrapping as sentence text. */
html body #views #work[data-cat="storyboard"][data-storyboard-mode="animatics"]
  .od-storyboard-group > .od-storyboard-intro{
  box-sizing:border-box!important;
  display:block!important;
  width:min(100%,950px)!important;
  max-width:100%!important;
  margin:0 0 clamp(24px,3vw,38px)!important;
  padding:clamp(18px,2.2vw,28px)!important;
  background:#09090c!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-intro .od-storyboard-head{
  margin:0 0 clamp(14px,1.5vw,19px)!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-intro .od-storyboard-note{
  margin:0!important;
  max-width:74ch!important;
  color:#ebedf0!important;
}
html body #views #work[data-cat="storyboard"] .od-storyboard-intro .od-storyboard-art-direction{
  display:block!important;
  margin:clamp(8px,1vw,12px) 0 0!important;
  font:400 clamp(13px,1.2vw,15px)/1.65 Manrope,sans-serif!important;
  color:#ebedf0!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="storyboard"] .od-storyboard-intro .od-storyboard-art-direction{
    white-space:normal!important;
  }
}