/* “Made to feel like it came with your Mac”: four little scenes of Brim at work, drawn in
   HTML/CSS and looped while they are on screen (site.js adds .run). Sizes are in cqw (the
   scene's width), so every scene scales with its card. */

.scene { position: relative; aspect-ratio: 2 / 1; overflow: hidden; container-type: inline-size; background: #241a3a; color: #fff; font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: none; }
.scene * { animation-play-state: paused !important; }
.scene.run * { animation-play-state: running !important; }
.sc-wall { position: absolute; inset: 0; background:
  radial-gradient(55% 75% at 18% 35%, rgba(98, 76, 214, .55), transparent 70%),
  radial-gradient(45% 65% at 86% 30%, rgba(240, 122, 110, .38), transparent 72%),
  linear-gradient(180deg, #1b1340 0%, #34205f 34%, #6a2d7e 64%, #c24f73 88%, #f39a5d 100%); }
.sc-bar { position: absolute; left: 0; right: 0; top: 0; height: 4.4cqw; display: flex; align-items: center; gap: 2.2cqw; padding: 0 2.6cqw; font-size: 1.65cqw; font-weight: 500; letter-spacing: -.01em; background: rgba(15, 8, 34, .28); }
.sc-bar b { font-weight: 700; }
.sc-logo { width: 1.9cqw; height: 1.2cqw; border-radius: .6cqw; background: #fff; }
.sc-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-i { width: 3cqw; height: 3cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The island: the notch, then whatever it grows into. */
.sc-island { position: absolute; top: 0; left: 50%; z-index: 2; width: 14cqw; height: 4.4cqw; transform: translateX(-50%); background: #000; border-radius: 0 0 1.8cqw 1.8cqw; overflow: hidden; box-shadow: 0 1.6cqw 3.4cqw -1.4cqw rgba(0, 0, 0, .55); }
.sc-island > * { position: absolute; opacity: 0; }
.sc-cursor { position: absolute; z-index: 3; width: 3.4cqw; height: 3.4cqw; fill: #fff; stroke: none; filter: drop-shadow(0 .2cqw .4cqw rgba(0, 0, 0, .45)); }
.sc-art { display: block; flex: none; background: linear-gradient(135deg, #ff5f6d, #ffc371); }
.sc-art.sm { width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw; }
.sc-art.lg { width: 12cqw; height: 12cqw; border-radius: 2.4cqw; box-shadow: 0 1cqw 2.4cqw -1cqw #ff5f6d; }
.sc-eq { display: flex; align-items: center; gap: .45cqw; height: 2.4cqw; }
.sc-eq i { width: .5cqw; height: 100%; border-radius: .3cqw; background: #ff6b6b; transform-origin: center; animation: sc-eq .9s ease-in-out infinite; }
.sc-eq i:nth-child(2) { animation-delay: -.3s; } .sc-eq i:nth-child(3) { animation-delay: -.6s; } .sc-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes sc-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.sc-meta { display: flex; flex-direction: column; min-width: 0; }
.sc-meta b { font-size: 2.1cqw; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.sc-meta span { font-size: 1.7cqw; color: rgba(255, 255, 255, .6); white-space: nowrap; }

/* 1 · Hover to open ─────────────────────────────────────────────── */
.sc-open .sc-island { animation: s1-island 8s cubic-bezier(.32, .72, 0, 1) infinite; }
.sc-open .sc-compact { inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.3cqw; animation: s1-compact 8s linear infinite; }
.sc-open .sc-player { left: 3cqw; right: 3cqw; top: 6cqw; display: flex; gap: 2.6cqw; align-items: center; animation: s1-player 8s linear infinite; }
.sc-open .sc-meta { flex: 1; }
.sc-progress { height: .6cqw; margin: 1.4cqw 0 1.2cqw; border-radius: .3cqw; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sc-progress i { display: block; height: 100%; width: 32%; border-radius: inherit; background: #fff; animation: s1-progress 8s linear infinite; }
.sc-ctl { display: flex; justify-content: center; gap: 4cqw; }
.sc-ctl .sc-i { width: 2.6cqw; height: 2.6cqw; }
.sc-open .sc-cursor { animation: s1-cursor 8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes s1-island {
  0%, 22% { width: 26cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
  30%, 70% { width: 58cqw; height: 22cqw; border-radius: 0 0 3.6cqw 3.6cqw; }
  78%, 100% { width: 26cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
}
@keyframes s1-compact { 0%, 21% { opacity: 1; } 23%, 74% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes s1-player { 0%, 26% { opacity: 0; transform: scale(.94); } 31%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes s1-progress { 0%, 30% { width: 32%; } 70% { width: 47%; } 100% { width: 47%; } }
@keyframes s1-cursor {
  0% { left: 70%; top: 80%; opacity: 0; }
  6% { opacity: 1; }
  22% { left: 53%; top: 4%; }
  62% { left: 53%; top: 4%; opacity: 1; }
  76% { left: 66%; top: 66%; opacity: 1; }
  84%, 100% { left: 66%; top: 66%; opacity: 0; }
}

/* 2 · Volume, in the notch ─────────────────────────────────────── */
.sc-volume .sc-island { animation: s2-island 6s cubic-bezier(.32, .72, 0, 1) infinite; }
.sc-hud { inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.4cqw; animation: s2-hud 6s linear infinite; }
.sc-hud .sc-i { width: 2.6cqw; height: 2.6cqw; }
.sc-level { width: 9cqw; height: .7cqw; border-radius: .35cqw; background: rgba(255, 255, 255, .22); overflow: hidden; }
.sc-level i { display: block; height: 100%; width: 40%; background: #fff; border-radius: inherit; animation: s2-level 6s cubic-bezier(.3, .7, .2, 1) infinite; }
.sc-key { position: absolute; left: 50%; bottom: 7cqw; width: 8cqw; height: 7cqw; margin-left: -4cqw; display: grid; place-items: center; border-radius: 1.4cqw; background: linear-gradient(180deg, #2c2a33, #1d1b22); box-shadow: 0 .5cqw 0 #0e0d12, 0 1.4cqw 2.4cqw -1cqw rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .85); animation: s2-key 6s linear infinite; }
.sc-key .sc-i { width: 3.2cqw; height: 3.2cqw; }
@keyframes s2-island { 0%, 9% { width: 14cqw; } 13%, 70% { width: 36cqw; } 76%, 100% { width: 14cqw; } }
@keyframes s2-hud { 0%, 10% { opacity: 0; } 14%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes s2-level { 0%, 20% { width: 40%; } 23%, 33% { width: 55%; } 36%, 46% { width: 70%; } 49%, 100% { width: 85%; } }
@keyframes s2-key {
  0%, 8%, 12%, 20%, 24%, 33%, 37%, 46%, 50%, 100% { transform: none; box-shadow: 0 .5cqw 0 #0e0d12, 0 1.4cqw 2.4cqw -1cqw rgba(0, 0, 0, .6); }
  10%, 22%, 35%, 48% { transform: translateY(.45cqw); box-shadow: 0 .05cqw 0 #0e0d12, 0 .6cqw 1.2cqw -1cqw rgba(0, 0, 0, .6); }
}

/* 3 · Never late again ─────────────────────────────────────────── */
.sc-meet .sc-island { animation: s3-island 7s cubic-bezier(.32, .72, 0, 1) infinite; }
.sc-banner { left: 2.4cqw; right: 2.4cqw; top: 5.6cqw; display: flex; align-items: center; gap: 2cqw; animation: s3-banner 7s linear infinite; }
.sc-banner .sc-meta { flex: 1; }
.sc-cal { width: 5.4cqw; height: 5.4cqw; flex: none; display: grid; place-items: end center; padding-bottom: .5cqw; border-radius: 1.3cqw; background: linear-gradient(180deg, #ff453a 0 32%, #fff 32%); color: #1c1917; font-size: 2.3cqw; }
.sc-join { display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.8cqw; border-radius: 1.4cqw; background: #32d74b; color: #04230d; font-size: 1.8cqw; font-weight: 700; animation: s3-join 7s ease-in-out infinite; }
.sc-join .sc-i { width: 2.2cqw; height: 2.2cqw; }
.sc-meet .sc-cursor { animation: s3-cursor 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes s3-island { 0%, 8% { width: 14cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; } 15%, 76% { width: 58cqw; height: 14cqw; border-radius: 0 0 3.2cqw 3.2cqw; } 84%, 100% { width: 14cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; } }
@keyframes s3-banner { 0%, 13% { opacity: 0; transform: translateY(-1cqw); } 18%, 72% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; } }
@keyframes s3-join { 0%, 26%, 34%, 42%, 50%, 60%, 64%, 100% { transform: none; filter: none; } 30%, 38%, 46% { transform: scale(1.06); } 62% { transform: scale(.92); filter: brightness(.85); } }
@keyframes s3-cursor { 0%, 30% { left: 86%; top: 84%; opacity: 0; } 36% { opacity: 1; } 58%, 64% { left: 74%; top: 12%; opacity: 1; } 74%, 100% { left: 80%; top: 60%; opacity: 0; } }

/* 4 · Drop to share ────────────────────────────────────────────── */
.sc-drop .sc-island { animation: s4-island 8s cubic-bezier(.32, .72, 0, 1) infinite; }
.sc-zones { left: 2.2cqw; right: 2.2cqw; top: 5.4cqw; bottom: 2.2cqw; display: flex; gap: 1.6cqw; animation: s4-zones 8s linear infinite; }
.sc-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; border-radius: 2cqw; border: .22cqw dashed rgba(255, 255, 255, .28); font-size: 1.7cqw; }
.sc-zone .sc-i { width: 3.6cqw; height: 3.6cqw; }
.z-air { color: #5ac8f5; }
.z-shelf { color: #b8aaff; animation: s4-shelf 8s linear infinite; }
.sc-shelved { inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.4cqw; color: #b8aaff; animation: s4-shelved 8s linear infinite; }
.sc-shelved .sc-i { width: 2.6cqw; height: 2.6cqw; }
.sc-shelved b { font-size: 1.9cqw; color: #fff; }
.sc-file { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .6cqw; transform: translate(-50%, -50%); animation: s4-file 8s cubic-bezier(.45, 0, .2, 1) infinite; }
.sc-file b { padding: .2cqw .8cqw; border-radius: .6cqw; background: rgba(10, 132, 255, .9); font-size: 1.4cqw; font-weight: 600; }
.sc-doc { position: relative; width: 6cqw; height: 7.6cqw; border-radius: .8cqw; background: #fff; box-shadow: 0 1cqw 2cqw -.8cqw rgba(0, 0, 0, .5); }
.sc-doc::before { content: ""; position: absolute; right: 0; top: 0; width: 1.8cqw; height: 1.8cqw; border-radius: 0 .8cqw 0 .5cqw; background: linear-gradient(225deg, transparent 50%, #d6d0cc 50%); }
.sc-doc i { position: absolute; left: .7cqw; right: .7cqw; bottom: 1cqw; padding: .25cqw 0; border-radius: .3cqw; background: #ff453a; color: #fff; font-size: 1.3cqw; font-style: normal; font-weight: 800; text-align: center; }
.sc-file .sc-cursor { position: absolute; left: 60%; top: 30%; }
@keyframes s4-island {
  0%, 20% { width: 14cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
  27%, 52% { width: 56cqw; height: 20cqw; border-radius: 0 0 3.4cqw 3.4cqw; }
  58%, 88% { width: 22cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
  94%, 100% { width: 14cqw; height: 4.4cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
}
@keyframes s4-zones { 0%, 24% { opacity: 0; } 29%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes s4-shelf { 0%, 36% { background: transparent; border-style: dashed; } 40%, 52% { background: rgba(123, 108, 255, .22); border-color: #b8aaff; border-style: solid; } 100% { background: transparent; } }
@keyframes s4-shelved { 0%, 56% { opacity: 0; } 60%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes s4-file {
  0% { left: 16%; top: 74%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  6%, 12% { left: 16%; top: 74%; opacity: 1; }
  38% { left: 60%; top: 26%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  46% { left: 62%; top: 22%; opacity: 1; transform: translate(-50%, -50%) scale(.9); }
  52%, 100% { left: 62%; top: 16%; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
}

/* No motion: each scene shows its key moment, still. */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene.run * { animation: none !important; }
  .sc-open .sc-island { width: 58cqw; height: 22cqw; border-radius: 0 0 3.6cqw 3.6cqw; }
  .sc-open .sc-player, .sc-volume .sc-hud, .sc-meet .sc-banner, .sc-drop .sc-zones { opacity: 1; }
  .sc-volume .sc-island { width: 36cqw; }
  .sc-level i { width: 70%; }
  .sc-meet .sc-island { width: 58cqw; height: 14cqw; border-radius: 0 0 3.2cqw 3.2cqw; }
  .sc-drop .sc-island { width: 56cqw; height: 20cqw; border-radius: 0 0 3.4cqw 3.4cqw; }
  .sc-cursor, .sc-file { display: none; }
}