/* ============================================================
   POLAROID WALL — instant-film gallery (grid layout)
   Eject + develop on scroll-in · hover/tap flip to the story
   ============================================================ */
.pwall {
  position: relative;
  background: var(--pd-cream);
  padding: var(--sp-section) clamp(16px, 4vw, 56px);
  overflow: hidden;
  box-shadow: inset 0 0 clamp(90px, 14vw, 200px) rgba(44, 44, 44, .14);
}
.pwall::before {           /* faint paper speckle */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(44, 44, 44, .05) 1px, transparent 1.4px);
  background-size: 30px 30px; opacity: .5;
}
.pwall::after {            /* film grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pwall__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }

/* scattered field sparkles */
.pwall__field-star { position: absolute; z-index: 0; }

/* ---- decorative header rule: checker | line | ✦ | line | checker --- */
.pwall__rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 540px; margin: 18px auto 0;
}
.pwall__rule .ck {
  width: 58px; height: 13px; flex: none; opacity: .8;
  background-image:
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25% 75%, var(--pd-teal) 75%),
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25% 75%, var(--pd-teal) 75%);
  background-size: 13px 13px; background-position: 0 0, 6.5px 6.5px;
}
.pwall__rule .ln { flex: 1; max-width: 90px; height: 2px; background: var(--pd-teal); }
.pwall__rule .star { font-size: 15px; flex: none; }

/* ---- 3 × 2 grid with a raised hero ---------------------------- */
.pwall__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: clamp(8px, 1vw, 16px) clamp(4px, .6vw, 12px);
  align-items: start;
  margin-top: clamp(26px, 3.6vw, 46px);
  perspective: 1700px;
}

/* thick checkerboard peeking out from BEHIND the photos */
.pwall__edge {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(96px, 10vw, 150px); height: 48px; opacity: .55; pointer-events: none;
  background-image:
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25% 75%, var(--pd-teal) 75%),
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25% 75%, var(--pd-teal) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
}
.pwall__edge--l { left: clamp(-66px, -3.4vw, -34px); }
.pwall__edge--r { right: clamp(-66px, -3.4vw, -34px); }

/* ---- each polaroid ------------------------------------------- */
.pola {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(54px) scale(.96);
  transition: opacity .65s ease, transform .7s cubic-bezier(.2, .8, .25, 1);
  cursor: pointer;
}
.pola.in { opacity: 1; transform: none; }
.pola:hover { z-index: 8; }
.pola--hero { margin: -12px -18px 0; z-index: 4; }

.pola__tilt {
  position: relative;
  transform: rotate(var(--rot, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
  transform-origin: center 60%;
  perspective: 1300px;
}
.pola:hover .pola__tilt { transform: rotate(0deg) translateY(-12px) scale(1.04); }

/* kraft tape at a corner */
.pola__tape {
  position: absolute; z-index: 6; width: 80px; height: 30px;
  background-image:
    linear-gradient(180deg, rgba(214, 196, 152, .55), rgba(214, 196, 152, .55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 12px);
  background-color: rgba(206, 186, 142, .85);
  box-shadow: 0 2px 6px rgba(44, 44, 44, .18);
  opacity: .92;
}
.pola__tape::after {       /* faint torn edge sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%, rgba(44, 44, 44, .06));
}
.pola__tape--tl { top: -13px; left: -12px; transform: rotate(-45deg); }
.pola__tape--tr { top: -13px; right: -12px; transform: rotate(45deg); }
.pola__tape--bl { bottom: -13px; left: -12px; transform: rotate(45deg); }
.pola__tape--br { bottom: -13px; right: -12px; transform: rotate(-45deg); }
.pola__tape--r  { top: 30%; right: -24px; transform: rotate(-62deg); }

/* ---- 3D flip ------------------------------------------------- */
/* Flat (crisp 2D) at rest — only enter the 3D layer during the flip,
   so resting photos aren't rasterized blurry by preserve-3d. */
.pola__flip {
  position: relative;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.pola:hover .pola__flip,
.pola.is-flipped .pola__flip { transform-style: preserve-3d; transform: rotateY(180deg); }
.pola__face { border-radius: 3px; }
.pola:hover .pola__face,
.pola.is-flipped .pola__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* ---- front (the photo) --------------------------------------- */
.pola__front {
  position: relative;
  background: #fdfaf0;
  padding: 13px 13px 0;
  box-shadow: 0 12px 26px rgba(44, 44, 44, .22), 0 3px 7px rgba(44, 44, 44, .14);
}
.pola--hero .pola__front { box-shadow: 0 20px 40px rgba(44, 44, 44, .26), 0 5px 10px rgba(44, 44, 44, .16); }
.pola:hover .pola__front { box-shadow: 0 26px 50px rgba(44, 44, 44, .3), 0 6px 14px rgba(44, 44, 44, .18); }
.pola__photo {
  position: relative; aspect-ratio: var(--ar, 4 / 3); overflow: hidden;
  background: var(--pd-teal-soft);
  box-shadow: inset 0 0 0 1px rgba(44, 44, 44, .12);
}
.pola__photo image-slot { display: block; width: 100%; height: 100%; }
.pola__photo::after {        /* vintage vignette + sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .14), transparent 40%),
    radial-gradient(130% 120% at 50% 60%, transparent 55%, rgba(20, 18, 10, .26) 100%);
}
.pola__cap {
  height: 50px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script); color: var(--pd-teal-dark);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1; text-align: center; padding: 0 6px;
}

/* photo fades in cleanly with the card — no develop tint, stays crisp */
@media (prefers-reduced-motion: reduce) {
  .pola { transition: opacity .4s ease; transform: none; }
}

/* ---- back (the story) ---------------------------------------- */
.pola__back {
  position: absolute; inset: 0; transform: rotateY(180deg); visibility: hidden;
  background: #fdfaf0;
  background-image: repeating-linear-gradient(rgba(23, 56, 59, .06) 0 1px, transparent 1px 25px);
  padding: clamp(15px, 1.8vw, 22px) clamp(15px, 1.8vw, 22px);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 12px 26px rgba(44, 44, 44, .22), 0 3px 7px rgba(44, 44, 44, .14);
  border: 1px solid rgba(23, 56, 59, .14);
}
.pola:hover .pola__back, .pola.is-flipped .pola__back { visibility: visible; }
.pola__stamp { position: absolute; top: 11px; right: 13px; }
.pola__btitle {
  font-family: var(--font-display); font-weight: 800; color: var(--pd-teal-dark);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.08; margin: 0 0 9px; padding-right: 26px;
}
.pola__bbody {
  font-family: var(--font-body); color: var(--pd-ink); font-size: clamp(.82rem, 1.05vw, .96rem);
  line-height: 1.45; margin: 0;
}
.pola__bfoot {
  margin-top: 12px; padding-top: 9px; border-top: 2px dotted rgba(23, 56, 59, .28);
  font-family: var(--font-label); font-weight: 900; text-transform: uppercase;
  letter-spacing: .12em; font-size: .6rem; color: var(--pd-red);
}

/* ---- See the full gallery (outlined + stars) ----------------- */
.pwall__cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(34px, 4vw, 54px); }
.pwall__see {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: transparent; border: 2px solid var(--pd-red); border-radius: var(--r-sm);
  color: var(--pd-teal-dark); font-family: var(--font-label); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em; font-size: clamp(.8rem, 1.1vw, .95rem);
  padding: 15px 30px; transition: background .16s ease, color .16s ease, transform .12s ease;
}
.pwall__see:hover { background: var(--pd-red); color: #fff; }
.pwall__see:active { transform: scale(.97); }

/* ---- responsive ---------------------------------------------- */
@media (max-width: 860px) {
  .pwall__grid { grid-template-columns: 1fr 1fr; }
  .pola--hero { margin-top: 0; }
  .pwall__edge { display: none; }
}
@media (max-width: 540px) {
  .pwall__grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .pola { margin-top: 0 !important; }
  .pola__tilt { transform: rotate(calc(var(--rot, 0deg) * .5)); }
}

/* mobile: show only the hero polaroid, hide the rest, center it */
@media (max-width: 900px) {
  .pwall__grid {
    display: flex;
    justify-content: center;
  }
  .pola { display: none; }
  .pola--hero {
    display: block;
    width: 100%;
    max-width: 340px;
  }
  /* hide decorative field stars */
  .pwall__field-star { display: none; }
  /* hide the header rule decorations */
  .pwall__rule .ck,
  .pwall__rule .ln { display: none; }
}