/* Trailers page — extends base theme */

/* HERO */
.tr-hero{
  position:relative; overflow:hidden;
  padding:64px 0 28px;
  border-bottom:1px solid var(--outline);
}
.tr-hero .hero-inner{ position:relative; z-index:1 }
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.orb{ position:absolute; width:380px; height:380px; border-radius:999px; filter:blur(32px); opacity:.55;
      background: radial-gradient(closest-side, var(--brand), transparent 70%) }
.orb.o1{ left:-100px; top:-60px; animation:float 12s ease-in-out infinite }
.orb.o2{ right:-120px; top:20%; animation:float 14s ease-in-out infinite reverse }
.orb.o3{ left:40%; bottom:-120px; animation:float 18s ease-in-out infinite }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* PLAYER */
.tr-player{
  margin-top:16px;
  border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  background:var(--card-gradient); box-shadow:var(--surface-elev);
}
.tr-video, .tr-iframe{ width:100%; height:min(62vh,680px); display:block; border:0 }
.tr-now{ padding:12px 14px 16px }

.tr-empty{ padding:20px; color:var(--muted) }

/* FILTERS */
.filters{ display:grid; gap:14px; margin-top:22px; color:var(--text); }
.search-wrap{ position:relative; max-width:560px }
.search-wrap input{
  width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text);
  padding:12px 40px 12px 14px; border-radius:12px; outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease)
}
.search-wrap input::placeholder{ color:#ffffff; opacity:.6 }
.search-wrap input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--brand-glass) }
.search-wrap .icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.85; color:var(--text); }

.filters-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px }
@media (max-width: 1000px){ .filters-row{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .filters-row{ grid-template-columns:1fr } }

.filters-group{ display:grid; gap:8px; }
.filter-label{
  font-weight:800; letter-spacing:.02em; color:var(--text);
  opacity:.95; user-select:none;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:10px }
.tag-chip{
  color:var(--text);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)
}
.tag-chip:hover{ transform:translateY(-1px) }
.tag-chip.is-active{
  background:linear-gradient(180deg,var(--brand),var(--accent));
  border-color:transparent;
  color:#111;
}

/* GRID */
.tr-grid-wrap{ margin:28px auto 70px }
.tr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width: 1100px){ .tr-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 700px){ .tr-grid{ grid-template-columns:1fr } }

.tr-card{
  position:relative; border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  background:var(--card-gradient); box-shadow: var(--surface-elev);
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease), border-color .35s var(--ease)
}
.tr-card.revealed{ transform:none; opacity:1 }
.tr-card:hover{ border-color:var(--brand-soft-x) }
.tr-card.active{ border-color:var(--brand-soft-max); box-shadow:0 22px 60px rgba(0,0,0,.55) }

.tr-thumb{ position:relative; height:200px; overflow:hidden }
.tr-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.05); transition:transform .45s var(--ease), filter .45s var(--ease) }
.tr-card:hover .tr-thumb img{ transform:scale(1.09); filter:saturate(1.08) }
.play-badge{
  position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.55); border:1px solid var(--outline); font-weight:800
}
.tr-body{ padding:14px 14px 16px }
.tr-body .title{ margin:.3em 0 .2em }

/* Load more */
.load-more-wrap{ display:grid; place-items:center; margin-top:16px }
.load-more-wrap .btn{ min-width:200px }

/* Ribbon */
.ribbon{ margin:36px 0; border-block:1px solid var(--outline);
  background:linear-gradient(90deg, rgba(255,255,255,.04) 0, transparent 35%, transparent 65%, rgba(255,255,255,.04) 100%) }
.strip-wrap{ overflow:hidden; padding-block:10px }
.marquee{ display:flex; gap:40px; white-space:nowrap; animation:marquee 24s linear infinite }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee span{ opacity:.7; font-weight:800; letter-spacing:.2em }

/* Reveal helpers */
.reveal{ transform:translateY(12px); opacity:0; transition:transform .8s var(--ease), opacity .8s var(--ease) }
.revealed{ transform:none !important; opacity:1 !important }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .tr-card, .tr-thumb img{ transition:none !important }
}

@media (max-width: 600px){
  .tr-hero{padding:48px 0 22px;}
  .filters{gap:12px;}
  .search-wrap{max-width:none;}
  .filters-group{gap:6px;}
  .chip-row{gap:8px;}
  .tr-player{border-radius:14px;}
  .tr-video,.tr-iframe{height:min(48vh,420px);}
  .tr-now{padding:12px 12px 14px;}
}

@media (max-width: 480px){
  .filters{gap:10px;}
  .tag-chip{padding:7px 10px;}
  .tr-thumb{height:auto;}
  .tr-thumb img{height:100%;}
}