/* Restrained Persona 4-inspired accents: motion and framing only. */
:root {
  --p4-yellow: #ffe600;
  --p4-black: #111216;
}

/* Page transition: a slightly slower diagonal yellow/black wipe. */
@keyframes p4-page-content-enter {
  0%, 18% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes p4-wipe-yellow {
  0% { transform: translateX(-125%) skewX(-18deg); }
  48% { transform: translateX(-7%) skewX(-18deg); }
  100% { transform: translateX(125%) skewX(-18deg); }
}

@keyframes p4-wipe-black {
  0% { transform: translateX(-145%) skewX(-18deg); }
  52% { transform: translateX(-20%) skewX(-18deg); }
  100% { transform: translateX(135%) skewX(-18deg); }
}

.motion-page-enter {
  position: relative;
  animation: p4-page-content-enter 520ms cubic-bezier(.2,.8,.2,1) both;
}

.motion-page-enter::before,
.motion-page-enter::after {
  content: '';
  position: fixed;
  inset: -15vh -22vw;
  z-index: 9998;
  pointer-events: none;
  transform-origin: center;
}

.motion-page-enter::before {
  background: var(--p4-yellow);
  animation: p4-wipe-yellow 700ms cubic-bezier(.35,.02,.18,1) both;
}

.motion-page-enter::after {
  z-index: 9999;
  inset-block: 28vh;
  background: var(--p4-black);
  animation: p4-wipe-black 590ms 70ms cubic-bezier(.35,.02,.18,1) both;
}

/* Discovery active state: simple black plate with one yellow corner accent. */
@media (min-width: 1180px) {
  .discovery-sidebar .discovery-tab {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    isolation: isolate;
  }

  .discovery-sidebar .discovery-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: transparent;
    transform: translateX(-105%);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease;
  }

  .discovery-sidebar .discovery-tab.active {
    background: transparent;
    color: #fff;
  }

  .discovery-sidebar .discovery-tab.active::before {
    background: var(--p4-black);
    transform: translateX(0);
  }

  .discovery-sidebar .discovery-tab.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 17px;
    height: 17px;
    z-index: 0;
    background: var(--p4-yellow);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
}

/* Section headings: clean yellow marker plus a subtle full-width divider. */
.home-section-head,
.discovery-results .section-head,
.page-layout--grid > .section .section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e5e9;
}

.home-section-head h2,
.discovery-results .section-head h2,
.page-layout--grid > .section .section-head h2 {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  letter-spacing: .02em;
}

.home-section-head h2::before,
.discovery-results .section-head h2::before,
.page-layout--grid > .section .section-head h2::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  width: 8px;
  height: 72%;
  background: var(--p4-yellow);
  transform: translateY(-50%) skewX(-14deg);
  border: 0;
}

.home-section-head h2::after,
.discovery-results .section-head h2::after,
.page-layout--grid > .section .section-head h2::after {
  content: none;
}

/* Card hover: keep the YouTube-like card and anchor the yellow accent to the media's bottom-right corner. */
.stream-card .thumb,
.upcoming-card .upcoming-thumb,
.normal-video-card .normal-video-media,
.featured-live-card .featured-live-media {
  position: relative;
}

.stream-card .thumb::after,
.upcoming-card .upcoming-thumb::after,
.normal-video-card .normal-video-media::after,
.featured-live-card .featured-live-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 auto;
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 42px;
  height: 29px;
  background: var(--p4-yellow);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: translate(102%, 102%);
  transform-origin: right bottom;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .stream-card:hover,
  .upcoming-card:hover,
  .normal-video-card:hover,
  .featured-live-card:hover {
    outline-color: rgba(17,18,22,.76);
  }

  .stream-card:hover .thumb::after,
  .upcoming-card:hover .upcoming-thumb::after,
  .normal-video-card:hover .normal-video-media::after,
  .featured-live-card:hover .featured-live-media::after {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-page-enter,
  .motion-page-enter::before,
  .motion-page-enter::after {
    animation: none !important;
  }

  .discovery-sidebar .discovery-tab::before,
  .stream-card .thumb::after,
  .upcoming-card .upcoming-thumb::after,
  .normal-video-card .normal-video-media::after,
  .featured-live-card .featured-live-media::after {
    transition: none !important;
  }
}