/* Cinematic showreel: depth entry, living frames, soft scene bridges and film credits. */
#depth-view .depth-showreel-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.055),rgba(0,0,0,.18) 42%,rgba(0,0,0,.66) 100%);
}
#depth-view .depth-showreel-card,
#depth-view .depth-showreel-roll{z-index:1}
#depth-view.showreel-transitioning .depth-showreel-overlay::after{
  animation:stillShowreelBridge .92s cubic-bezier(.22,.72,.18,1) both;
}
@keyframes stillShowreelBridge{
  0%{opacity:0;transform:scale(1.035)}
  34%{opacity:.34}
  58%{opacity:.13}
  100%{opacity:0;transform:scale(1)}
}

#depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-title{
  transform-origin:50% 50%;
  animation:stillTitleFromDepth 5.6s cubic-bezier(.16,.86,.18,1) both;
}
#depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-kicker{
  animation:stillIntroCopy 2.6s .55s cubic-bezier(.2,.75,.2,1) both;
}
#depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-meta{
  animation:stillIntroCopy 3.1s 1.15s cubic-bezier(.2,.75,.2,1) both;
}
#depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-foot{
  animation:stillIntroCopy 3.3s 1.7s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes stillTitleFromDepth{
  0%{opacity:0;transform:perspective(1000px) translateZ(-620px) scale(.24);filter:blur(18px);letter-spacing:.20em}
  24%{opacity:.48;filter:blur(8px)}
  62%{opacity:1;transform:perspective(1000px) translateZ(-62px) scale(.93);filter:blur(.8px);letter-spacing:.015em}
  100%{opacity:1;transform:perspective(1000px) translateZ(0) scale(1);filter:blur(0);letter-spacing:-.035em}
}
@keyframes stillIntroCopy{
  0%{opacity:0;transform:translateY(12px);filter:blur(5px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

#depth-view.depth-showreel-final .depth-showreel-card{
  transition:top 2.4s cubic-bezier(.2,.72,.18,1),transform 2.4s cubic-bezier(.2,.72,.18,1),opacity 1.8s ease!important;
}
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-card{
  top:26%!important;
  transform:translate3d(-50%,-50%,0)!important;
}
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-title{
  font-size:clamp(44px,5.6vw,92px)!important;
  letter-spacing:.12em!important;
  animation:stillEndArrival 2s cubic-bezier(.18,.82,.18,1) both;
}
@keyframes stillEndArrival{
  0%{opacity:.12;transform:scale(.62);filter:blur(9px)}
  58%{opacity:1;transform:scale(1.035);filter:blur(0)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-kicker{
  opacity:.55!important;
}
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-meta,
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-foot,
#depth-view.depth-showreel-final.showreel-final-end .depth-showreel-progress{
  opacity:0!important;
}

#depth-view .depth-showreel-roll{
  position:absolute;
  left:50%;
  top:40%;
  bottom:5.8%;
  width:min(720px,76vw);
  transform:translateX(-50%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);
  transition:opacity 1.4s ease;
}
#depth-view.depth-showreel-final.showreel-final-roll .depth-showreel-roll{opacity:1}
#depth-view .depth-showreel-roll-track{
  display:grid;
  gap:17px;
  padding:38vh 0 18vh;
  transform:translateY(0);
}
#depth-view.depth-showreel-final.showreel-final-roll .depth-showreel-roll-track{
  animation:stillCreditsRoll var(--still-credit-roll-duration,14.2s) linear both;
}
@keyframes stillCreditsRoll{
  from{transform:translateY(0)}
  to{transform:translateY(-62%)}
}
#depth-view .depth-showreel-credit-line{
  display:grid;
  grid-template-columns:minmax(155px,.70fr) minmax(260px,1.30fr);
  gap:26px;
  align-items:baseline;
  text-align:left;
}
#depth-view .depth-showreel-credit-line span{
  color:#b0a57f;
  font-size:clamp(8px,.50vw,10px);
  font-weight:500;
  letter-spacing:1.15px;
  text-align:right;
  text-transform:none;
}
#depth-view .depth-showreel-credit-line span::after{
  content:"  —";
  color:#79715b;
}
#depth-view .depth-showreel-credit-line strong{
  color:#eee9de;
  font-family:var(--serif);
  font-size:clamp(17px,1.18vw,23px);
  font-weight:400;
  letter-spacing:.018em;
  line-height:1.18;
}
#depth-view .depth-showreel-credit-author strong{
  color:#eee9dc;
}
#depth-view .depth-showreel-credit-source strong{
  color:#c8c1b1;
  font-size:clamp(13px,.92vw,17px);
  letter-spacing:.025em;
}
#depth-view .depth-showreel-credit-thanks{
  padding:38px 0 18px;
  color:#aa9d70;
  font-family:var(--serif);
  font-size:clamp(11px,.9vw,14px);
  font-weight:400;
  letter-spacing:.055em;
  text-align:center;
  text-transform:none;
}
#depth-view .depth-showreel-copyright{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:42;
  width:min(1280px,92vw);
  box-sizing:border-box;
  transform:translateX(-50%);
  padding:10px 20px 9px;
  border-top:1px solid rgba(202,187,137,.17);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.46));
  color:#9a927c;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.6s ease;
}
#depth-view .depth-showreel-copyright strong{
  display:block;
  color:#c2b89a;
  font-size:clamp(7.5px,.46vw,9.5px);
  font-weight:500;
  letter-spacing:1px;
  line-height:1.45;
}
#depth-view .depth-showreel-copyright span{
  display:block;
  max-width:1120px;
  margin:5px auto 0;
  color:#8e8879;
  font-size:clamp(6.2px,.39vw,8px);
  font-weight:400;
  letter-spacing:.30px;
  line-height:1.52;
}
#depth-view.depth-showreel-final.showreel-final-roll .depth-showreel-copyright{opacity:.96}
#depth-view.depth-showreel-final.showreel-copyright-fade .depth-showreel-copyright{opacity:0!important}
#depth-view.depth-showreel-final.showreel-final-roll .depth-mini-dock{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 1.4s ease!important;
}
#depth-view.depth-showreel-final.showreel-final-fade .depth-showreel-roll,
#depth-view.depth-showreel-final.showreel-final-fade .depth-showreel-card{
  opacity:0!important;
  transition:opacity 2.6s ease!important;
}

@media(max-width:700px){
  #depth-view .depth-showreel-roll{width:88vw}
  #depth-view .depth-showreel-credit-line{grid-template-columns:1fr;gap:5px;text-align:center}
  #depth-view .depth-showreel-credit-line span{text-align:center;font-size:8px}
  #depth-view .depth-showreel-credit-line strong{font-size:17px}
  #depth-view .depth-showreel-roll-track{gap:18px}
  #depth-view .depth-showreel-copyright{bottom:8px;padding:8px 10px 7px}
  #depth-view .depth-showreel-copyright strong{font-size:7px}
  #depth-view .depth-showreel-copyright span{font-size:6px;line-height:1.42}
}
@media(prefers-reduced-motion:reduce){
  #depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-title,
  #depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-kicker,
  #depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-meta,
  #depth-view .depth-showreel-overlay.is-deep-intro .depth-showreel-foot,
  #depth-view.depth-showreel-final.showreel-final-roll .depth-showreel-roll-track{animation-duration:.01ms!important;animation-iteration-count:1!important}
}