/* ONLYDROP v233 — Animation sections. One visual system with the Art 2D
   gallery, plus mirrored title/reel relationships for 2D and 3D.
   No DOM movement for headings and no scale transforms on the 3D wordmarks. */

html body #views #work .od-animation-ambient,
html body #views #work .od-reel-heading-kicker,
html body #views #work .od-reel-wordmark-3d { display:none!important; }

/* Free the two reel pages from the old 12x6 single-screen project grid. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]).view-panel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-snap-type:none!important;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#6b65ab transparent;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) > .work-section{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-template-areas:none!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  overflow:visible!important;
  padding:clamp(95px,10vh,125px) clamp(22px,3.5vw,75px) clamp(90px,10vh,140px) var(--padL)!important;
  background:#09090c!important;
  background-image:none!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-ambient{
  position:absolute!important;
  display:block!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  /* Ready for future section-specific background files via --od-reel-bg. */
  background-image:linear-gradient(90deg,rgba(9,9,12,.65),rgba(9,9,12,.18) 55%,rgba(9,9,12,.65)),
    var(--od-reel-bg,linear-gradient(transparent,transparent))!important;
  background-size:cover!important;
  background-position:center center!important;
  opacity:1;
}

/* The same fine top separator, typography and spacing discipline as Art 2D. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline{
  position:sticky!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
  top:clamp(10px,1.7vw,22px)!important;
  left:auto!important;
  right:auto!important;
  inset-inline:auto!important;
  z-index:95!important;
  width:100%!important;
  min-height:42px!important;
  height:auto!important;
  margin:0 0 clamp(48px,6.4vh,74px)!important;
  padding:0 0 14px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.2)!important;
  background:rgba(9,9,12,.95)!important;
  backdrop-filter:blur(8px);
  pointer-events:auto!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline > .back-index:hover{
  color:#d1ff00!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline > #workCounter{
  color:#d1ff00!important;
  white-space:nowrap!important;
}

/* Large heading: 2D is left-anchored; 3D is a visual counterweight on the right. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .section-heading{
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  border:0!important;
  border-left:0!important;
  padding:0!important;
  margin:0 0 clamp(26px,3.5vw,52px)!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .section-heading > div{
  display:flex!important;
  position:relative!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  gap:clamp(12px,1.7vw,23px)!important;
  grid-area:auto!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
  min-width:0!important;
  background:none!important;
  transform:none!important;
  rotate:none!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-heading-kicker{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:24px;
  width:min(100%,300px);
  font:600 10px/1.2 "IBM Plex Mono",monospace;
  letter-spacing:.15em;
  color:#d1ff00;
  -webkit-text-fill-color:#d1ff00;
}
html body #views #work[data-cat="animation2d"] #workHeading{
  display:block!important;
  position:relative!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-family:'SaucerBB','Bricolage Grotesque',sans-serif!important;
  font-weight:400!important;
  font-size:clamp(55px,6.4vw,112px)!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
  transform:none!important;
  rotate:none!important;
  scale:1!important;
  white-space:normal!important;
}
html body #views #work[data-cat="animation3d"] .section-heading > div{
  align-items:flex-end!important;
}
html body #views #work[data-cat="animation3d"] #workHeading{
  display:none!important;
}
html body #views #work[data-cat="animation3d"] .od-reel-wordmark-3d{
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  width:min(100%,910px)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:none!important;
  border:0!important;
  text-align:right!important;
  transform:none!important;
  rotate:none!important;
  scale:1!important;
}
html body #views #work .od-reel-wordmark-3d > img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:right center;
  transform:none;
}
html[lang="es"] body #views #work .od-reel-wordmark-3d .od-reel-wordmark-3d-en,
html:not([lang="es"]) body #views #work .od-reel-wordmark-3d .od-reel-wordmark-3d-es{
  display:none!important;
}

/* One prominent 16:9 media canvas with restrained editorial ornament. */
html body #views #work .od-animation-reels{display:none!important}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels{
  display:block!important;
  position:relative!important;
  grid-area:auto!important;
  align-self:auto!important;
  justify-self:auto!important;
  z-index:5!important;
  width:100%!important;
  max-width:1340px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
html body #views #work[data-cat="animation2d"] .od-animation-reels{margin-left:auto!important;margin-right:0!important}
html body #views #work[data-cat="animation3d"] .od-animation-reels{margin-left:0!important;margin-right:auto!important}
html body #views #work .od-animation-reel{display:none!important}
html body #views #work[data-cat="animation2d"] .od-animation-reel[data-reel-category="animation2d"],
html body #views #work[data-cat="animation3d"] .od-animation-reel[data-reel-category="animation3d"]{display:block!important}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reel-top{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:10px 0!important;
  border-top:1px solid rgba(255,255,255,.25)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  background:none!important;
  color:#fff!important;
  font:600 11px/1.3 "IBM Plex Mono",monospace!important;
  letter-spacing:.13em!important;
}
html body #views #work .od-animation-reel-top a{
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
  text-decoration:none!important;
}
html body #views #work .od-animation-reel-top a:hover{text-decoration:underline!important}
html body #views #work .od-animation-reel-layout{
  display:grid;
  width:100%;
  grid-template-columns:clamp(72px,8.3vw,132px) minmax(0,1fr);
  gap:clamp(15px,2.1vw,36px);
  align-items:stretch;
}
html body #views #work[data-cat="animation3d"] .od-animation-reel-layout{
  grid-template-columns:minmax(0,1fr) clamp(72px,8.3vw,132px);
}
html body #views #work .od-reel-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:clamp(10px,1.6vw,25px) 0;
  border-top:2px solid #d1ff00;
  min-width:0;
  color:#fff;
}
html body #views #work[data-cat="animation3d"] .od-reel-aside{grid-column:2;grid-row:1;align-items:flex-end;text-align:right}
html body #views #work[data-cat="animation3d"] .od-reel-screen{grid-column:1;grid-row:1}
html body #views #work .od-reel-aside-number{
  font:400 clamp(42px,5.2vw,86px)/1 'Tektur','Oxanium',sans-serif;
  letter-spacing:-.08em;
  color:#d1ff00;
  -webkit-text-fill-color:#d1ff00;
}
html body #views #work .od-reel-aside-rule{
  display:block;
  flex:1 1 auto;
  min-height:22px;
  width:1px;
  margin:clamp(18px,2.2vw,36px) 0;
  background:linear-gradient(to bottom,rgba(209,255,0,.4),transparent);
}
html body #views #work[data-cat="animation3d"] .od-reel-aside-rule{
  background:linear-gradient(to top,rgba(209,255,0,.4),transparent);
}
html body #views #work .od-reel-aside-tag{
  font:500 10px/1.2 "IBM Plex Mono",monospace;
  letter-spacing:.04em;
  white-space:nowrap;
  color:#a4a5ae;
}
html body #views #work .od-reel-screen{position:relative;min-width:0;width:100%}
html body #views #work .od-animation-reel-frame{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:0!important;
  background:#08080b!important;
}
html body #views #work .od-animation-reel-frame iframe{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  transform:none!important;
}
html body #views #work .od-reel-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0 0;
  font:500 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.1em;
  color:#adb0b9;
}
html body #views #work .od-reel-foot-cross{
  color:#d1ff00;
  margin-left:clamp(12px,2vw,30px);
  font-size:18px;
  line-height:0;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .project-grid{display:none!important}
@media(min-width:1100px){
  html body #views #work[data-cat="animation2d"] .od-animation-reels{width:94%!important}
  html body #views #work[data-cat="animation3d"] .od-animation-reels{width:94%!important}
}
@media(min-width:761px) and (max-width:1099px){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) > .work-section{
    padding-right:clamp(22px,3vw,50px)!important;
  }
  html body #views #work[data-cat="animation2d"] #workHeading{
    font-size:clamp(48px,6.5vw,84px)!important;
  }
}
@media(max-width:760px){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) > .work-section{
    padding:clamp(190px,24vh,242px) 4vw 85px 4vw!important;
  }
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline{
    top:calc(12px + env(safe-area-inset-top,0px))!important;
    margin-bottom:clamp(30px,5vh,48px)!important;
  }
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .section-heading{
    margin-bottom:clamp(22px,4vh,42px)!important;
  }
  html body #views #work[data-cat="animation2d"] #workHeading{
    font-size:clamp(36px,9vw,65px)!important;
    line-height:1.05!important;
  }
  html body #views #work .od-reel-heading-kicker{font-size:9px!important}
  html body #views #work .od-animation-reel-layout,
  html body #views #work[data-cat="animation3d"] .od-animation-reel-layout{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  html body #views #work .od-reel-aside{display:none!important}
  html body #views #work[data-cat="animation3d"] .od-reel-screen{grid-column:1!important;grid-row:auto!important}
  html body #views #work .od-animation-reel-top{font-size:10px!important}
  html body #views #work .od-reel-foot{font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline{backdrop-filter:none}
}

/* v236 — The reel is the only visual content in each media canvas.
   Remove the unused 01/02 side rails and technical footer gutters. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reel-layout{
  display:block!important;
  width:100%!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

/* v258 — Minimal, high-contrast video presentation.
   Opaque charcoal matte separates white video frames from white artwork.
   No decorative strokes, neon accents or ornamental double frames. */
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen{
  isolation:isolate!important;
  overflow:visible!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:0;
  pointer-events:none;
  background:#111317;
  border:0;
  box-shadow:0 18px 54px rgba(0,0,0,.38),0 5px 15px rgba(0,0,0,.23);
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen::after{
  content:none!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen > .od-animation-reel-frame{
  position:relative!important;
  z-index:1!important;
  border:0!important;
  box-shadow:none!important;
}
html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reel-top{
  box-sizing:border-box!important;
  background:#111317!important;
  color:#f7f7f7!important;
  border:0!important;
  width:100%!important;
  padding:12px 15px!important;
  margin:0 0 16px!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
}
@media(max-width:760px){
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-reel-screen::before{
    inset:-8px;
    box-shadow:0 12px 30px rgba(0,0,0,.32);
  }
  html body #views #work:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reel-top{
    padding:11px 12px!important;
    margin-bottom:12px!important;
  }
}