/* Motion and finish for inner pages. Every effect is optional polish: reduced-motion visitors and older
   browsers get the same pages without it. Entrances already handled by the reveal system are left alone. */
:root body.inner ::selection { background: rgba(179, 217, 235, .32); color: #fff; }

/* Covers get a fine inner edge so they sit on the dark page like prints. */
:root body.inner main :is(.card .thumb, .blog-card-media, .series-hero, .about-film) { position: relative; }
:root body.inner main :is(.card .thumb, .blog-card-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Page titles come into focus; the kicker rule draws itself. */
  @keyframes ss-focus-in { from { filter: blur(7px); letter-spacing: .012em; } to { filter: blur(0); letter-spacing: inherit; } }
  @keyframes ss-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  :root body.inner:not(.watch-page) main h1 { animation: ss-focus-in .72s cubic-bezier(.16, 1, .3, 1) both; }
  :root body.inner main .kicker::before { transform-origin: left center; animation: ss-rule-draw .7s .12s cubic-bezier(.16, 1, .3, 1) both; }

  /* Questions open smoothly instead of snapping (browsers that can animate to auto height). */
  @supports (interpolate-size: allow-keywords) {
    :root body.inner main :is(.faq, .landing-faq) details { interpolate-size: allow-keywords; }
    :root body.inner main :is(.faq, .landing-faq) details::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size .32s cubic-bezier(.16, 1, .3, 1), opacity .24s ease-out, content-visibility .32s allow-discrete;
    }
    :root body.inner main :is(.faq, .landing-faq) details[open]::details-content { block-size: auto; opacity: 1; }
  }

  /* Scroll-linked touches, only where the browser can drive them off the main thread. */
  @supports (animation-timeline: view()) {
    @keyframes ss-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
    :root body.inner main :is(.series-hero, .about-film, .blog-article figure) { overflow: hidden; }
    :root body.inner main :is(.series-hero, .about-film, .blog-article figure) > :is(img, video, picture) {
      animation: ss-settle linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 45%;
    }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* A soft band of light crosses a cover when it is pointed at. */
  :root body.inner main :is(.card:not(.is-soon) .thumb, .blog-card-media)::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(214, 236, 246, .13) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0s;
    pointer-events: none;
  }
  :root body.inner main :is(.card:not(.is-soon):hover .thumb, .blog-card > a:hover .blog-card-media)::before {
    transform: translateX(120%);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  }
  :root body.inner main .card:not(.is-soon) h3 { transition: color .2s ease-out; }
  :root body.inner main .card:not(.is-soon):hover h3 { color: #d9eef7; }

  /* Plans: the pointed card lifts its edge. */
  :root body.inner main .price-card { transition: border-color .24s ease-out, box-shadow .24s ease-out; }
  :root body.inner main .price-card:hover { border-color: rgba(179, 217, 235, .42); box-shadow: 0 0 0 1px rgba(179, 217, 235, .12), 0 18px 48px -28px rgba(120, 190, 220, .55); }

  /* Blog: the read cue leans forward, the image eases in. */
  :root body.inner main .blog-card-read > :last-child { display: inline-block; transition: transform .2s ease-out; }
  :root body.inner main .blog-card > a:hover .blog-card-read > :last-child { transform: translateX(4px); }
  :root body.inner main .blog-card > a:hover .blog-card-media img { transform: scale(1.025); }

  /* Arrows in buttons and links answer the pointer. */
  :root body.inner main :is(.btn, .text-link) svg { transition: transform .2s ease-out; }
  :root body.inner main :is(.btn, .text-link):hover svg { transform: translateX(3px); }

  /* Header links underline from the left. */
  :root body.inner .masthead .site-nav a:not([aria-current]) { background: linear-gradient(currentColor, currentColor) left calc(100% - 2px) / 0 1px no-repeat; transition: background-size .22s ease-out; }
  :root body.inner .masthead .site-nav a:not([aria-current]):hover { background-size: 100% 1px; }
}