/* ============================================================
   装饰层：雨滴 + 贴纸
   ------------------------------------------------------------
   两部分：
   1. 首页的雨滴（玻璃上的水珠效果），可以开关
   2. 相册的贴纸（胶带、小图案），让照片看着像贴墙上
   ============================================================ */

/* ==================================================
   一、雨天的窗（canvas 渲染）
   ------------------------------------------------------------
   不是 CSS 画的小圆点。真实的水珠是一小块球面透镜，
   透过它看到的是倒过来、缩小的世界 —— 那个效果只能靠 canvas 做。
   具体实现见 app/js/rain.js。

   这一层要压在照片上方、文字下方：
   底图是照片，水珠层盖在它上面，毛玻璃卡片再压在更上面。
   ================================================== */

.rain {
  position: fixed;
  inset: 0;
  z-index: -1;          /* 照片是 -2，卡片是 0 */
  pointer-events: none; /* 绝不能挡点击 */
  overflow: hidden;
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}

.rain.is-on {
  opacity: 1;
}

/* 真正画雨的那张画布 */
.rain-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 雨落在玻璃上的那层"冷"：给整个画面罩一点青灰
   和一点点暗角，像阴天的窗。这一层是氛围感的来源之一。 */
.rain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* 四角略暗，视线往中间聚 */
    radial-gradient(
      ellipse at 50% 45%,
      rgba(30, 48, 68, 0) 42%,
      rgba(22, 36, 52, .30) 100%
    ),
    /* 顶部冷光，像天光从上面漏下来 */
    linear-gradient(
      180deg,
      rgba(150, 185, 215, .16) 0%,
      rgba(120, 150, 180, .05) 34%,
      transparent 62%
    );
}

@media (prefers-reduced-motion: reduce) {
  /* 系统要求减少动态效果：雨层保留，但不让它持续动。
     这里只是不显示那层冷光，canvas 内部自己也会降速。 */
  .rain {
    transition: none;
  }
}

/* ==================================================
   二、贴纸
   贴在照片背板上的小装饰：胶带、心、星星。
   ================================================== */

/* 相册每张照片的"背板" —— 像贴墙上时后面垫的那张彩纸 */
.album__item {
  position: relative;
}

/* 背板：比照片大一圈，从四边露出来 */
.album__backing {
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  background: var(--backing, #FFE9F0);
  box-shadow: 0 2px 8px rgba(199, 91, 126, .12);
  z-index: -1;
  transform: rotate(var(--backing-tilt, 0deg));
}

/* 五种背板色，和数据里的小图案对应 */
.album__item[data-tone="0"] { --backing: #FFE9F0; --backing-tilt: -.8deg; }
.album__item[data-tone="1"] { --backing: #FFF6DA; --backing-tilt: .9deg; }
.album__item[data-tone="2"] { --backing: #E9F7F0; --backing-tilt: -.5deg; }
.album__item[data-tone="3"] { --backing: #F3ECFD; --backing-tilt: 1.1deg; }
.album__item[data-tone="4"] { --backing: #EAF3FC; --backing-tilt: -.9deg; }

/* 照片本体：盖住背板的大部分，四边露出彩纸。
   用 padding 撑开而不是 margin，这样点击区域还是整块。 */
.album__item {
  padding: 6px 6px 0;
  background: var(--paper);
  border: none;
  box-shadow:
    0 1px 0 rgba(122, 68, 88, .05),
    0 6px 16px rgba(199, 91, 126, .13);
  transform: rotate(var(--item-tilt, 0deg));
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* 每张照片歪一点点，像手贴的。角度固定，不用随机，免得每次刷新都在跳 */
.album__item[data-tone="0"] { --item-tilt: -.6deg; }
.album__item[data-tone="1"] { --item-tilt: .7deg; }
.album__item[data-tone="2"] { --item-tilt: -.4deg; }
.album__item[data-tone="3"] { --item-tilt: .8deg; }
.album__item[data-tone="4"] { --item-tilt: -.7deg; }

.album__item:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 1px 0 rgba(122, 68, 88, .06),
    0 12px 26px rgba(199, 91, 126, .2);
}

.album__img {
  border-radius: 3px;
}

/* --- 胶带：贴在照片上边缘，把照片"粘"在背板上 --- */

.album__tape {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 46px;
  height: 15px;
  margin-left: -23px;
  background: color-mix(in srgb, var(--butter) 82%, transparent);
  /* 撕口的锯齿 */
  clip-path: polygon(
    0 15%, 7% 0, 14% 15%, 21% 0, 28% 15%, 35% 0, 42% 15%,
    49% 0, 56% 15%, 63% 0, 70% 15%, 77% 0, 84% 15%, 91% 0,
    100% 15%, 100% 85%, 91% 100%, 84% 85%, 77% 100%, 70% 85%,
    63% 100%, 56% 85%, 49% 100%, 42% 85%, 35% 100%, 28% 85%,
    21% 100%, 14% 85%, 7% 100%, 0 85%
  );
  transform: rotate(-3deg);
  opacity: .9;
  z-index: 2;
  pointer-events: none;
}

/* 隔一张换个方向，避免整齐划一 */
.album__item:nth-child(2n) .album__tape {
  transform: rotate(3.5deg) translateX(6px);
  background: color-mix(in srgb, var(--pink) 85%, transparent);
}

.album__item:nth-child(3n) .album__tape {
  transform: rotate(-4deg) translateX(-5px);
  width: 38px;
  margin-left: -19px;
  background: color-mix(in srgb, var(--mint) 85%, transparent);
}

:root[data-mode="dark"] .album__tape {
  opacity: .55;
}

:root[data-mode="dark"] .album__backing {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  filter: brightness(.55) saturate(.8);
}

/* --- 小贴纸：贴在照片右下角或左下角的小图案 --- */



/* 照片外面的框：让贴纸有个稳定的参照物，
   不管照片多高，贴纸都贴在照片下沿，不会跑到文字上。 */
.album__frame {
  position: relative;
  display: block;
  line-height: 0;   /* 去掉 img 下面那条缝 */
}

/* 贴纸贴在照片左下角 */
.album__sticker {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 17px;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(122, 68, 88, .25));
  transform: rotate(var(--sticker-tilt, -8deg));
}

/* 隔一张挪一点，看着更随机 */
.album__item:nth-child(2n) .album__sticker {
  left: 11px;
  bottom: 10px;
}

.album__item:nth-child(3n) .album__sticker {
  left: 7px;
  bottom: 6px;
}

:root[data-mode="dark"] .album__sticker {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

@media (hover: none) {
  .album__sticker {
    font-size: 13px;
    opacity: .85;
  }
}

/* ==================================================
   四、设置页的滑杆和开关
   ================================================== */

.range-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.range {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

/* 轨道 */
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--pink) 0%,
    var(--pink-mid) 60%,
    var(--line-strong) 100%
  );
}

.range::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--pink) 0%,
    var(--pink-mid) 60%,
    var(--line-strong) 100%
  );
}

/* 滑块 */
.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pink-deep);
  box-shadow: 0 2px 6px rgba(199, 91, 126, .28);
  transition: transform .14s var(--ease-bounce);
}

.range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pink-deep);
  box-shadow: 0 2px 6px rgba(199, 91, 126, .28);
}

.range__value {
  flex: none;
  min-width: 2.2em;
  text-align: right;
  font-size: calc(13px * var(--scale));
  font-variant-numeric: tabular-nums;
  color: var(--pink-ink);
  font-weight: 600;
}

/* 开关 */
.row-switch {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.switch {
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 99px;
  background: var(--cream-deep);
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}

.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(122, 68, 88, .24);
  transition: transform .2s var(--ease-bounce);
}

.switch[aria-checked="true"] {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
}

.switch[aria-checked="true"] .switch__knob {
  transform: translateX(20px);
}


/* ==================================================
   三、点滴装饰：小圆点贴纸
   ================================================== */

/* 时间轴上偶尔冒出一个小星星，标出"这天特别" */
.moment__spark {
  position: absolute;
  right: -4px;
  top: -4px;
  font-size: 13px;
  line-height: 1;
  opacity: .8;
  pointer-events: none;
  transform: rotate(-10deg);
}

.moment--right .moment__spark {
  right: auto;
  left: -4px;
}

/* ==================================================
   五、装到桌面 的提示条
   ------------------------------------------------------------
   从底部滑上来的一条，不遮挡内容，点完就消失。
   看一年也只看一次，所以做得轻一点。
   ================================================== */

.install-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  box-shadow: 0 10px 32px rgba(122, 68, 88, .2);
  transform: translateY(calc(100% + 24px));
  transition: transform .34s var(--ease-out);
}

.install-bar.is-open {
  transform: translateY(0);
}

.install-bar__icon {
  flex: none;
  font-size: 22px;
  line-height: 1;
}

.install-bar__text {
  flex: 1 1 auto;
  min-width: 0;
}

.install-bar__title {
  font-family: var(--font-hand);
  font-size: calc(14px * var(--scale));
  color: var(--berry);
  line-height: 1.3;
}

.install-bar__hint {
  margin-top: 2px;
  font-size: calc(11.5px * var(--scale));
  color: var(--berry-soft);
  line-height: 1.4;
}

.install-bar__btn {
  flex: none;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--pink-deep);
  color: #fff;
  font: inherit;
  font-size: calc(13px * var(--scale));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.install-bar__close {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--berry-faint);
  font-size: 13px;
  cursor: pointer;
}

.install-bar__close:hover {
  background: var(--cream-deep);
}

/* 窄屏时说明文字太长，缩一点 */
@media (max-width: 360px) {
  .install-bar__hint {
    font-size: calc(10.5px * var(--scale));
  }
  .install-bar__btn {
    padding: 7px 11px;
  }
}