/* iOS 27 review cover: the composition and its motion.
   Sizes are fractions of the cover width, so the layout holds at any width. The phones are
   framed screenshots; the wallpaper (three sheet layers) and the icon are drawn from geometry as
   SVG and rendered to Retina bitmaps at build time, which cover.js places for the current theme.
   Lights are masked layers moved with composited transforms, so nothing repaints per frame. */
.ms-cover { position: relative; aspect-ratio: 2000 / 1054; overflow: hidden; background: #b9aba2; isolation: isolate; container-type: inline-size; }
.ms-cover .wall { position: absolute; inset: -2%; will-change: transform; }   /* parallax translate is set by cover.js */
.ms-cover .sheet { position: absolute; inset: 0; will-change: transform; }
.ms-cover .sheet > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ms-cover .scene { position: absolute; inset: 0; }
.ms-cover .layer { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%);
  translate: -50% -50%; rotate: var(--r, 0deg); will-change: transform; }   /* parallax translate is set by cover.js */
.ms-cover .layer > img, .ms-cover .icon .art { display: block; width: 100%; height: auto; will-change: transform; }
.ms-cover .icon .art > img { display: block; width: 100%; height: auto; }
.ms-cover .icon .art:empty { aspect-ratio: 1; }
.ms-cover .phone > img { filter: drop-shadow(0 1.2cqw 2.4cqw rgba(30, 20, 14, .38)) drop-shadow(0 .2cqw .5cqw rgba(30, 20, 14, .25)); }
.ms-cover .icon .art { filter: drop-shadow(0 2.4cqw 3.6cqw rgba(30, 20, 14, .5)) drop-shadow(0 .6cqw 1.1cqw rgba(30, 20, 14, .38)); }
/* positions measured against the static mockup; depth drives the parallax */
.ms-cover .cc        { --x: .106; --y: .43;  --w: .21;  --r: -7deg;  --depth: .55; z-index: 1; }
.ms-cover .music     { --x: .755; --y: .31;  --w: .215; --r: 8deg;   --depth: .55; z-index: 1; }
.ms-cover .icon      { --x: .5;   --y: .49;  --w: .28;               --depth: .3;  z-index: 4; }   /* in front of every phone, as in the mockup */
.ms-cover .siri      { --x: .285; --y: .61;  --w: .215; --r: -8deg;  --depth: 1;   z-index: 3; }
.ms-cover .spotlight { --x: .895; --y: .84;  --w: .26;  --r: 10deg;  --depth: 1.25; z-index: 3; }
/* lights: a masked box with a soft blob inside; the script moves the blob with --dx/--dy */
.ms-cover noscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-cover .light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ms-cover .rims  { -webkit-mask-size: cover; mask-size: cover; }
.ms-cover .blob { position: absolute; left: 50%; top: 50%; width: var(--size, 130%); aspect-ratio: 1; border-radius: 50%; will-change: transform;
  translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px));
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, var(--a)) 0%, rgba(255, 255, 255, calc(var(--a) * .3)) 40%, rgba(255, 255, 255, 0) 100%); }
.ms-cover .rims  .blob { --a: 1; --size: 75%; }
.ms-cover .body  .blob { --a: .06; --size: 80%; }
.ms-cover .glass .blob { --a: .65; --size: 90%; }
.ms-cover .glare .blob { --a: .42; --size: 150%; }
.ms-cover .sheen { position: absolute; inset: -10% -40%; opacity: 0; will-change: transform;
  background: linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 58%); }
/* theme: cover.js paints the light or dark artwork (a .theme-dark ancestor wins, then .theme-light,
   then the system setting). These rules only adjust the ground and the shadows. */
.theme-dark .ms-cover { background: #12121c; }
.theme-dark .ms-cover .phone > img { filter: drop-shadow(0 1.2cqw 2.4cqw rgba(0, 0, 8, .6)) drop-shadow(0 .2cqw .5cqw rgba(0, 0, 8, .45)); }
.theme-dark .ms-cover .icon .art { filter: drop-shadow(0 2.4cqw 3.6cqw rgba(0, 0, 8, .7)) drop-shadow(0 .6cqw 1.1cqw rgba(0, 0, 8, .5)); }
.theme-dark .ms-cover .rims .blob { --a: .8; }
@media (prefers-color-scheme: dark) {
  .ms-cover:not(.theme-light *) { background: #12121c; }
  .ms-cover:not(.theme-light *) .phone > img { filter: drop-shadow(0 1.2cqw 2.4cqw rgba(0, 0, 8, .6)) drop-shadow(0 .2cqw .5cqw rgba(0, 0, 8, .45)); }
  .ms-cover:not(.theme-light *) .icon .art { filter: drop-shadow(0 2.4cqw 3.6cqw rgba(0, 0, 8, .7)) drop-shadow(0 .6cqw 1.1cqw rgba(0, 0, 8, .5)); }
  .ms-cover:not(.theme-light *) .rims .blob { --a: .8; }
}
/* narrow screens: the same scene in portrait, everything scaled down in proportion.
   A media query, not a container query: the cover is the container and could not switch its own shape. */
@media (max-width: 560px) {
  .ms-cover { aspect-ratio: 4 / 5; }
  .ms-cover .icon      { --x: .5;  --y: .47; --w: .46; }
  .ms-cover .cc        { --x: .13; --y: .27; --w: .34; --r: -9deg; }
  .ms-cover .music     { --x: .88; --y: .22; --w: .34; --r: 9deg; }
  .ms-cover .siri      { --x: .16; --y: .83; --w: .36; --r: -8deg; }
  .ms-cover .spotlight { --x: .85; --y: .81; --w: .38; --r: 10deg; }
}

/* ---- Unfold: everything arrives, then the scene idles with parallax and a passing light. */
.ms-cover[data-take="unfold"] .sheet { transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), opacity 1s ease-out; }
.ms-cover[data-take="unfold"]:not(.is-ready) .sheet { opacity: 0; transform: translate(-4%, -3%); }
.ms-cover[data-take="unfold"] .sheet-second { transition-delay: .12s; }
.ms-cover[data-take="unfold"] .sheet-gold   { transition-delay: .24s; }
.ms-cover[data-take="unfold"] .layer { transition: transform 1.25s cubic-bezier(.18, .9, .22, 1.04), opacity .9s ease-out; }
.ms-cover[data-take="unfold"]:not(.is-ready) .icon      { transform: scale(.78); opacity: 0; }
.ms-cover[data-take="unfold"]:not(.is-ready) .cc        { transform: translate(-45%, 14%) rotate(-8deg); opacity: 0; }
.ms-cover[data-take="unfold"]:not(.is-ready) .music     { transform: translate(30%, -45%) rotate(8deg); opacity: 0; }
.ms-cover[data-take="unfold"]:not(.is-ready) .siri      { transform: translate(-16%, 60%) rotate(-7deg); opacity: 0; }
.ms-cover[data-take="unfold"]:not(.is-ready) .spotlight { transform: translate(45%, 55%) rotate(9deg); opacity: 0; }
.ms-cover[data-take="unfold"] .icon      { transition-delay: .55s; }
.ms-cover[data-take="unfold"] .cc        { transition-delay: .95s; }
.ms-cover[data-take="unfold"] .music     { transition-delay: 1.1s; }
.ms-cover[data-take="unfold"] .siri      { transition-delay: 1.25s; }
.ms-cover[data-take="unfold"] .spotlight { transition-delay: 1.4s; }
.ms-cover[data-take="unfold"].is-ready .glass { opacity: 1; }
.ms-cover[data-take="unfold"].is-ready .sheen { animation: ms-sheen 7s 2.2s infinite; }
.ms-cover[data-take="unfold"].is-ready .rims { opacity: 1; animation: ms-rims 7s 1.6s infinite; }

@keyframes ms-sheen { 0% { transform: translateX(-70%); opacity: 0; } 2% { opacity: 1; } 22% { transform: translateX(70%); opacity: 1; } 23%, 100% { transform: translateX(70%); opacity: 0; } }
@keyframes ms-rims { 0%, 100% { opacity: .1; } 8% { opacity: 1; } 30% { opacity: .1; } }

@media (prefers-reduced-motion: reduce) {
  .ms-cover *, .ms-cover *::before { animation: none !important; transition: none !important; }
  .ms-cover[data-take="unfold"]:not(.is-ready) .layer, .ms-cover[data-take="unfold"]:not(.is-ready) .sheet { opacity: 1; transform: none; }
  .ms-cover .light { opacity: 0 !important; }
}