/* ════════════════════════════════════════════════════════════════
   VISUAL DYNAMICS — scroll reveals, card interactions, ambient
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll-triggered card reveals ── */
.reveal-card {
  opacity: 0;
}
.reveal-card.revealed {
  animation: cardSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--reveal-i, 0) * 0.05s);
}
@keyframes cardSlideIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}

.reveal-fade {
  opacity: 0;
}
.reveal-fade.revealed {
  animation: fadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeSlideUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

/* ── 2. Card cursor glow ── */
.portal-project-card {
  position: relative;
  overflow: hidden;
}
/* Glow for browse cards (not on watch page related grid which uses ::before for gradient) */
.browse-grid > .browse-card::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.12) 0%, transparent 70%);
  top: var(--glow-y, -150px);
  left: var(--glow-x, -150px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.portal-project-card::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.12) 0%, transparent 70%);
  top: var(--glow-y, -150px);
  left: var(--glow-x, -150px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.browse-grid > .browse-card:hover::after,
.portal-project-card:hover::before {
  opacity: 1;
}

/* ── 3. Enhanced card hover — lifted + glow border ── */
.browse-card:hover,
a.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    0 0 40px rgba(var(--accent-rgb),0.06);
  border-color: rgba(var(--accent-rgb),0.35);
}

/* Thumbnail zoom on hover */
.browse-card:hover .browse-thumb img {
  transform: scale(1.06);
}

.browse-thumb img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overlay entrance — spring easing */
.browse-overlay {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 4. Search bar dynamics ── */
.browse-search-bar {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.browse-search-bar.search-focused {
  transform: scale(1.02);
}
.browse-search-input {
  transition: border-color 0.2s, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
  border-radius: 6px;
}
.browse-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08), 0 4px 20px rgba(var(--accent-rgb),0.06);
  background: rgba(255,255,255,0.06);
}

/* ── 5. Filter button dynamics ── */
.browse-filter {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.browse-filter:active,
.browse-filter.filter-pressed {
  transform: scale(0.95);
}
.browse-filter.active {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.2);
}

/* Animated underline on active filter */
.browse-filter::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--cream);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.browse-filter.active::after {
  width: 40%;
  left: 30%;
}

/* ── 6. Header scroll effect ── */
.site-header {
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.logo {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.header-scrolled {
  height: 80px;
  background: rgba(var(--bg-deep-rgb), 0.98);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  border-bottom-color: rgba(var(--accent-rgb),0.08);
}
/* Logo size stays constant on scroll — Dan flagged the growing effect
   as disorienting on the Watch page. */
.site-header.header-scrolled .logo {
  max-height: 28px;
}

/* ── 7. Status bar ambient pulse ── */
.sb-animate {
  position: relative;
  overflow: hidden;
}
.sb-animate::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.03), transparent);
  animation: sbSweep 8s ease-in-out infinite;
}
@keyframes sbSweep {
  0%   { left: -100%; }
  40%  { left: 100%; }
  100% { left: 100%; }
}

.sb-text em {
  animation: sbCountPulse 3s ease-in-out infinite;
}
@keyframes sbCountPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(var(--accent-rgb),0.3); }
}

/* ── 8. Portal entry cinematic reveal ── */
.portal-entry-animate {
  animation: portalReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.portal-entry-animate .portal-entry-logo {
  animation: portalLogoReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.portal-entry-animate .portal-entry-title {
  animation: portalTitleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.portal-entry-animate .portal-entry-subtitle {
  animation: portalSubReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
.portal-entry-animate .portal-entry-form {
  animation: portalFormReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

@keyframes portalReveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes portalLogoReveal {
  0%   { opacity: 0; transform: scale(0.8); filter: blur(8px); }
  100% { opacity: 0.6; transform: scale(1); filter: blur(0); }
}
@keyframes portalTitleReveal {
  0%   { opacity: 0; transform: translateY(20px); letter-spacing: 0.6em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.2em; }
}
@keyframes portalSubReveal {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes portalFormReveal {
  0%   { opacity: 0; transform: translateY(24px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 9. Footer dynamics ── */
.site-footer {
  position: relative;
  overflow: hidden;
}
/* Animated gradient border top — removed */
.site-footer::before {
  display: none;
}
@keyframes footerBorderFlow {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}
/* Static border-top was removed from base.css — no override needed */

.site-footer .footer-social a {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}
.site-footer .footer-social a:hover {
  transform: scale(1.15) translateY(-2px);
}

/* ── 10. Monitor corners — static sharp brackets ── */
.corner {
  transition: opacity 0.4s ease;
}
.monitor:hover .corner {
  opacity: 0.8;
}

/* ── 11. Enhanced monitor idle state ── */
.idle-msg {
  animation: idleMsgBreathe 4s ease-in-out infinite;
}
@keyframes idleMsgBreathe {
  0%, 100% { opacity: 0.3; letter-spacing: 0.35em; }
  50%      { opacity: 0.5; letter-spacing: 0.4em; }
}

/* Monitor hover text entrance */
.hover-cat {
  animation: hoverCatIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hoverCatIn {
  0%   { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; }
  100% { opacity: 1; transform: translateY(0); }
}

.hover-subtitle {
  animation: hoverSubIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes hoverSubIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 12. Enhanced password modal ── */
.pw-modal-overlay:not(.hidden) {
  animation: modalOverlayIn 0.3s ease both;
}
@keyframes modalOverlayIn {
  0%   { opacity: 0; backdrop-filter: blur(0px); }
  100% { opacity: 1; backdrop-filter: blur(8px); }
}

.pw-modal-overlay:not(.hidden) .pw-modal {
  animation: modalCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalCardIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 13. Browse grid — category rows animated dividers ── */
.category-row-line {
  position: relative;
  overflow: hidden;
}
.category-row-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(198,222,144,0.6), transparent);
  animation: lineSweep 4s ease-in-out infinite;
}
@keyframes lineSweep {
  0%   { left: -60%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ── 14. Enhanced buttons — hover glow ── */
.btn {
  transition: background 0.2s, box-shadow 0.3s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.1);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* ── 15. Portal dashboard cards ── */
.portal-project-card {
  transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.portal-project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--shadow-hover),
    0 0 40px rgba(var(--accent-rgb),0.06);
  border-color: rgba(var(--accent-rgb),0.4);
  border-top-color: rgba(var(--accent-rgb),0.7);
}

/* ── 16. Deliverable cards ── */
.deliverable-card {
  transition: border-color 0.2s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.deliverable-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(var(--accent-rgb),0.04);
  border-color: rgba(var(--accent-rgb),0.2);
}

/* ── 17. Timecode glow ── */
.mon-label-br {
  animation: timecodePulse 2s ease-in-out infinite;
}
@keyframes timecodePulse {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 6px rgba(var(--accent-rgb),0.3); }
}

/* ── 18. Page-level grain — removed ── */

/* ── 19. Enhanced page transitions (overrides base) ── */

/* ── 20. Portal form input glow ── */
.portal-entry-form input {
  transition: border-color 0.2s, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}
.portal-entry-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08), 0 8px 24px rgba(var(--accent-rgb),0.06);
  background: rgba(255,255,255,0.04);
}

/* ── 21. Browse card overlay text stagger ── */
.browse-card:hover .browse-overlay-meta {
  animation: overlayMetaIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.browse-card:hover .browse-overlay-title {
  animation: overlayTitleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.browse-card:hover .browse-overlay-cta {
  animation: overlayCtaIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes overlayMetaIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes overlayTitleIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes overlayCtaIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 22. Related films section line animation ── */
.related-line {
  position: relative;
  overflow: hidden;
}
.related-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
  animation: relatedLineSweep 5s ease-in-out infinite;
}
@keyframes relatedLineSweep {
  0%   { left: -40%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ── 23. Portal breadcrumb separator animation ── */
.portal-breadcrumb-sep {
  display: inline-block;
  animation: sepPulse 2s ease-in-out infinite;
}
@keyframes sepPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

/* ── 24. Lock icon pulse on locked cards ── */
.card-lock {
  animation: lockPulse 3s ease-in-out infinite;
}
@keyframes lockPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.15); }
}

/* ── 25. Background gradient — static (animation removed) ── */

/* ════════════════════════════════════════════
   WATCH PAGE CLEANUP — strip decorative noise
   Video is the star, everything else recedes
   ════════════════════════════════════════════ */

/* Hide decorative overlays that compete with video — scoped to watch page so no !important needed */
.watch-cinema-zone .projector-beam,
.watch-cinema-zone .anamorphic-flare,
.watch-cinema-zone .cinema-dust,
.watch-cinema-zone .screen-reflection {
  display: none;
}
/* removed: sprocket-strip, chromatic-aberration, vhs-glitch-bar, cinema-cursor, cursor-spotlight — elements not in DOM */

/* Remove screen frame — let video breathe */
.watch-page .screen-frame {
  display: none;
}

/* Simplify title animation — clean fade, no blur/scale drama. Higher specificity overrides base.css animations. */
.watch-page .watch-title {
  animation: titleFadeIn 1s ease 0.3s both;
}
.watch-page .watch-meta {
  animation: titleFadeIn 0.8s ease 0.6s both;
}
.watch-page .watch-film-info .watch-description {
  animation: titleFadeIn 0.8s ease 0.9s both;
}
@keyframes titleFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Give the watch page cinema zone the portal gradient feel */
.watch-cinema-zone {
  background: transparent;
}

/* Player vignette — removed */
.watch-page .player-wrap .player-vignette-overlay {
  display: none;
}

/* Space below the video */
.watch-below-wrap {
  padding-top: 24px;
}

/* Related films — quieter, smaller, more muted */
.related-section {
  opacity: 0.85;
}

/* ── 26. Portal orbiting rings ── */
.portal-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.06);
  pointer-events: none;
  animation: portalOrbit 20s linear infinite;
}
.portal-orbit-ring:nth-child(1) {
  --ring-i: 0;
  width: 300px; height: 300px;
  top: 50%; left: 50%;
  margin-top: -150px; margin-left: -150px;
  animation-duration: 25s;
  border-color: rgba(var(--accent-rgb),0.05);
}
.portal-orbit-ring:nth-child(2) {
  --ring-i: 1;
  width: 500px; height: 500px;
  top: 50%; left: 50%;
  margin-top: -250px; margin-left: -250px;
  animation-duration: 35s;
  animation-direction: reverse;
  border-color: rgba(198,222,144,0.04);
}
.portal-orbit-ring:nth-child(3) {
  --ring-i: 2;
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  margin-top: -350px; margin-left: -350px;
  animation-duration: 50s;
  border-color: rgba(var(--accent-rgb),0.03);
}
/* Small dot on each ring */
.portal-orbit-ring::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.3);
  top: -2px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.2);
}
@keyframes portalOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 27. Scroll progress bar glow ── */
#scroll-progress {
  box-shadow: none;
  transition: width 0.1s linear, box-shadow 0.3s;
}

/* removed: cursor-spotlight — element not in DOM */

/* ── 29. Grain canvas — don't show static grain when animated canvas is active ── */
body:not(.watch-page) #grain-canvas ~ *::after { display: none; }

/* ── 30. Monitor transitions ── */
.monitor {
  transition: opacity 0.7s ease, height 0.5s ease;
}

/* ── 31. Card hover — border light sweep ── */
.browse-card {
  background-image: linear-gradient(var(--bg-card), var(--bg-card));
  background-origin: border-box;
  background-clip: padding-box;
}
.browse-card:hover {
  position: relative;
}
/* Animated border glow that sweeps around the card */
@keyframes borderSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 32. Category page hero text reveal ── */
.work-title {
  animation: heroTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes heroTitleReveal {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(8px); letter-spacing: 4px; }
  50%  { filter: blur(2px); letter-spacing: 1px; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: 0.32px; }
}

.work-subtitle {
  animation: heroSubReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
@keyframes heroSubReveal {
  0%   { opacity: 0; transform: translateY(16px); letter-spacing: 2px; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.32px; }
}

.work-rule {
  animation: ruleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
@keyframes ruleExpand {
  0%   { width: 0; opacity: 0; }
  100% { width: 50px; opacity: 1; }
}

/* ── 33. Dashboard card thumbnail hover zoom ── */
.portal-project-card .browse-thumb img,
.portal-project-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portal-project-card:hover .browse-thumb img,
.portal-project-card:hover img {
  transform: scale(1.06);
}

/* ── 34. Enhanced password modal — lock icon rotation ── */
.pw-modal-overlay:not(.hidden) .pw-modal-lock svg {
  animation: lockShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.3s both;
}
@keyframes lockShake {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-10deg); }
  40%  { transform: rotate(8deg); }
  60%  { transform: rotate(-5deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

/* ── 35. Portal client name — dramatic entrance ── */
.portal-client-name {
  animation: clientNameReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes clientNameReveal {
  0%   { opacity: 0; transform: translateY(24px) scale(0.9); filter: blur(12px); }
  40%  { opacity: 0.7; filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.portal-label {
  animation: portalLabelReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes portalLabelReveal {
  0%   { opacity: 0; letter-spacing: 4px; }
  100% { opacity: 1; letter-spacing: 1.5px; }
}

/* ── 36. Project landing title — cinematic ── */
.project-landing-title {
  animation: projTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes projTitleReveal {
  0%   { opacity: 0; transform: translateX(-20px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* ── 37. Deliverable card thumbnail hover — cinematic lift ── */
.deliverable-card .deliverable-thumb img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.deliverable-card:hover .deliverable-thumb img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* ── 38. Review page — comment items slide in ── */
.comment-item {
  animation: commentSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes commentSlideIn {
  0%   { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── 39. Active filter glow ── */
.browse-filter.active {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.15);
}

/* ── 40. Footer copyright text — subtle char spacing anim ── */
.footer-copy {
  animation: copyReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes copyReveal {
  0%   { opacity: 0; letter-spacing: 2px; }
  100% { opacity: 1; letter-spacing: -0.4px; }
}

/* ════════════════════════════════════════════════════════════════
   WATCH PAGE — CINEMATIC DYNAMICS
   Projector beams, anamorphic flares, dust, reflections, and more
   ════════════════════════════════════════════════════════════════ */

/* ── Projector beam — cone of light from above the screen ── */
.projector-beam {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 70%;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 30%,
    rgba(var(--accent-rgb),0.02) 40%,
    rgba(255,255,255,0.03) 48%,
    rgba(var(--accent-rgb),0.04) 50%,
    rgba(255,255,255,0.03) 52%,
    rgba(var(--accent-rgb),0.02) 60%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: projectorBeamReveal 3s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both,
             projectorBeamBreathe 8s ease-in-out 3.5s infinite;
}
@keyframes projectorBeamReveal {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.3); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes projectorBeamBreathe {
  0%, 100% { opacity: 0.7; filter: blur(0px); }
  50%      { opacity: 1; filter: blur(1px); }
}

/* ── Anamorphic lens flare — horizontal streak across player ── */
.anamorphic-flare {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(var(--accent-rgb),0.0) 15%,
    rgba(192,230,241,0.04) 30%,
    rgba(var(--accent-rgb),0.08) 45%,
    rgba(255,255,255,0.12) 50%,
    rgba(var(--accent-rgb),0.08) 55%,
    rgba(192,230,241,0.04) 70%,
    rgba(var(--accent-rgb),0.0) 85%,
    transparent 95%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: flareReveal 2s ease-out 1.5s both,
             flarePulse 6s ease-in-out 3.5s infinite;
}
/* Vertical bloom around the flare */
.anamorphic-flare::before {
  content: '';
  position: absolute;
  inset: -20px 10% -20px 10%;
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(var(--accent-rgb),0.02) 40%,
    rgba(255,255,255,0.03) 50%,
    rgba(var(--accent-rgb),0.02) 60%,
    transparent 90%
  );
  filter: blur(8px);
}
@keyframes flareReveal {
  0%   { opacity: 0; transform: scaleX(0); }
  60%  { opacity: 0.8; transform: scaleX(1.2); }
  100% { opacity: 0.5; transform: scaleX(1); }
}
@keyframes flarePulse {
  0%, 100% { opacity: 0.3; }
  30%      { opacity: 0.6; }
  50%      { opacity: 0.15; }
  80%      { opacity: 0.5; }
}

/* ── Cinema dust canvas ── */
.cinema-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: dustFadeIn 3s ease 1s both;
}
@keyframes dustFadeIn {
  to { opacity: 0.7; }
}

/* ── Screen reflection — mirrored glow below player ── */
.screen-reflection {
  position: absolute;
  bottom: -80px;
  left: 5%;
  right: 5%;
  height: 80px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.04) 0%, transparent 100%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: reflectionReveal 2s ease 1.2s both;
  transform: scaleY(-0.3);
  transform-origin: top center;
}
@keyframes reflectionReveal {
  to { opacity: 1; }
}

/* ── Ambient backdrop — warm glow, not overpowering ── */
/* Ambient glow layer — MUST be absolutely positioned so the unstyled <img>
   inside (film thumbnail at natural dimensions) doesn't push the whole
   cinema-zone down. Prior state was position:static, which pushed the
   video player ~1700px below the fold on large viewports. */
.watch-page .player-backdrop {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.watch-page .player-backdrop img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(60px) saturate(2) brightness(0.45);
  opacity: 0;
  transition: opacity 2.5s ease;
  animation: ambientBreatheEnhanced 15s ease-in-out infinite;
}
.watch-page .player-backdrop img.loaded {
  opacity: 0;
}
@keyframes ambientBreatheEnhanced {
  0%, 100% {
    transform: translate(-50%, -50%) scale(2.2);
    filter: blur(60px) saturate(2) brightness(0.45);
  }
  50% {
    transform: translate(-50.5%, -49.5%) scale(2.25);
    filter: blur(55px) saturate(2.2) brightness(0.5);
  }
}

/* Player shadow breathing — disabled for clean look */

/* ══════════════════════════════════
   CINEMA SCREEN FRAME — DISABLED
   ══════════════════════════════════ */

/* Frame completely hidden — clean video presentation */
.screen-frame {
  display: none;
}

/* Outer bezel — visible dark frame with orange accent */
.screen-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(var(--accent-rgb),0.5);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--bg-card-rgb),0.8) 0%, rgba(var(--bg-dark-rgb),0.9) 50%, rgba(var(--bg-card-rgb),0.8) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 50px rgba(0,0,0,0.5),
    0 0 80px rgba(0,0,0,0.5),
    0 0 6px rgba(var(--accent-rgb),0.15),
    0 2px 40px rgba(var(--accent-rgb),0.04);
}

/* Inner glow line — warm accent tracing the screen edge */
.screen-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: 10px;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Corner brackets — orange accent marks at each corner */
.frame-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  z-index: 3;
}
.frame-corner::before,
.frame-corner::after {
  content: '';
  position: absolute;
  background: rgba(var(--accent-rgb),0.8);
  transition: background 0.4s, box-shadow 0.4s;
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.35);
}
.frame-corner::before {
  width: 100%;
  height: 2px;
  top: 0;
  left: 0;
}
.frame-corner::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 0;
}
/* Positioning */
.frame-tl { top: 0; left: 0; }
.frame-tr { top: 0; right: 0; transform: scaleX(-1); }
.frame-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.frame-br { bottom: 0; right: 0; transform: scale(-1); }

/* Hover — corners glow brighter */
.player-wrap:hover .frame-corner::before,
.player-wrap:hover .frame-corner::after {
  background: rgba(var(--accent-rgb),0.9);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.4);
}
.player-wrap:hover .screen-frame::before {
  border-color: rgba(var(--accent-rgb),0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 40px rgba(0,0,0,0.5),
    0 0 80px rgba(0,0,0,0.4),
    0 0 40px rgba(var(--accent-rgb),0.06);
}

/* Edge accent lines — thin warm lines along each side */
.frame-edge {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.08), transparent);
  z-index: 3;
}
.frame-top {
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.15), transparent);
}
.frame-bottom {
  bottom: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.15), transparent);
}
.frame-left {
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.15), transparent);
}
.frame-right {
  right: 0;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.15), transparent);
}

/* Edge light sweep animation */
.frame-top {
  overflow: hidden;
}
.frame-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.25), transparent);
  animation: frameSweepH 6s ease-in-out infinite;
}
.frame-bottom {
  overflow: hidden;
}
.frame-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.25), transparent);
  animation: frameSweepH 6s ease-in-out 3s infinite;
  direction: reverse;
}
@keyframes frameSweepH {
  0%   { left: -30%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

.frame-left {
  overflow: hidden;
}
.frame-left::after {
  content: '';
  position: absolute;
  left: 0;
  top: -30%;
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.2), transparent);
  animation: frameSweepV 8s ease-in-out 1.5s infinite;
}
@keyframes frameSweepV {
  0%   { top: -30%; }
  50%  { top: 100%; }
  100% { top: 100%; }
}

/* watch-screen positioning */
.watch-screen {
  position: relative;
}

/* Mobile — simpler frame */
@media (max-width: 768px) {
  .screen-frame { inset: -6px; border-radius: 12px; }
  .screen-frame::before { border-radius: 12px; }
  .screen-frame::after { border-radius: 9px; }
  .frame-corner { width: 16px; height: 16px; }
  .frame-edge { display: none; }
}

/* ── Enhanced screen light spill (sides + bottom) ── */
.watch-screen::before {
  content: '';
  position: absolute;
  inset: -30px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(var(--accent-rgb),0.02) 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(var(--accent-rgb),0.02) 0%, transparent 70%);
  animation: sideSpillBreathe 8s ease-in-out infinite;
}
@keyframes sideSpillBreathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── Enhanced warm bottom spill ── */
.watch-screen::after {
  height: 60px;
  bottom: -30px;
  left: 10%;
  right: 10%;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),0.1) 0%, rgba(var(--accent-rgb),0.03) 50%, transparent 80%);
  animation: bottomSpillBreathe 6s ease-in-out infinite;
}
@keyframes bottomSpillBreathe {
  0%, 100% { opacity: 0.6; transform: scaleX(0.9); }
  50%      { opacity: 1; transform: scaleX(1.05); }
}

/* ── Play button enhanced — projector lamp warming up ── */
.watch-page .player-big-play-btn {
  animation: projectorPulse 3s ease-in-out infinite, projectorWarmUp 2s ease-out both;
}
@keyframes projectorWarmUp {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(8px); }
  50%  { opacity: 0.8; filter: blur(2px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ── Diamond separator glow animation ── */
.watch-meta span + span::before {
  animation: diamondPulse 3s ease-in-out infinite;
}
@keyframes diamondPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb),0.3), 0 0 20px rgba(var(--accent-rgb),0.1); }
  50%      { box-shadow: 0 0 12px rgba(var(--accent-rgb),0.6), 0 0 30px rgba(var(--accent-rgb),0.2); }
}

/* ── Synopsis/credits section reveal ── */
.watch-synopsis,
.watch-credits {
  opacity: 0;
  transform: translateY(20px);
}
.watch-synopsis.revealed,
.watch-credits.revealed {
  animation: sectionContentReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.watch-credits.revealed {
  animation-delay: 0.15s;
}
@keyframes sectionContentReveal {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Synopsis H3 underline grows on reveal ── */
.watch-synopsis h3::after,
.watch-credits h3::after {
  width: 0;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.watch-synopsis.revealed h3::after,
.watch-credits.revealed h3::after {
  width: 28px;
}

/* ── Enhanced related cards — cinematic hover with glow trail ── */
.watch-page .related-grid .browse-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.watch-page .related-grid .browse-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.8),
    0 0 80px rgba(var(--accent-rgb),0.1),
    0 0 0 1px rgba(var(--accent-rgb),0.2);
}
/* Warm light spill below hovered related card */
.watch-page .related-grid .browse-card::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 15%;
  right: 15%;
  height: 12px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),0.15) 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  filter: blur(6px);
}
.watch-page .related-grid .browse-card:hover::after {
  opacity: 1;
}

/* ── Cinema zone scroll parallax (subtle) ── */
.watch-cinema-zone {
  transform-style: preserve-3d;
}

/* ── Progress bar glow trail ── */
.watch-page .player-progress-filled {
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.4), 0 0 20px rgba(var(--accent-rgb),0.15);
}
.watch-page .player-progress-filled::after {
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6);
}

/* ── Player vignette breathe — very subtle ── */
.watch-page .player-wrap > .player-vignette-overlay {
  animation: vignetteBreathe 10s ease-in-out infinite;
}
@keyframes vignetteBreathe {
  0%, 100% {
    background: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 60%, rgba(0,0,0,0.25) 100%);
  }
  50% {
    background: radial-gradient(ellipse 88% 83% at 50% 50%, transparent 58%, rgba(0,0,0,0.28) 100%);
  }
}

/* Divider glow — removed */

/* ── Watch page grain — removed ── */

/* ── Footer on watch page — more dramatic entrance ── */
.watch-page .site-footer {
  animation: watchFooterReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s both;
}
@keyframes watchFooterReveal {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Watch page mobile adjustments for new elements ── */
@media (max-width: 768px) {
  .projector-beam { display: none; }
  .anamorphic-flare { display: none; }
  .screen-reflection { display: none; }
  .cinema-dust { opacity: 0.3; }
}

/* ════════════════════════════════════════════════════════════════
   ROUND 3 — MAXIMUM DYNAMICS
   Split titles, sprockets, glitch, cursors, marquees, aberration
   ════════════════════════════════════════════════════════════════ */

/* ── 41. Split-letter title animation ── */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotateX(-80deg) scale(0.5);
  filter: blur(10px);
  transition: none;
}
.split-active .split-char {
  animation: splitCharReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--char-i) * 0.04s + 0.4s);
}
@keyframes splitCharReveal {
  0%   { opacity: 0; transform: translateY(60px) rotateX(-80deg) scale(0.5); filter: blur(10px); }
  40%  { opacity: 0.7; filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); filter: blur(0); }
}
/* Ensure 3D perspective on the title */
#watch-title {
  perspective: 800px;
}

/* removed: vhs-glitch-bar — element not in DOM */

/* removed: cinema-cursor — element not in DOM */

/* removed: chromatic-aberration — element not in DOM */

/* ── 45. Footer infinite marquee ── */
.footer-marquee {
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  height: 24px;
  max-height: 24px;
  line-height: 24px;
  white-space: nowrap;
  position: relative;
}
.footer-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
  height: 24px;
  line-height: 24px;
  align-items: center;
}
.footer-marquee-track span {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb),0.1);
  white-space: nowrap;
  line-height: 24px;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 46. Reactive glow (mouse-following) ── */
.reactive-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* ── 47. Glitch exit transition ── */
body.glitch-exit {
  animation: glitchExit 0.3s ease both;
}
@keyframes glitchExit {
  0%   { filter: none; transform: none; clip-path: inset(0); }
  20%  { filter: hue-rotate(10deg) saturate(2); transform: translateX(4px); clip-path: inset(10% 0 30% 0); }
  40%  { filter: hue-rotate(-5deg); transform: translateX(-3px); clip-path: inset(50% 0 10% 0); }
  60%  { filter: invert(0.05); transform: translateX(2px); clip-path: inset(20% 0 40% 0); }
  80%  { filter: none; transform: none; clip-path: inset(0); opacity: 0.5; }
  100% { opacity: 0; filter: blur(2px); transform: scale(0.99); }
}

/* removed: sprocket-strip — element not in DOM */

/* ── 49. Card hover ripple ── */
.card-ripple {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: cardRippleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
  z-index: 2;
}
@keyframes cardRippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ── 50. Channel change flash ── */
.channel-flash {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  z-index: 25;
  pointer-events: none;
  animation: channelFlash 0.08s ease both;
}
@keyframes channelFlash {
  0%   { opacity: 0.8; }
  50%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* ── 51. Hover play pulse on card thumbnails ── */
.hover-play-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  animation: hoverPlayIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: none;
}
.hover-play-pulse svg {
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,0.9);
  margin-left: 3px;
}
.hover-play-pulse::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.3);
  animation: hoverPlayRing 1s ease-in-out infinite;
}
@keyframes hoverPlayIn {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes hoverPlayRing {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.3); opacity: 0; }
}

/* ── 52. Visualizer bars in status bar ── */
.visualizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
.viz-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  opacity: 0.4;
  animation: vizBarBounce 1.2s ease-in-out infinite;
  animation-delay: calc(var(--bar-i) * 0.15s);
}
@keyframes vizBarBounce {
  0%, 100% { height: 3px; opacity: 0.25; }
  25%      { height: 10px; opacity: 0.5; }
  50%      { height: 5px; opacity: 0.35; }
  75%      { height: 14px; opacity: 0.6; }
}

/* ── 53. Enhanced browse grid — variable card sizes ── */
.browse-grid .browse-card:first-child {
  grid-column: span 1;
}

/* ── 54. Animated gradient accent on nav links ── */
.site-nav a {
  position: relative;
}
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--lime));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}
/* Override the old active style */
.site-nav a.active {
  border-bottom-color: transparent;
}

/* ── 55. Portal entry — pulsing glow ring ── */
.portal-entry-animate::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.08) 0%, transparent 70%);
  animation: portalGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes portalGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50%      { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
.portal-entry {
  position: relative;
}

/* ── 56. Enhanced loading screen ── */
.site-loader.show {
  background: var(--bg-dark);
}
.site-loader.show img {
  animation: loaderPulseEnhanced 1.2s ease-in-out infinite;
}
@keyframes loaderPulseEnhanced {
  0%, 100% { opacity: 0.2; filter: brightness(0.5) blur(2px); transform: scale(0.95); }
  50%      { opacity: 1; filter: brightness(1) blur(0); transform: scale(1.05); }
}
.site-loader .loader-scanline {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, rgba(255,255,255,0.4) 50%, var(--accent) 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.3);
}

/* ── Mobile — hide heavy effects ── */
@media (max-width: 768px) {
  /* removed: cinema-cursor — element not in DOM */
  /* removed: sprocket-strip — element not in DOM */
  /* removed: chromatic-aberration — element not in DOM */
  .footer-marquee-track { animation-duration: 20s; }
  .visualizer-bars { display: none; }
}