/* Openflix — hero search + Swiper results (index.html) */

.hero-search {
  margin: 18px auto 8px;
  max-width: 640px;
}

.hero-search input {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.hero-search input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.6);
}

/* --- Results section --- */

.search-results {
  padding: 32px 4%;
  background: #141414;
  border-bottom: 8px solid #222;
}

.search-results-inner h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}

.search-status {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #999;
  min-height: 1.2em;
}

/* --- Swiper overrides: Netflix-style slider --- */

#search-swiper {
  overflow: visible;
}

#search-swiper .swiper-slide {
  height: auto;
}

.result-card {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  background: #1f1f1f;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.result-card:hover,
.result-card:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 2;
  position: relative;
}

.result-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2b2b2b, #111);
}

.result-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-thumb--empty {
  width: 100%;
  height: 100%;
}

.result-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s;
}

.result-card:hover .result-play {
  opacity: 1;
}

.result-meta {
  padding: 10px 10px 12px;
}

.result-title {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.result-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  color: #ccc;
  white-space: nowrap;
}

.result-badge--hd {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

/* Navigation arrows styled like Netflix row arrows */

#search-swiper .swiper-button-prev,
#search-swiper .swiper-button-next {
  color: #fff;
  background: rgba(20, 20, 20, 0.7);
  width: 40px;
  height: 100%;
  top: 0;
  margin-top: 0;
  transition: background 0.2s;
}

#search-swiper .swiper-button-prev {
  left: 0;
}

#search-swiper .swiper-button-next {
  right: 0;
}

#search-swiper .swiper-button-prev:hover,
#search-swiper .swiper-button-next:hover {
  background: rgba(20, 20, 20, 0.9);
}

#search-swiper .swiper-button-prev::after,
#search-swiper .swiper-button-next::after {
  font-size: 1.4rem;
  font-weight: 700;
}

#search-swiper .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Motion design (skill: motion-design) — uses tokens from landing.css
   ============================================================ */

/* Card hover: delayed expansion so scrubbing across the row doesn't flicker;
   transform-only on the frame path. */
.result-card {
  transition:
    transform var(--motion-base) var(--ease-standard) 0s,
    box-shadow var(--motion-fast) var(--ease-standard) 0s;
}

.result-card:hover,
.result-card:focus-visible {
  transition-delay: 150ms; /* expand only on intentional hover */
}

/* Keep scaled edge cards inside the viewport */
#search-swiper .swiper-slide:first-child .result-card {
  transform-origin: center left;
}

#search-swiper .swiper-slide:last-child .result-card {
  transform-origin: center right;
}

/* Play overlay fade uses tokens */
.result-play {
  transition: opacity var(--motion-fast) var(--ease-standard);
}

/* Edge arrows fade in on row hover instead of always visible */
#search-swiper .swiper-button-prev,
#search-swiper .swiper-button-next {
  opacity: 0;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.search-results-inner:hover .swiper-button-prev,
.search-results-inner:hover .swiper-button-next,
#search-swiper .swiper-button-prev:focus-visible,
#search-swiper .swiper-button-next:focus-visible {
  opacity: 1;
}

/* Results section entrance */
.search-results:not([hidden]) {
  animation: motion-fade-up var(--motion-slow) var(--ease-emphasized);
}

/* ---------- Skeleton loading (shimmer, never spinners) ---------- */
.skeleton-card {
  border-radius: 4px;
  overflow: hidden;
  background: #1f1f1f;
}

.skeleton-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #242424;
  overflow: hidden;
}

.skeleton-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: motion-shimmer 1.2s var(--ease-standard) infinite;
}

.skeleton-lines {
  padding: 10px;
}

.skeleton-line {
  height: 10px;
  border-radius: 3px;
  background: #2b2b2b;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: motion-shimmer 1.2s var(--ease-standard) infinite;
}

.skeleton-line:last-child {
  width: 60%;
  margin-bottom: 2px;
}