/* California-only finish. One optical surface per object. */

/* The old opaque edge-fade was painted on an inset, rounded ::after panel.
   Its light corners sat inside the darker parent glass, producing two outlines.
   Fade the actual moving logo content with alpha instead; no second panel. */
body.ca-cinematic section.r2-featured::after { content:none; }
body.ca-cinematic section.r2-featured .r2-featured__viewport {
  border-radius:0;
  background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
body.ca-cinematic section.r2-featured {
  background-clip:padding-box;
  border-radius:22px;
}
body.ca-cinematic section.r2-featured[data-reduced=true] .r2-featured__viewport,
body.ca-cinematic section.r2-featured.r2-featured--static .r2-featured__viewport {
  -webkit-mask-image:none;mask-image:none;
}
/* Fixed-width logo slots overflowed the complete static grid on narrow phones.
   Static/reduced-motion rows now share available space instead of cropping logos. */
body.ca-cinematic section.r2-featured:is([data-reduced=true],.r2-featured--static) .r2-featured__logos {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
body.ca-cinematic section.r2-featured:is([data-reduced=true],.r2-featured--static) .r2-featured__logos li { width:100%;min-width:0; }
body.ca-cinematic section.r2-featured:is([data-reduced=true],.r2-featured--static) .r2-featured__logos img { max-width:100%; }
@media(max-width:1024px) {
  body.ca-cinematic section.r2-featured:is([data-reduced=true],.r2-featured--static) .r2-featured__logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* More quiet behind navigation, with the same polished optical bevel.
   The small fixed blur is not animated; body/card glass remains unchanged. */
body.ca-cinematic .ula-header::before {
  --optical-light-fill:rgba(244,249,255,.70);
  -webkit-backdrop-filter:blur(11px) saturate(120%);
  backdrop-filter:blur(11px) saturate(120%);
}
body.ca-cinematic .ula-header[data-optical-map]::before {
  -webkit-backdrop-filter:var(--optical-refraction) blur(6px) saturate(120%);
  backdrop-filter:var(--optical-refraction) blur(6px) saturate(120%);
}
body.ca-cinematic .ula-header.is-scrolled::before {
  background-color:rgba(244,249,255,.76);
}
@media(max-width:767px) {
  body.ca-cinematic section.r2-featured:is([data-reduced=true],.r2-featured--static) .r2-featured__logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ca-cinematic section.r2-featured .r2-featured__viewport {
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  }
  body.ca-cinematic .ula-header::before { --optical-light-fill:rgba(247,251,255,.74); }
}
@media(prefers-reduced-motion:reduce) {
  body.ca-cinematic section.r2-featured .r2-featured__viewport {-webkit-mask-image:none;mask-image:none;}
  body.ca-cinematic section.r2-featured .r2-featured__logos { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.ca-cinematic section.r2-featured .r2-featured__logos li { width:100%;min-width:0; }
  body.ca-cinematic section.r2-featured .r2-featured__logos img { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) and (max-width:1024px) {
  body.ca-cinematic section.r2-featured .r2-featured__logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) and (max-width:767px) {
  body.ca-cinematic section.r2-featured .r2-featured__logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-transparency:reduce),(forced-colors:active) {
  body.ca-cinematic .ula-header::before { -webkit-backdrop-filter:none!important;backdrop-filter:none!important; }
  body.ca-cinematic section.r2-featured .r2-featured__viewport {-webkit-mask-image:none;mask-image:none;}
}