/* "A small widget, a big toolbox" on the Mac pages (/mac/ and the v2 draft): the art inside each feature card. The
   cards themselves are the pages' own `.bento` cards. Animations run only while the section is on screen
   (mac-features.js sets `.is-visible`). */

.feat-sec.is-visible .bento-art *{animation-play-state:running!important}
.feat-mini{border-radius:20px;background:linear-gradient(150deg,#262236,#17151f);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 34px rgba(0,0,0,.45)}

/* Taps & pages: a real little widget; its tabs switch on their own until you click one. */
.art-taps{align-content:center}
.taps-w{width:250px;height:150px;padding:12px;display:grid;grid-template-rows:auto 1fr;gap:10px}
.taps-tabs{display:flex;gap:6px}
.taps-tabs button{flex:1;border:0;border-radius:100px;padding:6px 0;font:600 .75rem/1 -apple-system,BlinkMacSystemFont,sans-serif;color:var(--muted);background:rgba(255,255,255,.06);cursor:pointer;transition:background .25s,color .25s}
.taps-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#c34c16,#ce1757 48%,#6841dd);color:#fff}
.taps-pages{position:relative}
.taps-page{position:absolute;inset:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.25,1.2)}
.taps-page[hidden]{display:block;opacity:0;transform:translateY(8px) scale(.97);pointer-events:none}
.taps-today{display:grid;gap:6px;font-size:.75rem}
.taps-today span{display:flex;gap:8px;align-items:center}.taps-today b{width:42px;color:#ffb0cb;font-weight:650}
.taps-today i{flex:none;width:3px;height:14px;border-radius:2px;background:var(--c)}
.taps-month{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:.5625rem;color:var(--muted);text-align:center}
.taps-month span{padding:2px 0;border-radius:5px}.taps-month .t{background:#ff3d7f;color:#fff;font-weight:700}.taps-month .e{color:#fff}
.taps-hint{margin-top:10px;font-size:.6875rem;color:#cbbaff}

/* Photo sets: a rule, and the photos it finds. */
.art-photoset{align-content:center;gap:12px}
.ps-rule{justify-self:center;display:inline-flex;gap:8px;align-items:center;padding:7px 13px;border-radius:100px;background:#0f0e15;border:1px solid rgba(255,255,255,.14);font-size:.75rem;color:#ece7f4}
.ps-rule b{color:#ffb0cb;font-weight:650}
.ps-row{display:flex;gap:10px;justify-content:center}
.ps-photo{position:relative;flex:none;width:min(96px,calc((100vw - 140px) / 3));aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.45);animation:ps-in 6s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
.ps-photo img{width:100%;height:100%;object-fit:cover}
.ps-photo span{position:absolute;left:6px;right:6px;bottom:5px;font-size:.5625rem;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
@keyframes ps-in{0%{opacity:0;transform:translateY(10px) rotate(-3deg)}12%,85%{opacity:1;transform:none}100%{opacity:0}}

/* Special days & countdowns. */
.art-days{align-content:center;gap:10px}
.days-count{width:220px;padding:14px 16px;display:grid;gap:2px}
.days-count b{font-size:2.4rem;letter-spacing:-.04em;line-height:1;background:linear-gradient(100deg,#ffac76,#ff6799 48%,#a68cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.days-count span{font-size:.75rem;color:var(--muted)}
.days-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.days-chips span{padding:4px 10px;border-radius:100px;font-size:.6875rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);animation:days-pop 5s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes days-pop{0%,10%{opacity:.35}25%,80%{opacity:1}100%{opacity:.35}}

/* Calendars. */
.art-cal{align-content:center}
.cal-w{width:220px;padding:12px 14px}
.cal-w>b{display:block;font-size:.8125rem;margin-bottom:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 2px;font-size:.625rem;text-align:center;color:var(--muted)}
.cal-grid span{position:relative;padding:2px 0}
.cal-grid .dot:after{content:"";position:absolute;left:50%;bottom:-3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c,#a68cff)}
.cal-grid .today{color:#fff;font-weight:700;background:#ff3d7f;border-radius:6px;animation:cal-today 3s ease-in-out infinite}
.cal-grid .star{color:#ffd46b}
@keyframes cal-today{50%{box-shadow:0 0 0 4px rgba(255,61,127,.25)}}

/* Rings, bars & gauges. */
.art-rings{grid-template-columns:auto auto;gap:18px;align-content:center;justify-content:center}
.rg-ring{width:96px;height:96px}
.rg-ring circle{fill:none;stroke-width:10}
.rg-ring .fill{stroke:url(#rgg);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:rg-fill 4.5s ease-in-out infinite}
.rg-side{display:grid;gap:12px;width:120px}
.rg-side>span{display:grid;gap:5px}
.rg-bar{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.rg-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#ff8a3d,#ff3d7f,#a68cff);transform-origin:0 50%;animation:rg-bar 4.5s ease-in-out infinite}
.rg-side small{font-size:.6875rem;color:var(--muted)}
@keyframes rg-fill{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:.28}100%{stroke-dashoffset:1}}
@keyframes rg-bar{0%{transform:scaleX(0)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* Widget Settings: a sheet of the few choices. */
.art-settings{align-content:center}
.set-sheet{width:min(100%,300px);padding:12px;display:grid;gap:6px}
.set-sheet>b{font-size:.8125rem;padding:0 4px 4px}
.set-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);font-size:.75rem;animation:set-hot 6s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
.set-row span{color:var(--muted)}.set-row em{font-style:normal;font-weight:600}.set-row em:after{content:" ⌄";color:var(--muted)}
@keyframes set-hot{0%,30%{background:rgba(255,61,127,.16);box-shadow:inset 0 0 0 1px rgba(255,120,170,.45)}38%,100%{background:rgba(255,255,255,.04);box-shadow:none}}

/* Lists: one design, repeated per row. */
.art-list{align-content:center}
.ls-w{width:min(100%,300px);padding:10px 14px;display:grid;gap:5px}
.ls-row{display:grid;grid-template-columns:40px 1fr 54px;white-space:nowrap;gap:8px;align-items:center;font-size:.6875rem;animation:ls-in 6s ease-out infinite;animation-delay:calc(var(--i) * .18s)}
.ls-row b{font-weight:650}.ls-row span:last-child{text-align:right;color:var(--muted)}
.ls-bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.07)}
.ls-bar i{position:absolute;top:0;bottom:0;left:var(--a);right:var(--b);border-radius:3px;background:linear-gradient(90deg,#7ad3ff,#ffb48a)}
@keyframes ls-in{0%{opacity:0;transform:translateX(-8px)}10%,88%{opacity:1;transform:none}100%{opacity:0}}

/* Groups & arrangement: the same three pieces, lined up three ways. */
.art-groups{align-content:center}
.gr-box{position:relative;width:180px;height:120px;border-radius:16px;border:1.5px dashed rgba(255,140,190,.45)}
.gr-box i{position:absolute;left:0;top:0;width:44px;height:30px;border-radius:9px;background:var(--c);animation:gr-move 7.5s cubic-bezier(.5,0,.2,1) infinite}
.gr-box i:nth-child(1){--c:#ff8a3d;--x1:12px;--y1:45px;--x2:68px;--y2:6px;--x3:52px;--y3:30px}
.gr-box i:nth-child(2){--c:#ff3d7f;--x1:68px;--y1:45px;--x2:68px;--y2:45px;--x3:68px;--y3:44px}
.gr-box i:nth-child(3){--c:#a68cff;--x1:124px;--y1:45px;--x2:68px;--y2:84px;--x3:84px;--y3:58px}
.gr-label{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:.6875rem;color:#cbbaff}
.gr-label span{position:absolute;left:0;right:0;opacity:0;animation:gr-label 7.5s infinite}
.gr-label span:nth-child(2){animation-delay:2.5s}.gr-label span:nth-child(3){animation-delay:5s}
@keyframes gr-move{0%,28%{transform:translate(var(--x1),var(--y1))}33%,61%{transform:translate(var(--x2),var(--y2))}66%,95%{transform:translate(var(--x3),var(--y3))}100%{transform:translate(var(--x1),var(--y1))}}
@keyframes gr-label{0%,30%{opacity:1}33%,100%{opacity:0}}

/* Effects: shadow, glow, outline on the same word. */
.art-fx{align-content:center;gap:16px}
.fx-word{font-size:3rem;font-weight:800;letter-spacing:-.04em;color:#fff;animation:fx-cycle 7.5s infinite}
.fx-label{position:relative;height:16px;width:120px;font-size:.6875rem;color:#cbbaff;text-align:center}
.fx-label span{position:absolute;inset:0;opacity:0;animation:gr-label 7.5s infinite}
.fx-label span:nth-child(2){animation-delay:2.5s}.fx-label span:nth-child(3){animation-delay:5s}
@keyframes fx-cycle{0%,30%{text-shadow:0 6px 14px rgba(0,0,0,.9);-webkit-text-stroke:0 transparent}33%,63%{text-shadow:0 0 16px #ff3d7f,0 0 34px rgba(255,61,127,.7);-webkit-text-stroke:0 transparent}66%,96%{text-shadow:none;color:transparent;-webkit-text-stroke:2px #ffb0cb}100%{text-shadow:0 6px 14px rgba(0,0,0,.9)}}

/* Fonts. */
.art-fonts{align-content:center;gap:12px}
.ft-aa{position:relative;width:200px;height:84px}
.ft-aa span{position:absolute;inset:0;display:grid;place-items:center;font-size:3.6rem;color:#fff;opacity:0;animation:ft-cycle 8s infinite}
.ft-aa span:nth-child(1){font-family:Georgia,"Times New Roman",serif;font-style:italic}
.ft-aa span:nth-child(2){font-family:ui-monospace,Menlo,monospace;animation-delay:2s}
.ft-aa span:nth-child(3){font-family:"Snell Roundhand","Brush Script MT",cursive;animation-delay:4s}
.ft-aa span:nth-child(4){font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-weight:900;animation-delay:6s}
.ft-tag{font-size:.75rem;color:#cbbaff}
@keyframes ft-cycle{0%{opacity:0;transform:translateY(8px)}5%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-8px)}}

/* Share a design (the slim full-width card). */
.share-row{display:flex;align-items:center;gap:22px}
.share-file{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#0f0e15;border:1px solid rgba(255,255,255,.14);font-size:.8125rem;font-weight:600;animation:share-nudge 3.5s ease-in-out infinite}
.share-file svg{width:22px;height:22px;color:#ffb0cb}
@keyframes share-nudge{50%{transform:translateX(6px)}}
.share-row h3{margin-bottom:4px}

@media(max-width:600px){.share-row{flex-direction:column;align-items:flex-start;gap:12px}.art-rings{gap:12px}}
@media(prefers-reduced-motion:reduce){.rg-ring .fill{stroke-dashoffset:.28}.rg-bar i{transform:none}.gr-box i{transform:translate(var(--x1),var(--y1))}.gr-label span:first-child,.fx-label span:first-child,.ft-aa span:first-child{opacity:1}}