/* The same softly stepped heritage corner is shared by surfaces throughout. */
body[data-page] {
  --heritage-card-shape: polygon(20px 0,calc(100% - 20px) 0,calc(100% - 18px) 4px,calc(100% - 14px) 8px,calc(100% - 8px) 10px,calc(100% - 5px) 15px,100% 18px,100% calc(100% - 18px),calc(100% - 5px) calc(100% - 15px),calc(100% - 8px) calc(100% - 10px),calc(100% - 14px) calc(100% - 8px),calc(100% - 18px) calc(100% - 4px),calc(100% - 20px) 100%,20px 100%,18px calc(100% - 4px),14px calc(100% - 8px),8px calc(100% - 10px),5px calc(100% - 15px),0 calc(100% - 18px),0 18px,5px 15px,8px 10px,14px 8px,18px 4px);
}
body[data-page] :is(.story-preview-card,.client-name),
body[data-page="home"] :is(.repertoire .genre-card,.booking-invite),
:is(body[data-page="gallery"] .gallery-grid[data-view="grid"],body[data-page="home"] #featured-performance) .video-card {
  clip-path:var(--heritage-card-shape) !important;
  border-radius:0 !important;
  border:0 !important;
}
/* The overlay is clipped once by its parent. Avoid corner spot gradients,
   duplicate clip paths and card-hit pseudo elements that made stray shapes. */
body[data-page] :is(.story-preview-card,.client-name)::after,
body[data-page="home"] .repertoire .genre-card::after,
:is(body[data-page="gallery"] .gallery-grid[data-view="grid"],body[data-page="home"] #featured-performance) .video-card::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  clip-path:none !important; border-radius:0 !important; border:0 !important;
  background:linear-gradient(to bottom,rgba(241,230,217,.14),transparent 18px,transparent calc(100% - 18px),rgba(241,230,217,.11)),
    linear-gradient(to right,rgba(241,230,217,.10),transparent 18px,transparent calc(100% - 18px),rgba(241,230,217,.10)) !important;
  opacity:0; transition:opacity .25s ease !important;
}
body[data-page] :is(.story-preview-card,.client-name):is(:hover,:focus-within)::after,
body[data-page="home"] .repertoire .genre-card:is(:hover,:focus-visible)::after,
:is(body[data-page="gallery"] .gallery-grid[data-view="grid"],body[data-page="home"] #featured-performance) .video-card:is(:hover,:focus-within)::after { opacity:1; }
:is(body[data-page="gallery"] .gallery-grid[data-view="grid"],body[data-page="home"] #featured-performance) .video-card .card-hit::before,
:is(body[data-page="gallery"] .gallery-grid[data-view="grid"],body[data-page="home"] #featured-performance) .video-card .card-hit::after { content:none !important; display:none !important; }

/* Footer panel shares the card silhouette; child content remains interactive. */
body[data-page] .compact-footer__inner::before { clip-path:var(--heritage-card-shape) !important; border-radius:0 !important; }

/* Only the glass layers are clipped: volume popover and transport stay usable. */
body[data-page="home"] .cinema-hero .hero-player.royal-player { clip-path:none !important; border-radius:0 !important; }
body[data-page="home"] .cinema-hero .hero-player.royal-player::before,
body[data-page="home"] .cinema-hero .hero-player.royal-player::after {
  clip-path:var(--heritage-card-shape) !important; border-radius:0 !important;
}
body[data-page="home"] .cinema-hero .hero-player.royal-player::after {
  display:block !important; -webkit-mask-image:none !important; mask-image:none !important;
  background:linear-gradient(to bottom,rgba(241,230,217,.20),transparent 13px,transparent calc(100% - 13px),rgba(241,230,217,.15)),
    linear-gradient(to right,rgba(241,230,217,.16),transparent 18px,transparent calc(100% - 18px),rgba(241,230,217,.16)) !important;
  box-shadow:none !important; opacity:1 !important;
}
@media (max-width:760px) {
  body[data-page="home"] .cinema-hero .hero-player.royal-player {
    width:calc(100% - 20px); min-height:78px; padding:8px 16px;
    grid-template-columns:38px minmax(0,1fr) 108px 36px 36px;
    grid-template-rows:20px 42px; column-gap:2px; align-items:center;
  }
  body[data-page="home"] .cinema-hero .hero-player.royal-player .dock-artwork { align-self:center; justify-self:center; }
  body[data-page="home"] .cinema-hero .hero-player.royal-player :is(.dock-controls,.player-volume,.player-details) { align-self:center; }
}
@media (max-width:359px) {
  body[data-page="home"] .cinema-hero .hero-player.royal-player {
    padding-inline:13px; grid-template-columns:34px minmax(0,1fr) 102px 34px 34px; gap:0 2px;
  }
}
/* The entrance starts a little closer to the viewer, then returns to normal size. */
@media (prefers-reduced-motion:no-preference) {
  .js-motion body[data-page="gallery"] .gallery-grid .video-card.reveal { transform:translate3d(0,52px,0) scale(1.09); }
  .js-motion body[data-page="gallery"] .gallery-grid .video-card.reveal:is(.visible,:focus-within) { transform:translate3d(0,0,0) scale(1); }
}
@media (max-width:580px) and (prefers-reduced-motion:no-preference) {
  .js-motion body[data-page="gallery"] .gallery-grid .video-card.reveal { transform:translate3d(0,38px,0) scale(1.07); }
  .js-motion body[data-page="gallery"] .gallery-grid .video-card.reveal:is(.visible,:focus-within) { transform:translate3d(0,0,0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .js-motion body[data-page="gallery"] .gallery-grid .video-card.reveal { transform:none !important; }
}
/* Home performance cards use the same silhouette as the gallery. */
body[data-page="home"] #home-videos .video-card {
  clip-path:var(--heritage-card-shape) !important;
  border:0 !important; border-radius:0 !important;
  background:rgba(33,6,9,.78) !important;
  padding:14px 14px 22px !important; overflow:hidden;
}
body[data-page="home"] #home-videos .video-card .card-open { right:16px; bottom:23px; }
body[data-page="home"] #home-videos .video-card::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  clip-path:none; border-radius:0;
  background:linear-gradient(to bottom,rgba(241,230,217,.14),transparent 18px,transparent calc(100% - 18px),rgba(241,230,217,.11)),
    linear-gradient(to right,rgba(241,230,217,.10),transparent 18px,transparent calc(100% - 18px),rgba(241,230,217,.10));
  opacity:0; transition:opacity .25s ease;
}
body[data-page="home"] #home-videos .video-card:is(:hover,:focus-within)::after { opacity:1; }