/* Small, self-contained app scenes for the website's three features. */
.features { padding-top: 38px; padding-bottom: 78px; }
.features > .section-label { margin-bottom: 25px; }
.feature-grid { align-items: stretch; gap: 18px; }
.feature-grid .feature-card {
  --accent: 146, 185, 255;
  min-width: 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(var(--accent), .09), transparent 65%),
    linear-gradient(135deg, rgba(223, 238, 255, .065), rgba(223, 238, 255, .015) 62%),
    rgba(19, 31, 58, .60);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.feature-grid .feature-rounds { --accent: 162, 235, 219; }
.feature-grid .feature-wishes { --accent: 255, 218, 85; }
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 20% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), .45), transparent);
  opacity: .55;
  transition: opacity .3s;
}
.feature-title { display: flex; align-items: center; gap: 13px; }
.feature-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: rgb(var(--accent));
  border: 1px solid rgba(var(--accent), .17);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(var(--accent), .12), rgba(var(--accent), .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.feature-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
.feature-grid .feature-title h2 { margin: 0; font-size: 27px; line-height: 1.2; }
.feature-grid .feature-description { max-width: none; margin-top: 20px; font-size: 14px; line-height: 1.75; }
.feature-scene { min-width: 0; height: 224px; flex: none; margin-top: auto; padding-top: 26px; pointer-events: none; user-select: none; }
.scene-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 2px 13px; color: #d0dcf1; font-size: 11px; font-weight: 800; }
.scene-tally { color: #93a6c5; font-size: 9px; font-weight: 400; }
.mini-task {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 63px;
  padding: 11px 13px;
  border: 1px solid rgba(184, 207, 246, .14);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(187, 210, 255, .08), rgba(187, 210, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 16px rgba(2, 7, 25, .08);
}
.mini-task + .mini-task { margin-top: 10px; }
.task-complete { opacity: .68; background: rgba(122, 159, 203, .035); }
.mini-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: #b9d3ff; border: 1px solid rgba(167, 199, 255, .5); border-radius: 7px; background: rgba(151, 190, 255, .12); }
.mini-check svg { width: 16px; height: 16px; stroke-width: 2; }
.mini-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.check-pending { border-color: rgba(163, 183, 219, .3); background: transparent; }
.mini-task-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-task-copy strong { color: #e7edf9; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mini-task-copy > span { color: #97a9c6; font-size: 10px; }
.mini-person { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; flex: none; border-radius: 50%; }
.mini-person svg { width: 14px; height: 14px; stroke-width: 1.6; }
.person-blue { color: #b9d3ff; background: rgba(132, 174, 246, .14); border: 1px solid rgba(132, 174, 246, .18); }
.person-mint { color: #b5e6d9; background: rgba(136, 222, 198, .10); border: 1px solid rgba(136, 222, 198, .17); }
.timer-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding-top: 19px; }
.mini-timer { position: relative; width: 140px; height: 140px; flex: none; border-radius: 50%; background: radial-gradient(circle, rgba(111, 210, 188, .055), transparent 68%); }
.timer-dial { width: 140px; height: 140px; }
.timer-outer { stroke: rgba(170, 230, 215, .08); stroke-width: 1; }
.timer-track { stroke: rgba(170, 230, 215, .11); stroke-width: 3; }
.timer-progress { stroke: url(#timer-mint); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 25; transform: rotate(-90deg); transform-origin: 70px 70px; }
.timer-value { display: flex; align-items: center; flex-direction: column; justify-content: center; position: absolute; inset: 0; }
.timer-value strong { color: #e2fff5; font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: -.06em; padding-right: 2px; }
.timer-value > span { color: #9cbebc; font-size: 10px; margin-top: 5px; }
.mini-time-options { display: flex; gap: 5px; border: 1px solid rgba(178, 230, 216, .11); padding: 4px; border-radius: 100px; background: rgba(4, 17, 34, .25); }
.mini-time-options span { display: grid; place-items: center; width: 45px; height: 26px; border-radius: 100px; font-size: 11px; font-weight: 800; color: #8fa9bc; }
.mini-time-options .time-selected { color: #152d36; background: linear-gradient(145deg, #baf5e5, #93d9c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.wish-scene { display: flex; align-items: center; justify-content: center; padding-top: 23px; }
.reward-ticket { width: 100%; max-width: 280px; border: 1px solid rgba(255, 222, 133, .20); border-radius: 20px; padding: 18px; background: linear-gradient(135deg, rgba(255, 219, 128, .065), rgba(255, 219, 128, .015)); box-shadow: inset 0 1px 0 rgba(255, 237, 188, .08), 0 15px 24px rgba(2, 7, 25, .13); }
.reward-heading { display: flex; align-items: center; justify-content: space-between; color: #c6b893; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.reward-heading svg { color: #ffde84; fill: rgba(255, 222, 132, .16); width: 16px; height: 16px; stroke-width: 1.4; }
.reward-name { display: flex; align-items: center; gap: 12px; margin: 17px 0 22px; }
.reward-art { display: grid; place-items: center; width: 42px; height: 42px; flex: none; color: #ffe5a0; border-radius: 12px; border: 1px solid rgba(255, 224, 143, .19); background: linear-gradient(135deg, rgba(255, 216, 107, .13), rgba(255, 216, 107, .03)); }
.reward-art svg { width: 22px; height: 22px; stroke-width: 1.4; }
.reward-name strong { font-size: 21px; font-weight: 900; letter-spacing: -.025em; color: #f9f0dc; }
.reward-count { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #a9a8ac; font-size: 9px; }
.reward-count > span:last-child { white-space: nowrap; color: #c9bd9e; }
.reward-count strong { color: #ffe199; font-size: 11px; }
.reward-progress { height: 4px; margin-top: 10px; border-radius: 10px; background: rgba(255, 223, 151, .10); overflow: hidden; }
.reward-progress i { display: block; width: 60%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c9a95e, #ffe6a5); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .feature-grid .feature-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent), .34); box-shadow: inset 0 1px 0 rgba(var(--accent), .13), 0 15px 38px rgba(2, 7, 25, .17); }
  .feature-card:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .feature-card.scene-visible .feature-scene { animation: scene-arrive .7s ease-out both; }
  .feature-card.scene-visible .task-complete { animation: task-finish 1.5s ease-out both; }
  .feature-card.scene-visible .mini-check path { animation: task-tick .45s .65s ease-out both; }
  .feature-card.scene-visible .timer-progress { animation: timer-draw 1.25s .15s cubic-bezier(.22, .7, .3, 1) both; }
  .feature-card.scene-visible .reward-progress i { animation: wish-fill 1.1s .2s cubic-bezier(.22, .7, .3, 1) both; }
}
@keyframes scene-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes task-finish { 0%, 50% { opacity: 1; } 100% { opacity: .68; } }
@keyframes task-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes timer-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 25; } }
@keyframes wish-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width:1100px) {
  .feature-grid .feature-card { padding: 25px 22px 22px; }
  .feature-title { gap: 10px; }
  .feature-grid .feature-title h2 { font-size: 24px; }
  .feature-icon { width: 35px; height: 35px; border-radius: 11px; }
  .feature-grid .feature-description { font-size: 13px; }
  .mini-task { padding-inline: 10px; gap: 8px; }
  .scene-tally { font-size: 8px; }
  .reward-ticket { padding: 15px; }
}
@media (min-width:621px) and (max-width:900px) {
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-grid .feature-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 30px; padding: 26px; }
  .feature-title { align-self: start; margin-top: 15px; }
  .feature-grid .feature-description { grid-column: 1; margin-top: 17px; max-width: 285px; font-size: 14px; }
  .feature-scene { grid-column: 2; grid-row: 1 / 3; margin: 0; height: 200px; padding-top: 0; }
  .task-scene { align-self: center; height: auto; }
  .timer-scene { gap: 8px; }
}
@media (max-width:620px) {
  .features { padding-top: 24px; padding-bottom: 52px; }
  .features > .section-label { margin-bottom: 20px; }
  .feature-grid { gap: 15px; }
  .feature-grid .feature-card,
  .feature-grid .feature-card:last-child { display: flex; padding: 24px 22px 22px; border-radius: 25px; }
  .feature-grid .feature-title h2 { font-size: 26px; }
  .feature-icon { width: 38px; height: 38px; border-radius: 12px; }
  .feature-title { gap: 12px; }
  .feature-grid .feature-description { margin-top: 16px; font-size: 14px; }
  .feature-scene { height: 216px; }
  .task-scene { max-width: 340px; width: 100%; align-self: center; }
  .scene-tally { font-size: 9px; }
}
@media (max-width:355px) {
  .feature-grid .feature-card,
  .feature-grid .feature-card:last-child { padding-inline: 18px; }
  .feature-grid .feature-title h2 { font-size: 24px; }
  .feature-grid .feature-description { font-size: 13px; }
  .mini-person { width: 25px; height: 25px; }
  .scene-tally { font-size: 8px; }
  .reward-name strong { font-size: 20px; }
  .reward-count { font-size: 8px; }
}
@media (prefers-reduced-transparency: reduce) {
  .feature-grid .feature-card { background: #14223e; }
}
@media (forced-colors: active) {
  .feature-card::before { display: none; }
  .feature-icon,.mini-check,.mini-person,.reward-art { border-color: currentColor; }
  .timer-progress { stroke: Highlight; }
  .reward-progress i { background: Highlight; }
}