/* Ali Studio — crimson cinematic background, October 2026.
   Uses a locally hosted, tiny WebP based on the selected artwork plus SVG linework.
   Scoped to backgrounds: preserves original portfolio photos and video media. */
:root {
  --bg:#06080d;
  --ink:#f2f2f6;
  --cinema-crimson:#f2495e;
  --cinema-surface:rgba(10,13,21,.76);
}
html { background-color:#07090f!important; overflow-x:clip; }
body {
  background-color:#07090f!important;
  background-image:
    radial-gradient(ellipse 48% 67% at 98% 33%,rgba(234,38,62,.22),transparent 85%),
    radial-gradient(ellipse 48% 60% at -4% 70%,rgba(200,17,42,.20),transparent 86%),
    linear-gradient(180deg,rgba(3,5,11,.12) 0%,rgba(4,6,12,.24) 55%,rgba(5,7,13,.42) 100%),
    url('/knowledge/site-assets/orbital-detail-v2.svg'),
    url('/knowledge/site-assets/crimson-atmosphere-lowres.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
  color:#f3f4f8;
}
/* Retire expensive old animated full-screen gradients; retain page effects and photography. */
body::before { display:none!important; animation:none!important; }
body::after { opacity:.10!important; animation:none!important; }
.v48-ambient-media { display:none!important; }
.v46-noise { opacity:.015!important; }
.v40-header { background:rgba(8,10,18,.76)!important; border-color:rgba(255,255,255,.12)!important; }
.v413-footer { background:linear-gradient(170deg,rgba(7,10,17,.82),rgba(15,12,22,.91))!important; border-color:rgba(255,255,255,.10)!important; }
.v48-mobile-nav { background:rgba(9,11,20,.88)!important; border-color:rgba(255,255,255,.13)!important; }
/* Let the background run continuously under structural page sections. */
main, .a71-main, .v40-page, .m433-main, .mu438-page, .sk-page, .sk-collection {
  background:transparent!important;
}
.v414-hero, .v40-section, .h54-latest, .h54-explore, .h54-about,
.h54-numbers, .a71-hero, .a75-hero, .a71-vision, .a71-end, .a82-sites,
.sk-hero, .sk-section, .sk-case-hero, .sk-case-work, .sk-case-notes,
.sk-more, .sk-home-insight, .sk-explain, .m433-section, .m434-feature, .mu439-list {
  background-color:transparent!important;
  background-image:linear-gradient(180deg,rgba(6,8,15,.22),rgba(5,7,14,.53))!important;
}
.sk-case-hero, .sk-hero, .a75-hero, .v414-hero {
  background-image:linear-gradient(140deg,rgba(7,7,15,.14),rgba(7,8,15,.10),rgba(9,6,13,.30))!important;
}
/* The cards stay dark enough to read, without covering the artwork excessively. */
.sk-guide, .sk-extra, .sk-end, .sk-case-photo, .sk-more-card,
.a76-namecard, .a80-card, .v419-work-card, .v40-card {
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.25);
}
.sk-guide, .sk-extra, .sk-end {
  background:linear-gradient(145deg,rgba(21,20,31,.88),rgba(9,12,19,.85))!important;
}
.v413-footer a:hover, .sk-guide:hover, .sk-more-card:hover { border-color:rgba(255,77,104,.42)!important; }
@media(max-width:760px) {
  body {
    /* Fixed attachment is unreliable on iOS Safari; the fixed root art remains seamless. */
    background-attachment:scroll!important;
    background-position:50% 40%!important;
  }
  .sk-hero, .sk-case-hero, .a75-hero {background-image:linear-gradient(180deg,rgba(5,7,13,.16),rgba(5,7,13,.32))!important}
}
@media(prefers-reduced-motion:reduce) {
  body::after,.v46-noise {animation:none!important}
}

/* Consistent imagery on music and video pages with page-scoped body rules. */
html body.m433-page,html body.mu438-page,html body.m434-videos {
  background-color:#07090f!important;
  background-image:
    radial-gradient(ellipse 48% 67% at 98% 33%,rgba(234,38,62,.22),transparent 85%),
    radial-gradient(ellipse 48% 60% at -4% 70%,rgba(200,17,42,.20),transparent 86%),
    linear-gradient(180deg,rgba(3,5,11,.12) 0%,rgba(4,6,12,.24) 55%,rgba(5,7,13,.42) 100%),
    url('/knowledge/site-assets/orbital-detail-v2.svg'),
    url('/knowledge/site-assets/crimson-atmosphere-lowres.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
@media(max-width:760px) {
 html body.m433-page,html body.mu438-page,html body.m434-videos {
    background-attachment:scroll!important;
 }
}