/* ════════════════════════════════════════════════════════════════
   BRAND PASS — Flare patterns, film grain, light separation
   Inspired by Revelstoke Films brand guidelines
   ════════════════════════════════════════════════════════════════ */

/* ── Brand flare pattern in footer ── */
.site-footer .footer-row {
  position: relative;
  z-index: 1;
}
.site-footer .footer-tagline {
  position: relative;
  z-index: 1;
}

/* ── Flare pattern watermark on portal entry ── */
.portal-entry::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -180px;
  width: 600px;
  height: 600px;
  background: url('/assets/images/flare-pattern-orange.png') no-repeat center;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* ── Film grain / noise dither — breaks up gradient banding ── */
.work-bg-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ── Flare icon as section separator ── */
.browse-controls::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 20px;
  background: url('/assets/images/flare-icon.png') no-repeat center;
  background-size: contain;
  opacity: 0.08;
}

/* ── Light separation — dramatic gradient between monitor and browse ── */
#grade-ui::after {
  content: '';
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(198,222,144,0.15) 20%,
    rgba(var(--accent-rgb),0.25) 45%,
    rgba(var(--text-rgb),0.3) 50%,
    rgba(var(--accent-rgb),0.25) 55%,
    rgba(198,222,144,0.15) 80%,
    transparent 95%
  );
}

/* ── Flare pattern edge on category section headers ── */
.category-row-header {
  position: relative;
}
.category-row-header::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 11px;
  background: url('/assets/images/flare-icon.png') no-repeat center;
  background-size: contain;
  opacity: 0.15;
}
body.portal-page .category-row-header::before {
  content: none !important;
  display: none !important;
}

/* ── Watch page — flare accent on the below-wrap divider ── */
.watch-below-wrap .related-header::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/assets/images/flare-icon.png') no-repeat center;
  background-size: contain;
  opacity: 0.12;
  vertical-align: middle;
  margin-right: 8px;
}

/* ── Bold blocking on portal client name (per mood board) ── */
.portal-client-name {
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Portal entry footer text — JetBrains Mono for the tagline ── */
.portal-entry-footer,
.portal-entry .tagline-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── Light/shadow on cards — subtle top highlight ── */
.browse-card .browse-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Flare pattern as footer marquee background — removed, was breaking layout ── */

/* ── Portal dashboard — flare accent on section headers ── */
.portal-section .category-row-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 8px;
  background: url('/assets/images/flare-icon.png') no-repeat center;
  background-size: contain;
  opacity: 0.2;
  vertical-align: middle;
}

/* ── Brand texture on cinema zone — removed, was triple-darkening the player ── */

/* ═══════════ 41. Staggered card hover glow pulse ═══════════ */
.browse-card:hover ~ .browse-card {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.04), var(--shadow-card);
  transition: box-shadow 0.6s ease;
}
.browse-card:hover ~ .browse-card:nth-child(n+4) {
  box-shadow: var(--shadow-card);
}

/* ═══════════ 42. Header logo breathing ═══════════ */
@keyframes logoBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.site-header .logo {
  animation: logoBreathe 8s ease-in-out infinite;
}

/* ═══════════ 43. Monitor corner brackets — static (no rotation) ═══════════ */

/* ═══════════ 44. Browse filter active indicator dot ═══════════ */
@keyframes filterDotIn {
  from { transform: translateX(-50%) scale(0); }
  to { transform: translateX(-50%) scale(1); }
}
.browse-filter.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(1);
  animation: filterDotIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.browse-filter {
  position: relative;
}

/* ═══════════ 45. Card thumbnail shimmer — REMOVED ═══════════ */

/* ═══════════ 46. Status bar text typing reveal ═══════════ */
@keyframes statusTyping {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.sb-animate .sb-text {
  animation: statusTyping 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.4s;
  clip-path: inset(0 100% 0 0);
}
.sb-animate .sb-counts {
  animation-delay: 0.8s;
}

/* ═══════════ 47. Portal entry input cursor blink ═══════════ */
@keyframes cursorBlink {
  0%, 100% { box-shadow: inset -2px 0 0 0 var(--accent); }
  50% { box-shadow: inset -2px 0 0 0 transparent; }
}
.portal-entry-form input:focus {
  animation: cursorBlink 1s step-end infinite;
}

/* ═══════════ 48. Section divider flare star ═══════════ */
.browse-divider-star {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
  pointer-events: none;
}
.browse-divider-star::before {
  content: '';
  display: block;
  width: 22px;
  height: 15px;
  background: url('/assets/images/flare-icon.png') no-repeat center;
  background-size: contain;
  opacity: 0.12;
}

/* ═══════════ 49. Hover card title underline sweep ═══════════ */
.card-info-title {
  position: relative;
  display: inline-block;
}
.card-info-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.browse-card:hover .card-info-title::after {
  width: 100%;
}

/* ═══════════ 50. Footer social icons stagger entrance ═══════════ */
@keyframes socialBounceIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.6); }
  60% { transform: translateY(-3px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.footer-social-entrance a {
  opacity: 0;
  animation: socialBounceIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.footer-social-entrance a:nth-child(1) { animation-delay: 0.1s; }
.footer-social-entrance a:nth-child(2) { animation-delay: 0.2s; }
.footer-social-entrance a:nth-child(3) { animation-delay: 0.3s; }
.footer-social-entrance a:nth-child(4) { animation-delay: 0.4s; }
.footer-social-entrance a:nth-child(5) { animation-delay: 0.5s; }
.footer-social-entrance a:nth-child(6) { animation-delay: 0.6s; }

/* ═══════════ 51. Related films header line drawing ═══════════ */
@keyframes lineDrawRight {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.related-line.line-draw {
  transform-origin: left center;
  animation: lineDrawRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: scaleX(0);
}

/* ═══════════ 52. Password modal lock wiggle ═══════════ */
@keyframes lockWiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
  90% { transform: rotate(1deg); }
}
.pw-modal-overlay:not(.hidden) .pw-modal-lock {
  animation: lockWiggle 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* ═══════════ 53. Browse search input expand on focus ═══════════ */
.browse-search-input {
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
}
.browse-search-input:focus {
  max-width: 520px;
}

/* ═══════════ 54. Mouse proximity card highlight ═══════════ */
.browse-card.proximity-bright {
  border-color: rgba(var(--accent-rgb), 0.25);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.browse-card.proximity-dim {
  border-color: rgba(var(--text-rgb), 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ═══════════ 55. Monitor featured crossfade ═══════════ */
.monitor-thumb.crossfade-out {
  opacity: 0;
  transition: opacity 1s ease;
}
.monitor-thumb.crossfade-in {
  opacity: 1;
  transition: opacity 1s ease;
}

/* ═══════════ 56. Portal typing cursor ═══════════ */
.portal-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

/* ═══════════ 57. Scroll parallax on card thumbnails ═══════════ */
.browse-thumb.scroll-parallax img {
  transition: transform 0.1s linear;
}

/* ═══════════ Reduced motion override ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .portal-orbit-ring,
  #particle-canvas,
  #grain-canvas,
  #cursor-spotlight,
  #scroll-progress,
  .projector-beam,
  .anamorphic-flare,
  .cinema-dust,
  .screen-reflection,
  .cinema-cursor,
  .sprocket-strip,
  .chromatic-aberration,
  .reactive-glow,
  .vhs-glitch-bar,
  .channel-flash,
  .footer-marquee {
    display: none !important;
  }
  .watch-synopsis,
  .watch-credits,
  .split-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .watch-page, .watch-page * { cursor: auto !important; }
  body.glitch-exit { animation: none !important; }
  .site-header .logo { animation: none !important; }
  .corner-tl, .corner-tr, .corner-bl, .corner-br { animation: none !important; }
  .browse-filter.active::after { animation: none !important; }
  .browse-thumb::before { animation: none !important; display: none !important; }
  .sb-animate .sb-text { animation: none !important; clip-path: none !important; }
  .portal-entry-form input:focus { animation: none !important; }
  .pw-modal-overlay:not(.hidden) .pw-modal-lock { animation: none !important; }
  .footer-social-entrance a { animation: none !important; opacity: 1 !important; }
  .related-line.line-draw { animation: none !important; transform: none !important; }
  .portal-typing-cursor { animation: none !important; display: none !important; }
  .browse-divider-star::before { display: none !important; }
  .card-info-title::after { transition: none !important; }
}