/* A post card's look (`CardDecor.tsx`): behind the card's content, faint, never takes a click. */
.card-decor {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
  container-type: size;
  /* The theme's fall is sized in `--app-height` (a page); here it is the card's height */
  --app-height: 1cqh;
}
.card-decor * {
  pointer-events: none;
}
/* The frame round a themed card (`CardFrame`): outside the card's own box, its stem on the
   card's edge, so it grows out past the card and in over it. The box is padded by --p. */
.card-frame {
  --p: 14px;
  /* Beside the card: none on a phone (the card meets the screen's edge, so nothing sticks out sideways) */
  --px: 14px;
  --half: 22.5px;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s;
}
@media (max-width: 639px) {
  .card-frame { --px: 0px; overflow-x: clip; }
}
.card-frame[data-card-frame='christmas'] { --half: 15.4px; opacity: 0.9; }
/* In a modal on a phone: the screen's edge */
.card-frame[data-fixed] {
  --p: 4px;
  --px: 4px;
  position: fixed;
  /* Over everything on the screen, the post's comments and likes sheets (z-70) too */
  z-index: 80;
  animation: card-frame-in 0.4s ease-out;
}
@keyframes card-frame-in {
  from { opacity: 0; }
}
.card-frame * { pointer-events: none; }
.card-decor__edge,
.card-decor__corner,
.card-decor__garland {
  position: absolute;
}
.card-decor__edge,
.card-decor__garland { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
.card-decor__corner { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4)); }
.card-decor__edge--top, .card-decor__garland--top { top: calc(var(--p) - var(--half)); left: 0; }
.card-decor__edge--bottom, .card-decor__garland--bottom { bottom: calc(var(--p) - var(--half)); left: 0; transform: scaleY(-1); }
.card-decor__edge--left, .card-decor__garland--left { left: calc(var(--px) - var(--half)); top: 0; }
.card-decor__edge--right, .card-decor__garland--right { right: calc(var(--px) - var(--half)); top: 0; transform: scaleX(-1); }
.card-decor__corner--tl { top: var(--p); left: var(--px); }
.card-decor__corner--tr { top: var(--p); right: var(--px); transform: scaleX(-1); }
.card-decor__corner--bl { bottom: var(--p); left: var(--px); transform: scaleY(-1); }
.card-decor__corner--br { bottom: var(--p); right: var(--px); transform: scale(-1, -1); }
/* Thanksgiving's vines grow: each draws itself on, then its leaves unfurl from the stem */
.vine-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: vine-draw 1.4s ease-out both;
  animation-delay: var(--d, 0s);
}
@keyframes vine-draw {
  to { stroke-dashoffset: 0; }
}
.vine-sprig, .vine-pop {
  transform-origin: 0 0;
  animation: vine-leaf-grow 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
  animation-delay: var(--d, 0s);
}
.vine-pop { transform-box: fill-box; transform-origin: 50% 50%; }
/* Nothing grows until the frame is on screen */
.card-frame:not([data-grow]) :is(.vine-draw, .vine-leaf, .vine-sprig, .vine-pop, .card-decor__lit) { animation-play-state: paused; }
.card-decor__lit {
  position: absolute;
  inset: 0;
  animation: card-decor-lit 1s ease-out 1.6s both;
}
@keyframes card-decor-lit { from { opacity: 0; } }
.vine-leaf {
  /* Grows from the leaf's base, where it joins the stem */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: vine-leaf-grow 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
  animation-delay: var(--d, 0s);
}
@keyframes vine-leaf-grow {
  from { transform: scale(0); }
}
/* Christmas: the garland round the border, its lights lit and twinkling in turn */
.card-decor__leds { position: absolute; inset: 0; }
.card-decor__leds { animation: card-decor-twinkle 2.6s ease-in-out infinite alternate; }
.card-decor__leds--b { animation-delay: -1.3s; }
@keyframes card-decor-twinkle {
  from { opacity: 0.35; }
  to { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .card-decor__fall, .decor-gust { display: none; }
  .card-decor__leds { animation: none; opacity: 0.9; }
  .vine-draw, .vine-leaf, .vine-sprig, .vine-pop, .card-decor__lit { animation: none; stroke-dashoffset: 0; }
  .card-frame[data-fixed] { animation: none; }
}

/* A modal closing: the frame fades with it (the modal fades over 200ms) */
.card-frame[data-leaving] { opacity: 0; }

/* A grid tile's frame: drawn complete, nothing grows or twinkles */
.card-frame[data-still] :is(.vine-draw, .vine-leaf, .vine-sprig, .vine-pop, .card-decor__lit, .card-decor__leds) { animation: none; stroke-dashoffset: 0; }