/* The Mac page: same room, same tokens (styles.css). What's new here is the
   window: the real app, tilted back, settling flat as it scrolls into view. */

/* ---------- 1. Opening ---------- */
.mac-opening { padding: 148px 24px 0; display: grid; justify-items: center; text-align: center; }
.mac-opening-copy { display: grid; justify-items: center; gap: 18px; max-width: 980px; }
.mac-opening-copy .eyebrow { margin-bottom: 0; }
.mac-opening h1 {
  font-size: clamp(36px, 6vw, 88px); line-height: 1; letter-spacing: -0.05em; font-weight: 600; text-wrap: balance;
}
@media (max-width: 600px) { .mac-opening h1 .nowrap { white-space: normal; } .mac-opening { padding-top: 120px; } }
.js .mac-opening-copy > * { opacity: 0; transform: translateY(var(--move-md)); animation: rise-in var(--dur-5) var(--ease-emphasized) forwards; }
.js .mac-opening-copy > :nth-child(2) { animation-delay: 80ms; }
.js .mac-opening-copy > :nth-child(3) { animation-delay: 160ms; }
.js .mac-opening-copy > :nth-child(4) { animation-delay: 240ms; }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* The window. Its PNG keeps the real rounded corners, so the shadow follows them. */
.mac-window { position: relative; width: min(100%, 1320px); margin: 72px auto 0; perspective: 2400px; }
.mac-window img {
  position: relative; z-index: 1; width: 100%;
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.4)) drop-shadow(0 0 0.5px rgb(255 255 255 / 0.4));
  transform-origin: 50% 100%;
}
.js .mac-window { opacity: 0; animation: window-in 1.1s var(--ease-emphasized) 300ms forwards; }
@keyframes window-in { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
/* Where the browser can tie animation to scroll, the window starts tilted
   back and settles flat as it comes up the page. Elsewhere it's simply flat. */
@supports (animation-timeline: view()) {
  .js .mac-window img { animation: window-flat linear both; animation-timeline: view(); animation-range: entry 55% cover 48%; }
  @keyframes window-flat { from { transform: rotateX(16deg) scale(0.95); } to { transform: none; } }
}
/* Light off the screen: a pool of the accent behind each window, reaching
   past every edge (a solid panel just inside the window, blurred, so all of
   its light spills outward), breathing slowly. Only the page itself clips the
   sideways spill, at the screen's edges: clipping a section would cut the
   light off in straight lines wherever the section is narrower than the screen. */
body { overflow-x: clip; }
.mac-window-glow, .mac-shot::before {
  content: ""; position: absolute; z-index: 0; inset: 3% 2% -3% 2%; border-radius: 48px;
  background: linear-gradient(180deg, rgb(76 125 240 / 0.45), rgb(76 125 240 / 0.85) 55%, rgb(112 96 255 / 0.7));
  filter: blur(90px); pointer-events: none;
  animation: glow-breathe 9s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
  from { opacity: 0.78; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.03); }
}

/* ---------- 2. Statement ---------- */
.mac-statement { margin-top: 0; padding-top: 160px; }

/* ---------- 3-4. Features ---------- */
.mac-feature { padding-bottom: 160px; }
.mac-feature-copy { max-width: 980px; margin-bottom: 56px; }
.mac-feature h2.big { font-size: clamp(26px, 3.2vw, 44px); max-width: 24em; }
.mac-shot { position: relative; }
.mac-shot img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.4)) drop-shadow(0 0 0.5px rgb(255 255 255 / 0.35)); }

/* ---------- 5. Details ---------- */
.mac-details { padding-bottom: 160px; }
.mac-details ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line);
}
.mac-details li { display: grid; gap: 6px; padding: 28px 28px 32px; background: var(--bg); }
.mac-details b { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.mac-details span { color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .mac-details ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mac-details ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 6. Every device ---------- */
.mac-everywhere { padding-bottom: 160px; }
.actions.left { justify-content: flex-start; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .js .mac-opening-copy > *, .js .mac-window, .js .mac-window img { opacity: 1; transform: none; animation: none !important; }
  .mac-window-glow, .mac-shot::before { animation: none; }
}