/* scraps — Tape, Polaroid, PaperNote, PressedFlower, Envelope,
   MemoryCard, TimelineScrap, stickers, sticky notes, waveform, art */

/* ── Tape ───────────────────────────────────── */
.tape {
  position: absolute;
  background: linear-gradient(
    100deg,
    rgba(226, 208, 168, 0.62),
    rgba(206, 184, 140, 0.5)
  );
  border-left: 1px dashed rgba(255, 255, 255, 0.35);
  border-right: 1px dashed rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 5px rgba(60, 44, 24, 0.14);
}

.tape--top {
  top: calc(var(--pw) * -0.02);
  left: 50%;
  width: calc(var(--pw) * 0.34);
  height: calc(var(--pw) * 0.085);
  transform: translateX(-50%) rotate(-2deg);
}

.tape--skew {
  transform: translateX(-50%) rotate(3deg);
}

.tape--corner {
  top: calc(var(--pw) * -0.03);
  left: calc(var(--pw) * -0.05);
  width: calc(var(--pw) * 0.26);
  height: calc(var(--pw) * 0.075);
  transform: rotate(-38deg);
  z-index: 2;
}

/* ── art (illustrations, feathered into the paper) ── */
.art {
  display: block;
  align-self: center;
  width: calc(var(--pw) * 0.36);
  max-height: 38%;
  object-fit: contain;
  height: auto;
  flex: 0 1 auto;
  min-height: 0;
  mix-blend-mode: multiply;
  filter: saturate(0.92) contrast(1.04) brightness(1.04);
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 48%,
    rgba(0, 0, 0, 0.55) 66%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 48%,
    rgba(0, 0, 0, 0.55) 66%,
    transparent 76%
  );
}

.art--wide {
  width: calc(var(--pw) * 0.56);
}

.art--sm {
  width: calc(var(--pw) * 0.32);
}

.art--dark {
  width: calc(var(--pw) * 0.78);
  max-height: 52%;
  mix-blend-mode: screen;
  opacity: 0.92;
  filter: none;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 55%,
    #000 45%,
    rgba(0, 0, 0, 0.5) 68%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse at 50% 55%,
    #000 45%,
    rgba(0, 0, 0, 0.5) 68%,
    transparent 80%
  );
}

/* ── Polaroid — can be picked up and set back down ── */
.polaroid {
  position: relative;
  z-index: 1;
  align-self: center;
  width: calc(var(--pw) * 0.5);
  max-height: 48%;
  padding: calc(var(--pw) * 0.03) calc(var(--pw) * 0.03) calc(var(--pw) * 0.08);
  background: #fdfaf3;
  box-shadow: 0 10px 22px rgba(46, 34, 18, 0.16);
  transform: rotate(-3deg);
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.55s ease;
}

.polaroid:hover {
  transform: rotate(-2.2deg) translateY(-4px);
  box-shadow: 0 18px 34px rgba(46, 34, 18, 0.2);
}

.polaroid.is-front {
  z-index: 4;
  transform: rotate(0deg) translateY(-8px) scale(1.05);
  box-shadow: 0 26px 48px rgba(46, 34, 18, 0.26);
}

.polaroid__img {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #6a5a48, #38302a);
}

.polaroid__img svg {
  width: 76%;
  height: 76%;
}

.polaroid__cap {
  margin-top: calc(var(--pw) * 0.022);
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.058);
  color: #4a3f33;
  text-align: center;
}

/* ── PaperNote ──────────────────────────────── */
.note {
  display: grid;
  gap: calc(var(--pw) * 0.028);
  max-height: 100%;
  overflow: hidden;
  padding: calc(var(--pw) * 0.06) calc(var(--pw) * 0.055);
  background: linear-gradient(158deg, #fdf9ef, #f5edda);
  border: 1px solid rgba(150, 116, 70, 0.2);
  box-shadow: 0 10px 22px rgba(60, 44, 24, 0.11);
  font-family: "Cormorant Garamond", serif;
  font-size: calc(var(--pw) * 0.046);
  line-height: 1.6;
  color: var(--ink);
  transform: rotate(-0.6deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease;
}

.note:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 18px 32px rgba(60, 44, 24, 0.15);
}

.note .hand {
  font-size: calc(var(--pw) * 0.062);
}

/* ── PressedFlower ──────────────────────────── */
.pressed {
  position: relative;
  align-self: center;
  width: calc(var(--pw) * 0.36);
  max-height: 36%;
  color: rgba(140, 106, 62, 0.75);
  padding: calc(var(--pw) * 0.03);
  filter: saturate(0.7);
}

.pressed svg {
  display: block;
  width: 100%;
  height: auto;
}

.pressed__bloom {
  color: rgba(147, 83, 76, 0.8);
  stroke: currentColor;
}

.pressed__tape {
  position: absolute;
  width: calc(var(--pw) * 0.11);
  height: calc(var(--pw) * 0.045);
  background: rgba(226, 208, 168, 0.55);
  box-shadow: 0 1px 3px rgba(60, 44, 24, 0.12);
}

.pressed__tape--l {
  top: 18%;
  left: calc(var(--pw) * -0.03);
  transform: rotate(-28deg);
}

.pressed__tape--r {
  bottom: 14%;
  right: calc(var(--pw) * -0.03);
  transform: rotate(-24deg);
}

/* ── Envelope ───────────────────────────────── */
.env {
  position: relative;
  align-self: center;
  width: calc(var(--pw) * 0.62);
  margin: calc(var(--pw) * 0.015) 0;
}

.env__note {
  position: absolute;
  inset: 8%;
  z-index: 3;
  margin: 0;
  padding: calc(var(--pw) * 0.04);
  overflow: hidden;
  background: #fdf8ec;
  border: 1px solid rgba(150, 116, 70, 0.25);
  box-shadow: 0 10px 22px rgba(60, 44, 24, 0.14);
  font-family: "Cormorant Garamond", serif;
  font-size: calc(var(--pw) * 0.04);
  line-height: 1.5;
  color: var(--ink);
  animation: slipOut 0.6s ease both;
}

.env__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
}

.env__body {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #ede0c6, #ddcba7);
  border: 1px solid rgba(150, 116, 70, 0.35);
  box-shadow: 0 10px 22px rgba(60, 44, 24, 0.18);
}

.env__body::before,
.env__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(200deg, rgba(0, 0, 0, 0.05), transparent);
}

.env__body::before {
  left: 0;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

.env__body::after {
  right: 0;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

.env__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56%;
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
  background: linear-gradient(180deg, #e7d8ba, #d7c39e);
  border: 1px solid rgba(150, 116, 70, 0.35);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.env.is-open .env__flap {
  transform: rotateX(-172deg);
}

.env__seal {
  position: absolute;
  top: 46%;
  left: 50%;
  width: calc(var(--pw) * 0.1);
  height: calc(var(--pw) * 0.1);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a9564c, #7b3730);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  transition: opacity 0.4s ease;
}

.env.is-open .env__seal {
  opacity: 0;
}

.env__label {
  position: absolute;
  bottom: calc(var(--pw) * 0.03);
  left: 0;
  right: 0;
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.05);
  color: rgba(90, 66, 38, 0.75);
}

.env.is-open .env__label {
  opacity: 0;
}

@keyframes slipOut {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* ── MemoryCard — small paper scraps, each slightly off-square ── */
.cards {
  display: grid;
  gap: calc(var(--pw) * 0.03);
  margin: calc(var(--pw) * 0.01) 0;
}

.memory {
  position: relative;
  background: linear-gradient(160deg, #fdf9ef, #f4ecdb);
  border: 1px solid rgba(154, 112, 67, 0.18);
  padding: calc(var(--pw) * 0.042) calc(var(--pw) * 0.045);
  box-shadow: 0 6px 16px rgba(46, 34, 18, 0.08);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease;
}

.memory:nth-child(odd) {
  transform: rotate(-0.7deg);
}

.memory:nth-child(even) {
  transform: rotate(0.6deg);
  margin-left: calc(var(--pw) * 0.035);
}

.memory:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 14px 26px rgba(46, 34, 18, 0.13);
}

.memory__when {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: calc(var(--pw) * 0.046);
  color: var(--gold);
  margin-bottom: calc(var(--pw) * 0.012);
}

.memory__text {
  font-size: calc(var(--pw) * 0.038);
  line-height: 1.62;
  color: var(--ink-soft);
}

/* ── TimelineScrap ──────────────────────────── */
.tl {
  list-style: none;
  position: relative;
  display: grid;
  gap: calc(var(--pw) * 0.038);
  padding-left: calc(var(--pw) * 0.1);
  margin: calc(var(--pw) * 0.01) 0;
}

.tl::before {
  content: "";
  position: absolute;
  left: calc(var(--pw) * 0.032);
  top: calc(var(--pw) * 0.02);
  bottom: calc(var(--pw) * 0.02);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(166, 124, 69, 0.5) 12%,
    rgba(166, 124, 69, 0.5) 88%,
    transparent
  );
}

.tl__item {
  position: relative;
}

.tl__dot {
  position: absolute;
  left: calc(var(--pw) * -0.076);
  top: calc(var(--pw) * 0.018);
  width: calc(var(--pw) * 0.02);
  height: calc(var(--pw) * 0.02);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(166, 124, 69, 0.15);
}

.tl__date {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: calc(var(--pw) * 0.045);
  color: var(--gold);
}

.tl__what {
  display: block;
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.055);
  line-height: 1.3;
  color: var(--ink);
}

/* ── stickers ───────────────────────────────── */
.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pw) * 0.022);
  justify-content: center;
  margin: calc(var(--pw) * 0.02) 0;
}

.sticker {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.052);
  line-height: 1.15;
  text-align: center;
  color: #4a3f33;
  background: #fbf5e8;
  border: 1px solid rgba(150, 116, 70, 0.24);
  padding: calc(var(--pw) * 0.018) calc(var(--pw) * 0.032);
  box-shadow: 0 5px 12px rgba(60, 44, 24, 0.09);
  transform: rotate(-2deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s ease;
}

.sticker:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 12px 22px rgba(60, 44, 24, 0.14);
}

.sticker small {
  display: block;
  font-size: 0.72em;
  color: var(--gold);
}

.sticker--b {
  transform: rotate(2.5deg);
  background: #f8f0e2;
}

.sticker--c {
  transform: rotate(-1deg);
  background: #f9f3e6;
}

/* ── sticky notes ───────────────────────────── */
.notes {
  display: grid;
  gap: calc(var(--pw) * 0.028);
  margin: calc(var(--pw) * 0.02) 0;
}

.note-sq {
  text-align: center;
  padding: calc(var(--pw) * 0.03) calc(var(--pw) * 0.035);
  background: #f6efdd;
  border: 1px solid rgba(150, 116, 70, 0.2);
  box-shadow: 0 8px 18px rgba(60, 44, 24, 0.12);
  transform: rotate(-1.4deg);
}

.note-sq span {
  display: block;
  font-family: "Amiri", serif;
  font-size: calc(var(--pw) * 0.06);
  color: var(--ink);
}

.note-sq small {
  font-family: "Caveat", cursive;
  font-size: calc(var(--pw) * 0.05);
  color: var(--gold);
}

.note-sq--b {
  transform: rotate(1.6deg);
  background: #f8f2e3;
}

.note-sq--c {
  transform: rotate(-0.6deg);
}

/* ── waveform ───────────────────────────────── */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pw) * 0.011);
  height: calc(var(--pw) * 0.13);
  margin: calc(var(--pw) * 0.015) 0;
}

.wave span {
  width: calc(var(--pw) * 0.008);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  animation: pulse 1.9s ease-in-out infinite;
}

.wave span:nth-child(3n) {
  animation-duration: 2.4s;
}
.wave span:nth-child(4n) {
  animation-duration: 1.6s;
}
.wave span:nth-child(odd) {
  animation-delay: -0.7s;
}
.wave span:nth-child(5n) {
  animation-delay: -1.2s;
}

@keyframes pulse {
  0%,
  100% {
    height: 16%;
    opacity: 0.5;
  }
  50% {
    height: 100%;
    opacity: 1;
  }
}

/* ── page atmospherics ──────────────────────── */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      1.2px 1.2px at 18% 14%,
      rgba(255, 244, 220, 0.8),
      transparent
    ),
    radial-gradient(1px 1px at 72% 10%, rgba(255, 244, 220, 0.6), transparent),
    radial-gradient(1px 1px at 42% 26%, rgba(255, 244, 220, 0.45), transparent),
    radial-gradient(1.4px 1.4px at 84% 32%, rgba(255, 244, 220, 0.5), transparent),
    radial-gradient(1px 1px at 28% 44%, rgba(255, 244, 220, 0.35), transparent);
}

.ayah__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 22%,
    rgba(207, 169, 108, 0.3),
    transparent 55%
  );
}

.petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.petals::before,
.petals::after {
  content: "";
  position: absolute;
  width: calc(var(--pw) * 0.045);
  height: calc(var(--pw) * 0.028);
  border-radius: 60% 10% 60% 10%;
  background: rgba(196, 138, 128, 0.4);
  animation: fall 9s linear infinite;
}

.petals::before {
  left: 18%;
}

.petals::after {
  left: 74%;
  animation-duration: 12s;
  animation-delay: -4s;
  background: rgba(207, 169, 108, 0.45);
}

@keyframes fall {
  0% {
    transform: translateY(-12%) rotate(0deg);
    opacity: 0;
  }
  12%,
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(680%) rotate(320deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave span,
  .petals::before,
  .petals::after,
  .env__note {
    animation: none;
  }
}