/* Homepage feature explorer: miniature Calphii states */
.feature-explorer .section-intro { max-width: 760px; }
.feature-explorer .explorer {
  grid-template-columns: 190px 1fr;
  min-height: 590px;
  background: #0b1517;
}
.feature-explorer .explorer-menu { background: rgba(16, 29, 31, .72); }
.feature-explorer .explorer-tab { padding: 1rem .8rem; }
.feature-explorer .explorer-panel {
  grid-template-columns: minmax(0, 1.32fr) minmax(300px, .68fr);
  min-width: 0;
}
.feature-explorer .explorer-visual {
  min-height: 590px;
  padding: clamp(1rem, 2.4vw, 2rem);
  background:
    radial-gradient(circle at 42% 35%, rgba(70, 119, 96, .16), transparent 42%),
    #081214;
}
.feature-explorer .explorer-copy {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.4rem);
  background: rgba(16, 30, 32, .55);
}
.feature-explorer .feature-copy h3 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 3.2vw, 3.25rem);
  line-height: .98;
}
.feature-explorer .feature-copy > p:last-of-type { max-width: 38ch; }

.explorer-stage {
  position: relative;
  width: min(100%, 610px);
  aspect-ratio: 1.08;
  overflow: hidden;
  border: 1px solid rgba(225, 244, 235, .16);
  border-radius: 7px;
  background: #0d191b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 0 70px rgba(0, 0, 0, .2);
}
.feature-scene {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.explorer-panel[data-current="visuals"] [data-feature-scene="visuals"],
.explorer-panel[data-current="listen"] [data-feature-scene="listen"],
.explorer-panel[data-current="focus"] [data-feature-scene="focus"],
.explorer-panel[data-current="outside"] [data-feature-scene="outside"],
.explorer-panel[data-current="garden"] [data-feature-scene="garden"],
.explorer-panel[data-current="together"] [data-feature-scene="together"] {
  display: block;
  animation: explorer-scene-in .38s ease;
}
@keyframes explorer-scene-in {
  from { opacity: 0; transform: scale(.985); }
}

/* Visuals */
.scene-visuals {
  background:
    linear-gradient(90deg, rgba(4, 9, 10, .38), rgba(4, 9, 10, .08)),
    url('https://focus.calphii.com/assets/img/scenes/rainy-apartment-vibes.png') center/cover no-repeat;
}
.scene-visuals::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 10, 11, .64), transparent 48%);
}
.mini-space-label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: flex;
  gap: .45rem;
  align-items: center;
  color: #eff7f1;
  font-size: .68rem;
  font-weight: 600;
}
.mini-space-label span {
  padding: .3rem .45rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  color: #b8c7c0;
  background: rgba(6, 15, 16, .58);
  backdrop-filter: blur(10px);
}
.mini-float {
  position: absolute;
  z-index: 2;
  padding: .65rem .75rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
  color: #eaf4ed;
  background: rgba(7, 16, 17, .66);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
}
.mini-float small {
  display: block;
  margin-bottom: .2rem;
  color: #879790;
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mini-focus-card { top: 23%; right: 8%; width: 31%; }
.mini-focus-card strong { display: block; font: 500 2.15rem/1 "Zain", sans-serif; }
.mini-listen-card { left: 8%; bottom: 23%; width: 39%; }
.mini-listen-card span { font-size: .72rem; }
.mini-visual-controls {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  gap: .35rem;
  padding: .45rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 5px;
  background: rgba(6, 14, 15, .72);
  backdrop-filter: blur(14px);
}
.mini-visual-controls span {
  padding: .38rem .52rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  color: #9baba4;
  font-size: .57rem;
}
.mini-visual-controls .active { color: #f2f7f3; background: rgba(231, 244, 235, .12); }

/* Ambience & media */
.scene-listen {
  padding: 7%;
  background:
    radial-gradient(circle at 80% 8%, rgba(67, 116, 98, .24), transparent 36%),
    linear-gradient(145deg, #101e20, #091315 70%);
}
.mini-mixer {
  height: 100%;
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: rgba(14, 27, 29, .82);
}
.mini-panel-kicker { color: #768981; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.mini-panel-title { margin: .1rem 0 .8rem; color: #edf5ef; font: 500 1.55rem/1 "Zain", sans-serif; }
.mini-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; }
.mini-presets span {
  padding: .32rem .46rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  color: #9eada7;
  background: rgba(255, 255, 255, .025);
  font-size: .54rem;
}
.mini-presets .active { color: #edf5ef; background: rgba(181, 214, 193, .1); border-color: rgba(209, 232, 218, .2); }
.mixer-track {
  display: grid;
  grid-template-columns: 28px 1fr 72px;
  gap: .65rem;
  align-items: center;
  padding: .65rem 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.mixer-track-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(126, 162, 153, .12);
  font-size: .78rem;
}
.mixer-track strong { display: block; color: #dfe9e3; font-size: .68rem; font-weight: 500; }
.mixer-track small { display: block; color: #75867f; font-size: .52rem; }
.mixer-level { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mixer-level i { display: block; height: 100%; width: var(--level); background: #9bb8aa; }
.mini-now-playing {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .8rem;
  padding: .7rem;
  border-radius: 5px;
  background: rgba(5, 13, 14, .52);
}
.mini-now-playing .art { width: 34px; height: 34px; border-radius: 4px; background: linear-gradient(145deg, #6c796f, #253d39); }
.mini-now-playing strong { display: block; color: #eaf1ed; font-size: .65rem; }
.mini-now-playing small { color: #7f9189; font-size: .52rem; }
.mini-play { margin-left: auto; color: #dfe9e3; font-size: .72rem; }

/* Focus & organise */
.scene-focus { padding: 6%; background: linear-gradient(145deg, #101c1e, #091315); }
.focus-mini-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  grid-template-rows: .8fr 1.2fr;
  gap: .65rem;
  height: 100%;
}
.focus-mini-card {
  min-width: 0;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 5px;
  background: rgba(15, 29, 31, .72);
}
.focus-mini-card .label { color: #71847b; font-size: .52rem; letter-spacing: .13em; text-transform: uppercase; }
.focus-timer-mini { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.focus-timer-mini strong { color: #edf5ef; font: 500 3.2rem/1 "Zain", sans-serif; }
.focus-timer-mini span:last-child { color: #809089; font-size: .56rem; }
.task-board-mini { grid-row: 1 / 3; grid-column: 2; }
.board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .65rem; }
.board-column { padding: .45rem; border-radius: 4px; background: rgba(6, 14, 15, .42); }
.board-column b { display: block; margin-bottom: .4rem; color: #82928b; font-size: .49rem; font-weight: 500; }
.board-card { margin-top: .28rem; padding: .38rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 3px; color: #c8d3ce; background: rgba(255, 255, 255, .035); font-size: .49rem; line-height: 1.3; }
.inbox-mini { overflow: hidden; }
.inbox-mini .reminder { display: flex; justify-content: space-between; gap: .5rem; padding: .38rem 0; border-top: 1px solid rgba(255, 255, 255, .07); color: #bcc9c3; font-size: .52rem; }
.inbox-mini .reminder:first-of-type { margin-top: .5rem; }
.inbox-mini .reminder small { color: #6f8179; }

/* Outside world */
.scene-outside { padding: 6%; background: linear-gradient(145deg, #142226, #091416); }
.outside-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .65rem; height: 100%; }
.outside-card { position: relative; overflow: hidden; padding: .85rem; border: 1px solid rgba(255, 255, 255, .11); border-radius: 5px; background: rgba(13, 27, 29, .72); }
.outside-card .label { color: #72847c; font-size: .52rem; letter-spacing: .13em; text-transform: uppercase; }
.weather-mini { background: linear-gradient(160deg, rgba(71, 100, 105, .52), rgba(14, 29, 31, .82)); }
.weather-mini strong { display: block; margin-top: .5rem; color: #edf5ef; font: 500 3rem/1 "Zain", sans-serif; }
.weather-mini p { margin: .15rem 0 0 !important; color: #a8b7b1 !important; font-size: .56rem !important; }
.weather-rain { position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(102deg, transparent 0 25px, rgba(218, 237, 246, .8) 26px, transparent 27px 44px); transform: translateY(-12px); }
.echo-mini { display: flex; flex-direction: column; justify-content: center; }
.echo-mini .spark { margin-bottom: .5rem; color: #a7c7b5; font-size: 1rem; }
.echo-mini strong { color: #e0e9e4; font-size: .8rem; font-weight: 500; line-height: 1.45; }
.clock-list { margin-top: .55rem; }
.clock-row { display: flex; justify-content: space-between; padding: .42rem 0; border-top: 1px solid rgba(255, 255, 255, .07); color: #a8b6b0; font-size: .56rem; }
.clock-row time { color: #e4ece7; font-variant-numeric: tabular-nums; }
.map-mini { padding: 0; background: #0d1d20; }
.map-grid {
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image: linear-gradient(rgba(146, 172, 162, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(146, 172, 162, .08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.map-road { position: absolute; left: -10%; top: 54%; width: 125%; height: 2px; background: rgba(159, 185, 174, .22); transform: rotate(-18deg); }
.map-road.second { top: 35%; transform: rotate(24deg); }
.map-pin { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #9ed3ad; box-shadow: 0 0 12px rgba(109, 208, 140, .7); }
.map-pin.a { left: 32%; top: 38%; }.map-pin.b { right: 26%; bottom: 28%; }
.map-caption { position: absolute; left: .75rem; bottom: .65rem; color: #83958d; font-size: .5rem; }

/* Garden & little things */
.scene-garden { padding: 5%; background: linear-gradient(145deg, #13221d, #091410); }
.garden-feature-widget {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 60%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 6px;
  background: rgba(8, 18, 15, .8);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .28);
}
.garden-feature-widget header { padding: .55rem .7rem; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #96a79f; font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }
.garden-feature-widget .pixel-garden { height: 180px; margin: 0; }
.garden-feature-widget .garden-meta { padding: .7rem .8rem; }
.garden-feature-widget .garden-meta strong { display: block; color: #e5eee8; font-size: .68rem; }
.garden-feature-widget .garden-meta small { color: #75877f; font-size: .52rem; }
.pet-mini {
  position: absolute;
  right: 8%;
  top: 17%;
  width: 26%;
  padding: .8rem;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 5px;
  background: rgba(12, 25, 22, .82);
  text-align: center;
}
.pet-sprite { position: relative; width: 44px; height: 36px; margin: .45rem auto .35rem; background: #b9c6ad; box-shadow: inset -7px -7px rgba(54, 75, 61, .35); image-rendering: pixelated; }
.pet-sprite::before, .pet-sprite::after { content: ""; position: absolute; top: -8px; width: 12px; height: 12px; background: #b9c6ad; }
.pet-sprite::before { left: 3px; }.pet-sprite::after { right: 3px; }
.pet-mini small, .fire-mini small { color: #7d8f87; font-size: .5rem; }
.fire-mini {
  position: absolute;
  right: 8%;
  bottom: 12%;
  width: 27%;
  min-height: 32%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 65%, rgba(244, 147, 77, .22), transparent 45%), rgba(12, 21, 20, .78);
}
.fire-flame { position: relative; width: 28px; height: 38px; border-radius: 60% 40% 55% 45%; background: #dc8d58; transform: rotate(4deg); box-shadow: 0 0 25px rgba(240, 134, 73, .34); }
.fire-flame::after { content: ""; position: absolute; left: 8px; bottom: 4px; width: 12px; height: 20px; border-radius: 60% 40% 55% 45%; background: #f3c27f; }

/* Focus Together */
.scene-together {
  background:
    linear-gradient(0deg, rgba(5, 12, 13, .7), rgba(5, 12, 13, .15)),
    url('https://focus.calphii.com/assets/img/scenes/cosy-london-apartment.png') center/cover no-repeat;
}
.presence-cloud { position: absolute; inset: 0; }
.presence-avatar { position: absolute; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #e8f1eb; background: rgba(12, 28, 25, .82); box-shadow: 0 0 0 4px rgba(6, 16, 15, .28), 0 0 22px rgba(106, 191, 133, .18); font-size: .52rem; }
.presence-avatar::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 7px; height: 7px; border: 2px solid #14211f; border-radius: 50%; background: #8bd09f; }
.presence-avatar.you { left: 15%; top: 24%; width: 38px; height: 38px; }
.presence-avatar.a { left: 62%; top: 18%; }.presence-avatar.b { left: 75%; top: 51%; }.presence-avatar.c { left: 28%; top: 59%; }.presence-avatar.d { left: 48%; top: 39%; }
.presence-status {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  background: rgba(6, 15, 16, .76);
  backdrop-filter: blur(14px);
}
.presence-status strong { color: #e8f0eb; font-size: .62rem; font-weight: 500; }
.presence-status span { color: #81928a; font-size: .52rem; }
.reaction-float { position: absolute; left: 48%; top: 25%; padding: .4rem .5rem; border-radius: 999px; background: rgba(235, 244, 238, .9); box-shadow: 0 8px 25px rgba(0, 0, 0, .24); font-size: .78rem; animation: reaction-bob 2.8s ease-in-out infinite; }
@keyframes reaction-bob { 50% { transform: translateY(-8px); } }
.reply-chip { margin-left: auto; padding: .32rem .45rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; color: #aebdb6 !important; background: rgba(255, 255, 255, .04); }

@media (max-width: 900px) {
  .feature-explorer .explorer { grid-template-columns: 150px 1fr; }
  .feature-explorer .explorer-panel { grid-template-columns: 1fr; }
  .feature-explorer .explorer-visual { min-height: 430px; }
  .feature-explorer .explorer-copy { min-height: 280px; }
  .explorer-stage { width: min(100%, 560px); }
}
@media (max-width: 640px) {
  .feature-explorer .explorer { display: block; }
  .feature-explorer .explorer-visual { min-height: 350px; padding: .8rem; }
  .explorer-stage { width: 100%; }
  .feature-explorer .feature-copy h3 { font-size: 2.35rem; }
  .garden-feature-widget .pixel-garden { height: 125px; }
  .mixer-track { grid-template-columns: 25px 1fr 54px; gap: .45rem; }
  .mini-mixer { padding: .8rem; }
  .board-columns { gap: .2rem; }
  .board-column { padding: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-scene, .reaction-float { animation: none !important; }
}