/* ────────────────────────────────────────────────────────────────
   Applejack's Image Stash — "Hung Out To Dry"
   Two clotheslines: /mlp/ homegrown picks + live Derpibooru feed.
   ──────────────────────────────────────────────────────────────── */

.app-view--images {
  color: var(--ink);
}

/* The outdoor stage that houses the clotheslines.
   Background is the G4 Sweet Apple Acres farm scene; a warm wash on top
   pulls the bright pink sky into the site's earth-tone palette, and a soft
   bottom vignette keeps plaques and kraft tags readable above the grass. */
.images-stage {
  position: relative;
  margin: 16px 0 4px;
  padding: 26px 26px 32px;
  background:
    /* warm wash + soft top/bottom vignettes (top of the stack) */
    linear-gradient(180deg,
      rgba(247, 195, 130, .28) 0%,
      rgba(255, 225, 170, .10) 28%,
      transparent 55%,
      rgba(40, 22, 8, .28) 100%),
    /* faint paper grain so the flat vector art doesn't read digital-clean */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.06  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    /* the farm scene (bottom of the stack) */
    url("assets/farm.webp") center center / cover no-repeat;
  border: 2px solid var(--paper-edge, #bd823a);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(77, 42, 18, .20),
    inset 0 0 80px rgba(120, 70, 25, .18),
    0 4px 12px rgba(0,0,0,.18);
  overflow: hidden;
}

/* ─── Line block ─── */
.line {
  position: relative;
  z-index: 1;
  margin-bottom: 56px;
}
.line:last-of-type { margin-bottom: 18px; }

.line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 12px 14px;
}

.plaque {
  padding: 8px 22px 10px;
  color: #fbe9b8;
  text-align: center;
  border-radius: 4px;
  transform: rotate(-1deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.32);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.plaque small {
  display: block;
  font-family: "Rye", Georgia, serif;
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .8;
}
.plaque b {
  display: block;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 20px;
  letter-spacing: .04em;
  font-weight: 400;
}
.plaque--wood {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #b97e44, #7d4b1c);
  border: 3px solid #3d220e;
  box-shadow:
    inset 0 0 0 2px rgba(255,225,170,.18),
    0 6px 14px rgba(0,0,0,.32);
}
.plaque--enamel {
  color: #fff4d4;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, #2c4a6e, #1b3050);
  border: 3px solid #fff4d4;
  outline: 2px solid #0e1d34;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 6px 14px rgba(0,0,0,.32);
  transform: rotate(1deg);
}
.plaque--enamel small { color: #cfe2ff; }

/* Pager chip — small parchment pill so the page status reads cleanly
   against any spot in the farm scene (pink sky, dark trees, green grass). */
.line__pager {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px 6px;
  font-family: "Kalam", cursive;
  color: #2c1808;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #fff5d3, #ecd49a);
  border: 1px solid rgba(77, 42, 18, .45);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 6px rgba(0,0,0,.30);
}
.line__status {
  font-size: 13px;
  font-weight: 700;
  color: #2c1808;
  min-height: 1em;
  text-shadow: 0 1px 0 rgba(255, 244, 212, .55);
}
.line__status em {
  font-style: normal;
  color: var(--apple, #a73620);
  font-weight: 700;
  padding: 0 1px;
}
.pager-dots {
  display: inline-flex;
  gap: 8px;
}
.pager-dots .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff7d8;
  border: 2px solid #3d220e;
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
  transition: background .25s, transform .25s;
}
.pager-dots .dot.is-active {
  background: var(--apple-bright);
  transform: scale(1.15);
}

/* ─── The rope assembly ─── */
.line__rope {
  position: relative;
  display: flex;
  align-items: stretch;
  padding-top: 30px;
  min-height: 360px;
}
/* The rope itself — runs the full width behind the posts */
.line__rope::before {
  content: "";
  position: absolute;
  top: 30px; left: 0; right: 0;
  height: 4px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #c79256, #8d5828);
  box-shadow:
    0 1px 0 rgba(255,225,170,.4),
    0 3px 4px rgba(0,0,0,.35);
  transform: translateY(2px);
  z-index: 1;
}
.line__rope::after {
  content: "";
  position: absolute;
  top: 34px; left: 6%; right: 6%;
  height: 14px;
  background: radial-gradient(ellipse at center top, rgba(0,0,0,.15) 0 60%, transparent 70%);
  pointer-events: none;
}

/* Wooden post / arrow button */
.line__nav {
  flex: 0 0 52px;
  position: relative;
  z-index: 3;
  margin: -10px 6px 0;
  padding: 0;
  height: 280px;
  border: 3px solid #3d220e;
  border-radius: 4px;
  color: #fff4d4;
  font-family: "Rye", Georgia, serif;
  font-size: 24px;
  cursor: pointer;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #b97e44, #7d4b1c 60%, #5a3414);
  box-shadow:
    inset 0 0 0 2px rgba(255,225,170,.18),
    inset 0 -10px 18px rgba(0,0,0,.3),
    0 8px 0 rgba(0,0,0,.18),
    0 14px 22px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  transition: transform .15s, box-shadow .15s;
}
.line__nav:hover { transform: translateY(-2px); }
.line__nav:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 0 0 2px rgba(255,225,170,.18),
    inset 0 -10px 18px rgba(0,0,0,.4),
    0 2px 0 rgba(0,0,0,.18),
    0 6px 10px rgba(0,0,0,.3);
}
.line__nav:focus-visible {
  outline: 2px solid var(--apple-bright);
  outline-offset: 3px;
}
.line__nav::before, .line__nav::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6 0 18%, #2d1a07 22% 70%, transparent 72%);
  transform: translateX(-50%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.line__nav::before { top: 10px; }
.line__nav::after  { bottom: 10px; }

/* Viewport — clips horizontally, holds vertical room for hanging tags */
.line__viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 0 4px 64px;
}

.line__track {
  display: flex;
  width: var(--line-track-width, 200%);
  will-change: transform;
  transition: transform .85s cubic-bezier(.34, 1.25, .64, 1);
}
.line.is-sliding .line__track .hang {
  animation-duration: 1.6s;
}

/* Each photo card uses JS-provided basis so the line can grow by pages. */
.line__track > .hang {
  flex: 0 0 calc(var(--line-card-basis, 10%) - 24px);
  margin: 0 12px;
  position: relative;
  padding: 14px 14px 12px;
  background: #fbf6e6;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 22px rgba(0,0,0,.35),
    0 4px 6px rgba(0,0,0,.25);
  transform-origin: top center;
  animation: hang-sway 7s ease-in-out infinite;
  transition: transform .35s, box-shadow .35s;
  text-decoration: none;
  color: inherit;
}
/* uneven rotation + sway delays so the line doesn't pulse in unison */
.line__track > .hang:nth-child(10n+1) { transform: rotate(-2.4deg) translateY(2px); animation-delay: -.3s; }
.line__track > .hang:nth-child(10n+2) { transform: rotate(1.6deg) translateY(8px); animation-delay: -1.2s; }
.line__track > .hang:nth-child(10n+3) { transform: rotate(-1.2deg) translateY(4px); animation-delay: -2.4s; }
.line__track > .hang:nth-child(10n+4) { transform: rotate(2.4deg) translateY(10px); animation-delay: -3.7s; }
.line__track > .hang:nth-child(10n+5) { transform: rotate(-1.8deg) translateY(3px); animation-delay: -1.9s; }
.line__track > .hang:nth-child(10n+6) { transform: rotate(2.0deg) translateY(6px); animation-delay: -.9s; }
.line__track > .hang:nth-child(10n+7) { transform: rotate(-2.8deg) translateY(2px); animation-delay: -2.7s; }
.line__track > .hang:nth-child(10n+8) { transform: rotate(1.2deg) translateY(9px); animation-delay: -3.2s; }
.line__track > .hang:nth-child(10n+9) { transform: rotate(-1.4deg) translateY(5px); animation-delay: -1.5s; }
.line__track > .hang:nth-child(10n+10) { transform: rotate(2.6deg) translateY(7px); animation-delay: -.6s; }

@keyframes hang-sway {
  0%,100% { transform: rotate(var(--rest, -1.4deg)) translateY(var(--ty, 4px)); }
  50%     { transform: rotate(0deg) translateY(var(--ty-peak, 6px)); }
}
.hang:hover {
  animation-play-state: paused;
  transform: rotate(0deg) translateY(-6px) scale(1.04) !important;
  z-index: 4;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 28px 36px rgba(0,0,0,.45),
    0 8px 12px rgba(0,0,0,.3);
}

/* Clothespins */
.hang::before, .hang::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 12px; height: 28px;
  background: linear-gradient(180deg, #d49a55, #8d5828 40%, #6a3f17);
  border: 1px solid #3d220e;
  border-radius: 3px 3px 5px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,225,170,.4),
    inset 0 -3px 2px rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.35);
  z-index: 2;
}
.hang::before { left: 18%; transform: rotate(-4deg); }
.hang::after  { right: 18%; transform: rotate(6deg); }

/* Photo */
.photo {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #c8dbcc;
  background-image:
    radial-gradient(circle at 50% 76%, rgba(199,131,53,0) 28%, rgba(143,77,18,.6) 60%),
    radial-gradient(circle at 50% 38%, #f0c060 0 22%, transparent 26%),
    radial-gradient(circle at 36% 30%, #6fa86a 0 5%, transparent 7%),
    radial-gradient(circle at 64% 30%, #6fa86a 0 5%, transparent 7%),
    radial-gradient(circle at 50% 32%, #c24a27 0 4%, transparent 5.5%),
    linear-gradient(170deg, #c8dbcc 0%, #e8d090 55%, #a87a44 100%);
}
.photo[style*="--img"] {
  background-image: var(--img) !important;
}

/* Kraft paper tag */
.tag {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 4px 12px 6px;
  font-family: "Kalam", cursive;
  font-size: 13px;
  color: #2c1808;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 5px),
    linear-gradient(#e7c98a, #c69553);
  border: 1px solid #5b3413;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  white-space: nowrap;
  z-index: 2;
}
.tag::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1.5px; height: 16px;
  background: #6b4019;
  transform: translateX(-50%);
}
.tag::after {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2c1808;
  transform: translateY(-50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.tag small {
  display: block;
  font-family: "Special Elite", monospace;
  font-size: 9px;
  color: #5b3413;
  letter-spacing: .08em;
}

/* Loading shimmer */
.hang--loading .photo {
  background:
    linear-gradient(110deg, #d9c79a 8%, #ede0b6 18%, #d9c79a 33%);
  background-size: 200% 100%;
  animation: photo-shimmer 1.4s linear infinite;
}
@keyframes photo-shimmer { to { background-position: -200% 0; } }
.hang--loading .tag { opacity: .55; }

/* Footer credit — sits on its own parchment chip so the query reference
   stays readable above the grass at the bottom of the stage. */
.images-credit {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  padding: 6px 16px 7px;
  width: max-content;
  max-width: 92%;
  text-align: center;
  color: #2c1808;
  font-family: "Kalam", cursive;
  font-size: 14px;
  font-weight: 700;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #fff5d3, #ecd49a);
  border: 1px solid rgba(77, 42, 18, .45);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 6px rgba(0,0,0,.30);
  text-shadow: 0 1px 0 rgba(255, 244, 212, .55);
}
.images-credit code {
  font-family: "Special Elite", monospace;
  font-size: 12px;
  font-weight: 400;
  background: #fff7d8;
  color: #2c1808;
  padding: 1px 7px;
  border: 1px dashed rgba(77, 42, 18, .55);
  border-radius: 3px;
  text-shadow: none;
}

/* ─── Lightbox (click a photo to view large) ─── */
.images-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 4, .82);
  backdrop-filter: blur(2px);
  z-index: 50;
}
.images-lightbox[aria-hidden="false"] { display: flex; }
.images-lightbox__frame {
  position: relative;
  max-width: min(900px, 86vw);
  max-height: 86vh;
  padding: 18px 18px 56px;
  background: #fbf6e6;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 50px rgba(0,0,0,.55);
  transform: rotate(-.6deg);
}
.images-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  background: #c8dbcc;
}
.images-lightbox__caption {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: "Kalam", cursive;
  font-size: 15px;
  color: #2c1808;
}
.images-lightbox__caption small {
  display: block;
  font-family: "Special Elite", monospace;
  font-size: 10px;
  color: #5b3413;
  letter-spacing: .08em;
}
.images-lightbox__close {
  position: absolute;
  top: -16px; right: -16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid #3d220e;
  background: var(--apple-bright);
  color: #fff7d8;
  font-family: "Rye", Georgia, serif;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,.4);
}
.images-lightbox__close:hover { transform: scale(1.08); }