/* A small motion vocabulary: cut, arrange, reveal. Static markup remains complete. */
.graphite-home .gh-title-line{
  overflow:hidden;
  overflow:clip;
  padding-bottom:.13em;
  margin-bottom:-.13em;
}
.graphite-home .gh-title-wordline{display:block;transform-origin:50% 100%}
.graphite-home .gh-gallery{padding-top:10px;margin-top:-10px}

.graphite-home .gh-button{position:relative;isolation:isolate;overflow:hidden}
.graphite-home .gh-button::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 20%,#ffffff63 49%,transparent 78%);
  opacity:0;
  transform:translateX(-140%) skewX(-15deg);
}
.graphite-home .gh-button>.ico{transition:transform 250ms cubic-bezier(.22,1,.36,1)}
.graphite-home .gh-primary-nav>a{position:relative}
.graphite-home .gh-primary-nav>a::after{
  content:'';
  height:1px;
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform 260ms cubic-bezier(.22,1,.36,1);
}
.graphite-home .gh-primary-nav>a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.graphite-home .gh-watch-link{transition:color 180ms ease,text-underline-offset 180ms ease}
.graphite-home .gh-watch-link:focus-visible{text-underline-offset:5px}
.graphite-home .gh-account>summary>span{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.graphite-home .gh-account[open]>summary>span{transform:rotate(180deg)}
.graphite-home .gh-gallery-arrow>svg{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.graphite-home .gh-gallery-arrow:active:not(:disabled){transform:scale(.94)}
.graphite-home .gh-media-controls button:active{transform:scale(.94)}
.graphite-home .gh-film-surface:focus-within,
.graphite-home .gh-detail-surface:focus-within{border-color:#e4ecd08c}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .graphite-home .gh-film-surface,
  .graphite-home .gh-detail-surface{
    transform:perspective(1100px) translateY(var(--gh-lift,0px)) rotateX(var(--gh-tilt-x,0deg)) rotateY(var(--gh-tilt-y,0deg));
    transform-origin:50% 50%;
    backface-visibility:hidden;
  }
  .graphite-home .gh-film-card:hover .gh-film-surface,
  .graphite-home .gh-film-card:hover .gh-detail-surface,
  .graphite-home .gh-film-card[data-home-hover] .gh-film-surface,
  .graphite-home .gh-film-card[data-home-hover] .gh-detail-surface{border-color:#e4ecd08c}
  .graphite-home .gh-button:hover::after{animation:gh-button-light 620ms cubic-bezier(.22,1,.36,1) both}
  .graphite-home .gh-button:hover>.ico{transform:translateX(3px)}
  .graphite-home .gh-primary-nav>a:hover::after{transform:scaleX(1);transform-origin:left center}
  .graphite-home .gh-watch-link:hover{text-underline-offset:5px}
  .graphite-home [data-home-gallery-prev]:hover:not(:disabled)>svg{transform:translateX(-2px)}
  .graphite-home [data-home-gallery-next]:hover:not(:disabled)>svg{transform:translateX(2px)}
}
@keyframes gh-button-light{
  0%{opacity:0;transform:translateX(-140%) skewX(-15deg)}
  20%{opacity:.6}
  100%{opacity:0;transform:translateX(140%) skewX(-15deg)}
}
@media(prefers-reduced-motion:reduce){
  .graphite-home .gh-title-wordline,
  .graphite-home .gh-film-surface,
  .graphite-home .gh-detail-surface,
  .graphite-home .gh-button>.ico,
  .graphite-home .gh-gallery-arrow,
  .graphite-home .gh-gallery-arrow>svg,
  .graphite-home .gh-media-controls button{transform:none!important}
  .graphite-home .gh-button::after{animation:none!important;opacity:0!important}
  .graphite-home .gh-button,
  .graphite-home .gh-primary-nav>a::after,
  .graphite-home .gh-account>summary>span,
  .graphite-home .gh-watch-link{transition:none!important}
}