/*
 * theme-refresh.css — 「薄荷 × 蜜桃」界面美化覆盖层(设计稿)
 *
 * 用法:在 index.html 中 styles.css 之后引入即可生效,删除该行即回滚。
 *   <link rel="stylesheet" href="/styles.css" />
 *   <link rel="stylesheet" href="/theme-refresh.css" />
 * 正式启用时需把本文件加入 service-worker.js 预缓存列表并提升 CACHE_VERSION。
 *
 * 设计要点:
 *   1. 保留薄荷绿主色,新增蜜桃/玫瑰暖色作点缀,更有恋爱手账气质
 *   2. 大标题统一衬线字体,数字与标题更有「纪念册」感
 *   3. 卡片统一奶玻璃质感:更大圆角、内侧高光、彩色柔和投影
 *   4. 功能中心每个入口一个专属色的图标块
 *   5. 时间轴改为渐变线 + 爱心节点,首页新增漂浮光斑与心跳天数
 *   6. 深色模式同步精修;所有动画均尊重 prefers-reduced-motion
 */

/* ============ 1. 设计变量 ============ */

:root {
  --bg: #f6f8f2;
  --paper: #fffdfa;
  --paper-warm: #fdf1e7;
  --surface: #fffefb;
  --surface-strong: #eff5ee;
  --text: #22322c;
  --muted: #5f7369;
  --muted-strong: #435850;
  --line: #dfe8dc;
  --ink: #22322c;
  --accent: #3ba58e;
  --accent-dark: #1f7a63;
  --accent-soft: #d9f0e6;
  --danger: #d75f76;
  --focus: #17705f;

  /* 新增的暖色系统 */
  --rose: #e07d95;
  --rose-dark: #c05672;
  --rose-soft: #fbe7ec;
  --peach: #eda173;
  --peach-dark: #c77e4a;
  --peach-soft: #fdeee1;
  --sky: #6fadd3;
  --sky-soft: #e3f1f9;
  --gold: #d3a253;
  --gold-soft: #f9f0da;
  --violet: #9d87cb;
  --violet-soft: #eee9f8;

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;

  --shadow: 0 18px 44px -22px rgba(31, 105, 88, 0.30);
  --soft-shadow: 0 10px 26px -18px rgba(31, 105, 88, 0.26);
  --card-shadow: 0 16px 38px -24px rgba(31, 105, 88, 0.28);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --grad-accent: linear-gradient(135deg, #4cb89e, #2b8d74);
  --grad-warm: linear-gradient(90deg, var(--accent), var(--rose));
}

:root[data-theme="dark"] {
  --bg: #0e1714;
  --paper: #16221d;
  --paper-warm: #23302a;
  --surface: #16221d;
  --surface-strong: #1e2d26;
  --text: #eef7f2;
  --muted: #a9c0b6;
  --muted-strong: #c7dbd2;
  --line: #2e463c;
  --ink: #eef7f2;
  --accent: #63c6ae;
  --accent-dark: #8fe2cc;
  --accent-soft: #1f4237;
  --focus: #9bead9;

  --rose: #e08ea3;
  --rose-dark: #f0aebe;
  --rose-soft: #43242e;
  --peach: #e6a97e;
  --peach-dark: #f0c39c;
  --peach-soft: #3e2c1e;
  --sky: #7db6d9;
  --sky-soft: #1d3341;
  --gold: #d9b06a;
  --gold-soft: #3c2f19;
  --violet: #b3a0da;
  --violet-soft: #2d2740;

  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
  --soft-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.72);
  --card-shadow: 0 16px 38px -22px rgba(0, 0, 0, 0.76);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --grad-accent: linear-gradient(135deg, #3f9d85, #26705c);
}

/* ============ 2. 全局基底 ============ */

body {
  background:
    radial-gradient(circle at 10% 6%, rgba(120, 205, 185, 0.32), transparent 40%),
    radial-gradient(circle at 92% 94%, rgba(244, 187, 158, 0.26), transparent 42%),
    radial-gradient(rgba(46, 122, 103, 0.055) 1px, transparent 1.4px),
    var(--bg);
  background-size: auto, auto, 26px 26px, auto;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 6%, rgba(52, 116, 99, 0.4), transparent 42%),
    radial-gradient(circle at 92% 94%, rgba(122, 76, 61, 0.22), transparent 44%),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px),
    var(--bg);
  background-size: auto, auto, 26px 26px, auto;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.eyebrow,
#appContent > .topbar .eyebrow,
.today-kicker,
.easter-hero-kicker {
  color: var(--accent);
  letter-spacing: 0.3em;
  font-weight: 800;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.section-heading h2,
.settings-form h2,
.auth-card h2,
.weather-panel-head h2 {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#appContent > .topbar h1,
.hub-card strong {
  color: var(--ink);
}

/* ============ 3. 按钮 ============ */

button {
  border-width: 1px;
  font-weight: 700;
  box-shadow: 0 4px 14px -10px rgba(31, 105, 88, 0.35);
}

button:hover {
  box-shadow: var(--soft-shadow);
}

.primary {
  border: 0;
  background: var(--grad-accent);
  color: #fff;
  box-shadow:
    0 12px 26px -12px rgba(43, 141, 116, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.primary:hover {
  background: var(--grad-accent);
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 16px 30px -12px rgba(43, 141, 116, 0.72);
}

:root[data-theme="dark"] .primary {
  color: #eafff7;
}

.ghost,
.danger {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

/* 下方多处 color-mix 均先写一行纯变量兜底,老浏览器忽略 color-mix 时仍是正确的深浅色 */

.ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.danger:hover {
  background: var(--rose-soft);
}

.enter-button {
  min-height: 52px;
  padding: 0 30px;
  background: var(--grad-accent);
  font-size: 1.02rem;
  box-shadow:
    0 16px 32px -14px rgba(43, 141, 116, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.enter-button::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms ease;
}

.enter-button:hover {
  background: var(--grad-accent);
  filter: brightness(1.07);
}

.enter-button:hover::after {
  transform: translateX(4px);
}

.light-button {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(4px);
}

/* ============ 4. 输入控件 ============ */

input,
select,
textarea {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  background: var(--paper);
  padding: 12px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ============ 5. 首页 ============ */

.home-screen {
  background:
    radial-gradient(circle at 16% 12%, rgba(126, 209, 188, 0.5), transparent 44%),
    radial-gradient(circle at 86% 88%, rgba(247, 196, 169, 0.42), transparent 46%),
    linear-gradient(165deg, #f7faf3 0%, #edf6ef 52%, #fdf0e6 100%);
}

:root[data-theme="dark"] .home-screen {
  background:
    radial-gradient(circle at 16% 12%, rgba(52, 116, 99, 0.5), transparent 46%),
    radial-gradient(circle at 86% 88%, rgba(122, 76, 61, 0.3), transparent 48%),
    linear-gradient(165deg, #101a16 0%, #0e1714 55%, #171712 100%);
}

.home-screen::before,
.home-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.home-screen::before {
  top: -120px;
  left: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(99, 198, 174, 0.32), transparent 68%);
}

.home-screen::after {
  right: -120px;
  bottom: -140px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(240, 169, 134, 0.3), transparent 68%);
}

:root[data-theme="dark"] .home-screen::before {
  background: radial-gradient(circle, rgba(63, 157, 133, 0.24), transparent 68%);
}

:root[data-theme="dark"] .home-screen::after {
  background: radial-gradient(circle, rgba(180, 106, 84, 0.2), transparent 68%);
}

.home-copy .eyebrow {
  letter-spacing: 0.42em;
  color: var(--accent-dark);
}

.home-copy h1 {
  font-family: var(--font-display);
  background: linear-gradient(120deg, var(--accent-dark) 20%, var(--accent) 60%, var(--rose) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-dark);
}

.opening-line {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: 0.04em;
}

.home-photo {
  border: 8px solid rgba(255, 255, 255, 0.92);
  border-radius: clamp(18px, 3vw, 24px);
  box-shadow:
    0 30px 64px -26px rgba(31, 105, 88, 0.42),
    0 10px 24px -12px rgba(31, 105, 88, 0.28);
  transform: rotate(-1.1deg);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.home-photo:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow:
    0 36px 72px -26px rgba(31, 105, 88, 0.46),
    0 12px 26px -12px rgba(31, 105, 88, 0.3);
}

:root[data-theme="dark"] .home-photo {
  border-color: rgba(34, 48, 42, 0.95);
}

.home-days {
  gap: 12px;
  padding: 10px 26px;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border: 1px solid var(--rose-soft);
  box-shadow: 0 10px 24px -12px rgba(192, 86, 114, 0.3);
  backdrop-filter: blur(6px);
}

.home-days::before {
  content: "♥";
  color: var(--rose);
  font-size: 1.05rem;
  line-height: 1;
}

.home-days span {
  color: var(--muted);
}

.home-days strong {
  font-family: var(--font-display);
  color: var(--rose-dark);
}

/* ============ 6. 页面骨架与标题栏 ============ */

.topbar h1 {
  font-family: var(--font-display);
}

/* ============ 7. 概览数字卡 ============ */

.summary-grid {
  gap: 16px;
}

.metric {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  box-shadow: var(--card-shadow), var(--card-highlight);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.metric:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--card-highlight);
}

.metric strong {
  font-family: var(--font-display);
  font-weight: 800;
}

#appContent .metric:nth-child(1) {
  background: linear-gradient(160deg, var(--accent-soft), var(--paper) 88%);
}

#appContent .metric:nth-child(1) strong {
  color: var(--accent-dark);
}

#appContent .metric:nth-child(2) {
  background: linear-gradient(160deg, var(--peach-soft), var(--paper) 88%);
}

#appContent .metric:nth-child(2) strong {
  color: var(--peach-dark);
}

#appContent .metric:nth-child(3) {
  background: linear-gradient(160deg, var(--sky-soft), var(--paper) 90%);
}

/* ============ 8. 功能中心 ============ */

.hub-grid {
  gap: 16px;
}

.hub-card {
  position: relative;
  gap: 10px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  padding: 20px;
  box-shadow: var(--card-shadow), var(--card-highlight);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.hub-card::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--accent);
  font-weight: 800;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.hub-card:hover {
  border-color: var(--hub-color, var(--accent));
  border-color: color-mix(in srgb, var(--hub-color, var(--accent)) 55%, transparent);
  transform: translateY(-4px);
  box-shadow: var(--shadow), var(--card-highlight);
}

.hub-card:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--hub-color, var(--accent));
}

.hub-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--hub-soft, var(--accent-soft));
  color: var(--hub-color, var(--accent-dark));
  font-size: 1.15rem;
  transform: rotate(-4deg);
  transition: transform 200ms ease;
}

.hub-card:hover .hub-icon {
  transform: rotate(2deg) scale(1.08);
}

.hub-card strong {
  font-size: 1.06rem;
}

/* 每个入口一个专属色 */
.hub-card[data-route="/moment/new"] { --hub-color: var(--accent-dark); --hub-soft: var(--accent-soft); }
.hub-card[data-route="/photos"]     { --hub-color: var(--sky);         --hub-soft: var(--sky-soft); }
.hub-card[data-route="/map"]        { --hub-color: #58a06e;            --hub-soft: #e2f2e4; }
.hub-card[data-route="/anniversary"]{ --hub-color: var(--rose);        --hub-soft: var(--rose-soft); }
.hub-card[data-route="/yearbook"]   { --hub-color: var(--gold);        --hub-soft: var(--gold-soft); }
.hub-card[data-route="/activity"]   { --hub-color: var(--violet);      --hub-soft: var(--violet-soft); }
.hub-card[data-route="/whispers"]   { --hub-color: var(--peach);       --hub-soft: var(--peach-soft); }
.hub-card[data-route="/plans"]      { --hub-color: #45a8a0;            --hub-soft: #def0ee; }
.hub-card[data-route="/weekly"]     { --hub-color: #7f97cf;            --hub-soft: #e8edf9; }
.hub-card[data-route="/weather"]    { --hub-color: var(--sky);         --hub-soft: var(--sky-soft); }
.hub-card[data-route="/dinner"]     { --hub-color: #d98a53;            --hub-soft: #fbeadd; }
.hub-card[data-route="/settings"]   { --hub-color: #7e968c;            --hub-soft: #e9f0ec; }

:root[data-theme="dark"] .hub-card[data-route="/map"]      { --hub-soft: #1e3a2a; }
:root[data-theme="dark"] .hub-card[data-route="/plans"]    { --hub-soft: #1c3a37; }
:root[data-theme="dark"] .hub-card[data-route="/weekly"]   { --hub-soft: #252e45; }
:root[data-theme="dark"] .hub-card[data-route="/dinner"]   { --hub-soft: #3e2a1a; }
:root[data-theme="dark"] .hub-card[data-route="/settings"] { --hub-soft: #24322c; }

.hub-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-strong);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.hub-group h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ============ 9. 今天的我们 ============ */

.today-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  box-shadow: var(--card-shadow), var(--card-highlight);
}

.today-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 46px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: var(--grad-warm);
  opacity: 0.85;
}

.today-kicker {
  letter-spacing: 0.22em;
}

.today-list-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.today-memory-item {
  border-radius: var(--radius-md);
  box-shadow: 0 12px 26px -16px rgba(31, 105, 88, 0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.today-memory-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 32px -16px rgba(31, 105, 88, 0.48);
}

/* ============ 10. 时间线与记录卡 ============ */

.timeline {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  box-shadow: var(--card-shadow), var(--card-highlight);
}

.timeline::before {
  width: 2px;
  border-left: 0;
  background: linear-gradient(180deg, transparent, var(--accent) 10%, var(--rose) 90%, transparent);
  opacity: 0.45;
}

.moment-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  padding: 16px;
  box-shadow: var(--card-shadow), var(--card-highlight);
}

.moment-card::before {
  content: "♥";
  position: absolute;
  top: 26px;
  left: calc(clamp(34px, 5vw, 62px) - clamp(18px, 3vw, 30px) - clamp(50px, 7vw, 84px) - 10px);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rose-soft);
  border-radius: 50%;
  background: var(--paper);
  color: var(--rose);
  font-size: 0.72rem;
  line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(192, 86, 114, 0.4);
}

.moment-card:hover {
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.moment-media {
  border: 5px solid var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px -14px rgba(31, 105, 88, 0.4);
}

:root[data-theme="dark"] .moment-media {
  border-color: #223730;
}

.moment-meta time {
  border-color: var(--rose-soft);
  background: var(--rose-soft);
  color: var(--rose-dark);
  font-weight: 800;
}

.tag {
  font-weight: 800;
}

.moment-body h3 {
  font-family: var(--font-display);
}

.timeline-sort button.active {
  border-color: var(--accent);
  background: var(--grad-accent);
}

/* ============ 11. 贴条墙 ============ */

.whisper-note {
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 27px,
    rgba(34, 50, 44, 0.055) 27px,
    rgba(34, 50, 44, 0.055) 28px
  );
  box-shadow: 0 16px 30px -20px rgba(36, 55, 51, 0.5);
}

.whisper-note:hover {
  transform: translateY(-5px) rotate(0deg);
}

:root[data-theme="dark"] .whisper-note {
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 27px,
    rgba(255, 255, 255, 0.05) 27px,
    rgba(255, 255, 255, 0.05) 28px
  );
}

:root[data-theme="dark"] .whisper-note {
  --note-bg: #22312a;
  --note-border: #476457;
  --note-tag: #2d4238;
  --note-tape: rgba(84, 128, 112, 0.6);
  color: var(--text);
}

:root[data-theme="dark"] .whisper-note.tag-love {
  --note-bg: #382229;
  --note-border: #7c4a58;
  --note-tag: #4d2c36;
  --note-tape: rgba(163, 97, 113, 0.55);
}

:root[data-theme="dark"] .whisper-note.tag-miss {
  --note-bg: #1f2f3c;
  --note-border: #4a6c86;
  --note-tag: #2a4152;
  --note-tape: rgba(96, 137, 168, 0.5);
}

:root[data-theme="dark"] .whisper-note.tag-praise {
  --note-bg: #363019;
  --note-border: #7d6c33;
  --note-tag: #4a4122;
  --note-tape: rgba(169, 147, 74, 0.5);
}

:root[data-theme="dark"] .whisper-note.tag-complaint {
  --note-bg: #2f2a24;
  --note-border: #6a5c4c;
  --note-tag: #40382e;
  --note-tape: rgba(138, 121, 100, 0.5);
}

:root[data-theme="dark"] .whisper-note.tag-grievance {
  --note-bg: #2c2436;
  --note-border: #64517e;
  --note-tag: #3c3050;
  --note-tape: rgba(140, 118, 172, 0.5);
}

/* ============ 12. 照片墙 ============ */

.photo-card {
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px -16px rgba(31, 105, 88, 0.35);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.photo-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 30px -16px rgba(31, 105, 88, 0.45);
}

/* ============ 13. 表单卡与登录卡 ============ */

.settings-form,
.auth-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  box-shadow: var(--card-shadow), var(--card-highlight);
}

.auth-card {
  backdrop-filter: blur(8px);
}

/* 原版把登录/改密输入框写死为白底,深色模式下刺眼 */
.auth-card input,
.auth-card select,
.password-form input {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

/* 原版排序按钮写死半透明白底,深色模式下同样刺眼(:not(.active) 避免盖掉选中态渐变) */
:root[data-theme="dark"] .timeline-sort button:not(.active) {
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--muted);
}

/* ============ 14. 移动端底栏 ============ */

@media (max-width: 860px) {
  .mobile-nav:not(.hidden) {
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    min-height: 64px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    box-shadow: 0 18px 40px -18px rgba(21, 52, 44, 0.4);
    backdrop-filter: blur(14px);
  }

  :root[data-theme="dark"] .mobile-nav:not(.hidden) {
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  }

  .mobile-nav button {
    color: var(--muted);
  }

  .mobile-nav button.active {
    color: var(--accent-dark);
  }

  .mobile-nav .mobile-nav-add {
    background: var(--grad-accent);
    box-shadow: 0 10px 22px -8px rgba(43, 141, 116, 0.55);
  }

  body.has-mobile-nav {
    padding-bottom: 92px;
  }
}

/* 小屏时间轴节点对齐(覆盖原 -32px 微调) */
@media (max-width: 620px) {
  .moment-card::before {
    top: 22px;
    left: -37px;
  }
}

/* ============ 15. 动效 ============ */

@media (prefers-reduced-motion: no-preference) {
  .home-screen::before {
    animation: pv-float 16s ease-in-out infinite alternate;
  }

  .home-screen::after {
    animation: pv-float 19s ease-in-out infinite alternate-reverse;
  }

  .home-days::before {
    animation: pv-heartbeat 2.6s ease-in-out infinite;
  }

  @keyframes pv-float {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(28px, 22px, 0);
    }
  }

  @keyframes pv-heartbeat {
    0%,
    28%,
    100% {
      transform: scale(1);
    }

    10% {
      transform: scale(1.22);
    }

    19% {
      transform: scale(1.06);
    }
  }
}