/* ================================================================
   LOCAL HIGHLIGHTER — CINEMA CSS v4  (Image-Overlay Architecture)
   The postcard front is the ACTUAL print image.
   Ad zones are absolutely-positioned hotspot overlays on top.
   ================================================================ */

/* ---- SECTION SHELL ---- */
.cinema {
  position: relative;
  padding: 100px 0 80px;
  background: linear-gradient(160deg, #02060f 0%, #060e1c 35%, #0b1627 65%, #04090f 100%);
  overflow: hidden;
}
.cinema__bg { position: absolute; inset: 0; pointer-events: none; }
.cinema__bg-rays {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(245,158,11,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%,  rgba(245,158,11,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(99,102,241,0.10) 0%, transparent 50%);
}
.cinema__title { color: #fff; }

/* Floating ambient particles */
.cinema__bg::before, .cinema__bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cinema__bg::before {
  width: 500px; height: 500px;
  top: -150px; left: -100px;
  background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
  animation: ambient-float 8s ease-in-out infinite;
}
.cinema__bg::after {
  width: 400px; height: 400px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
  animation: ambient-float 10s ease-in-out infinite reverse;
}
@keyframes ambient-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

/* ---- URGENCY BADGE ---- */
.cinema__spots-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.45);
  color: #FCD34D;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}
.cinema__spots-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.15), transparent);
  animation: badge-shimmer 3s ease-in-out infinite;
}
@keyframes badge-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ================================================================
   POSTCARD WRAPPER  — perspective + 3D flip container
   ================================================================ */
.cinema__wrapper {
  perspective: 1600px;
  perspective-origin: 50% 40%;
  max-width: 1000px;
  margin: 0 auto 24px;
}

/* ---- CONTROLS BAR ---- */
.cinema__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cinema__flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
  font-family: inherit;
}
.cinema__flip-btn:hover {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 20px rgba(245,158,11,0.2);
  transform: translateY(-2px);
}
.cinema__size-badge {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ================================================================
   3D CARD  —  aspect ratio matches 12×9 physical mailer
   ================================================================ */
.cinema__card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  border-radius: 8px;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.65),
    0 0 0 4px rgba(255,255,255,0.04),
    0 0 60px rgba(245,158,11,0.08);
  cursor: default;
  transition: box-shadow 0.4s;
}
.cinema__card:hover {
  box-shadow:
    0 60px 120px rgba(0,0,0,0.7),
    0 0 0 4px rgba(255,255,255,0.06),
    0 0 80px rgba(245,158,11,0.14);
}

/* Luxury gloss sweep on load */
@keyframes card-sweep {
  0%   { opacity: 0; transform: translateX(-100%) skewX(-12deg); }
  30%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(280%) skewX(-12deg); }
}
.cinema__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  animation: card-sweep 1.8s ease-in-out 3.8s forwards;
  pointer-events: none;
  z-index: 50;
  border-radius: 8px;
}

/* ================================================================
   CARD FACES
   ================================================================ */
.cinema__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}
.cinema__face--back {
  transform: rotateY(180deg);
}

/* ================================================================
   IMAGE-BASED POSTCARD FRONT
   The postcard image is the background. Hotspots overlay it.
   ================================================================ */
.pc-image-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pc-image-base img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;   /* fill exactly — it's a print template */
  display: block;
  border-radius: 8px;
}

/* ================================================================
   HOTSPOT  OVERLAY GRID
   Coordinates match the actual postcard image zones.
   We use a CSS grid overlay that mirrors the physical layout.

   Physical 9x12 layout (landscape):
   ┌──────────┬──────────┬──────────┬───────────────┐
   │  SPOT A  │  SPOT B  │  SPOT C  │               │
   │ (avail)  │ (avail)  │ (avail)  │  ROOFING AD   │
   ├──────────┴──────────┴──────────┤  (sold)       │
   │   THE LOCAL HIGHLIGHTER BANNER │               │
   ├───────────────────────┬────────┴───────────────┤
   │  SPOT D (XL avail)    │  SPOT E   │ MICHAEL'S  │
   │                       │ (avail)   │  (sold)    │
   └───────────────────────┴───────────┴────────────┘

   ================================================================ */
/* ================================================================
   HOTSPOT LAYER — pixel-exact coords from postcard-back.png
   Source: 1270 × 952 px
   Formula: left%  = px_left  / 1270 * 100
             top%   = px_top   / 952  * 100
             width% = (px_right - px_left)  / 1270 * 100
             height%= (px_bottom - px_top)  / 952  * 100
   ================================================================ */
.pc-hotspot-layer {
  position: absolute;
  inset: 0;           /* cover the full card — no inset trickery */
  overflow: visible;
}

/* All hotspot children share position: absolute */
.pc-hotspot-layer > * {
  position: absolute;
}

/* ---- TOP ROW  (px_top=10, px_bot=418 → top:1.05%, height:43%) ---- */
/* A: x 12→312 */
.pc-hs--a {
  left:   0.94%;
  top:    1.05%;
  width:  23.62%;
  height: 42.96%;
}
/* B: x 325→635 */
.pc-hs--b {
  left:   25.59%;
  top:    1.05%;
  width:  24.41%;
  height: 42.96%;
}
/* C: x 648→955 */
.pc-hs--c {
  left:   51.02%;
  top:    1.05%;
  width:  24.17%;
  height: 42.96%;
}

/* ---- RIGHT TALL — Roofing SOLD: x 960→1262, y 10→530 ---- */
.pc-hs--roofing {
  left:   75.59%;
  top:    1.05%;
  width:  23.78%;
  height: 54.62%;
}

/* ---- MID BANNER: y 432→535 (no interaction) ---- */
.pc-hs--banner {
  left:   0%;
  top:    45.38%;
  width:  75.59%;
  height: 10.82%;
  pointer-events: none;
}

/* ---- BOTTOM ROW: y 548→945 ---- */
/* D XL: x 12→635 */
.pc-hs--d {
  left:   0.94%;
  top:    57.56%;
  width:  49.06%;
  height: 41.70%;
}
/* E: x 648→955 */
.pc-hs--e {
  left:   51.02%;
  top:    57.56%;
  width:  24.17%;
  height: 41.70%;
}
/* Michael's SOLD: x 960→1262 */
.pc-hs--michaels {
  left:   75.59%;
  top:    57.56%;
  width:  23.78%;
  height: 41.70%;
}

/* ================================================================
   HOTSPOT BASE STYLES
   ================================================================ */
.pc-hotspot {
  position: absolute;
  overflow: hidden;
}


/* AVAILABLE hotspot — always shows content, glows amber at rest */
.pc-hotspot--open {
  cursor: pointer;
  border: 1.5px solid rgba(245,158,11,0.45);
  background: rgba(0,0,0,0.42);
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s;
}
.pc-hotspot--open:hover {
  border-color: rgba(245,158,11,0.9);
  border-style: solid;
  background: rgba(0,0,0,0.62);
  transform: translateY(-4px) scale(1.025);
  z-index: 20;
  box-shadow: 0 12px 40px rgba(245,158,11,0.28), inset 0 0 0 1px rgba(245,158,11,0.6);
}

/* Pulsing ring — always glowing, intensifies on hover */
.pc-hotspot--open::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px solid rgba(245,158,11,0.4);
  animation: hs-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.pc-hotspot--open:hover::before {
  border-color: rgba(245,158,11,0.85);
  animation-duration: 1.6s;
}
@keyframes hs-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(0.97); }
}

/* Diagonal corner pip — luxury touch */
.pc-hotspot--open::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 3px solid rgba(245,158,11,0.7);
  border-left: 3px solid rgba(245,158,11,0.7);
  border-radius: 2px 0 0 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* SOLD hotspot — subtle branded overlay */
.pc-hotspot--sold {
  cursor: default;
}

/* ================================================================
   HOTSPOT CONTENT  — always visible, hover just lifts the parent
   ================================================================ */
.pc-hs-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  text-align: center;
  /* always visible */
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 10;
  /* smooth CTA opacity transition on hover */
  transition: opacity 0.2s;
}

.pc-hs-tag {
  display: inline-block;
  background: rgba(245,158,11,0.2);
  border: 1px solid rgba(245,158,11,0.5);
  color: #FCD34D;
  font-size: clamp(0.45rem, 0.8vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.pc-hs-price {
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  font-weight: 900;
  color: #F59E0B;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(245,158,11,0.5);
  font-family: 'Playfair Display', Georgia, serif;
}
.pc-hs-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #D97706, #F59E0B);
  color: #000;
  font-size: clamp(0.5rem, 0.9vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(245,158,11,0.4);
  transition: transform 0.18s, box-shadow 0.18s;
}
.pc-hs-cta:hover,
.pc-hotspot--open:hover .pc-hs-cta {
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(245,158,11,0.6);
}
.pc-hs-sub {
  font-size: clamp(0.38rem, 0.65vw, 0.58rem);
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  line-height: 1.3;
}

/* Sold badge overlay */
.pc-hs-sold-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #991B1B, #DC2626);
  color: #fff;
  font-size: clamp(0.45rem, 0.7vw, 0.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  transform: rotate(3deg);
  box-shadow: 0 3px 12px rgba(220,38,38,0.55);
  z-index: 20;
  opacity: 0; /* revealed by GSAP */
}

/* ================================================================
   BACK FACE  — traditional CSS tiles (kept from v3)
   ================================================================ */
.pc-top {
  flex: 55;
  display: grid;
  grid-template-columns: 13% 17% minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 2px 2px 0 2px;
  background: #111;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.pc-bottom {
  flex: 36;
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.5fr) minmax(0,1.5fr);
  gap: 2px;
  padding: 0 2px 2px 2px;
  background: #111;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.pc-banner {
  flex: none;
  height: 60px;
  background: #000;
  padding: 2px;
  flex-shrink: 0;
}
.pc-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background: #111827;
  border-top: 2px solid rgba(212,175,55,0.6);
  border-bottom: 2px solid rgba(212,175,55,0.6);
  padding: 0 16px;
  gap: 12px;
}
.banner-brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.banner-qr { font-size: 1.4rem; flex-shrink: 0; }
.banner-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(0.75rem, 1.6vw, 1.25rem);
  font-weight: 800;
  color: #D4AF37;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-contact { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.banner-contact span { font-size: 0.58rem; color: rgba(255,255,255,0.65); }
.banner-contact strong { font-size: 0.65rem; color: #fff; font-weight: 700; }
.banner-postal { display: flex; align-items: center; gap: 8px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 12px; flex-shrink: 0; }
.postal-box { border: 1px solid rgba(255,255,255,0.2); padding: 3px 7px; font-size: 0.5rem; color: rgba(255,255,255,0.5); line-height: 1.5; text-align: center; }
.postal-box strong { display: block; font-size: 0.54rem; color: rgba(255,255,255,0.8); }
.pc-col-smalls { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 3px; min-height: 0; min-width: 0; overflow: hidden; }
.pc-col-smalls > .pc-tile { flex: 1; min-height: 0; min-width: 0; }
.pc-col-meds { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 3px; min-height: 0; min-width: 0; overflow: hidden; }
.pc-col-meds > .pc-tile { flex: 1; min-height: 0; min-width: 0; }
.pc-tile--tall-top { grid-row: 1 / 3; }
.pc-tile {
  position: relative; overflow: hidden; background: #222;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0; box-sizing: border-box;
}
.pc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.pc-tile:hover img { transform: scale(1.05); }
.pc-tile--sold { background: #1e1e1e; }
.pc-sold-badge { position: absolute; top: 6px; right: 6px; background: linear-gradient(135deg, #DC2626, #B91C1C); color: #fff; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 2px 8px rgba(220,38,38,0.5); text-transform: uppercase; z-index: 3; opacity: 0; }
.pc-tile--open { background: linear-gradient(135deg, #0d1117, #161b22); border: 1px dashed rgba(245,158,11,0.5); cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.18s; }
.pc-tile--open:hover { background: linear-gradient(135deg, #1a2230, #243040); border-color: #F59E0B; border-style: solid; transform: scale(1.03); z-index: 10; }
.pc-open-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; width: 100%; height: 100%; overflow: hidden; }
.pc-open-icon { font-size: clamp(0.6rem, 1vw, 1.1rem); animation: float-icon 2.8s ease-in-out infinite; line-height: 1; }
@keyframes float-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pc-open-label { font-size: clamp(0.38rem, 0.7vw, 0.6rem); font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); text-transform: uppercase; line-height: 1; }
.pc-open-price { font-size: clamp(0.7rem, 1.4vw, 1.3rem); font-weight: 900; color: #F59E0B; line-height: 1; white-space: nowrap; }
.pc-open-cta { font-size: clamp(0.35rem, 0.65vw, 0.55rem); color: rgba(245,158,11,0.65); font-weight: 600; line-height: 1; }

/* Back face shell */
.cinema__face--back {
  display: flex;
  flex-direction: column;
  background: #111;
  border: 4px solid #111;
}

/* ================================================================
   LEGEND
   ================================================================ */
.cinema__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 22px;
}
.cinema__legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-dot--sold { background: #DC2626; }
.legend-dot--available { background: #F59E0B; }

/* ================================================================
   SCAN LINE — luxury "table light" ambient effect
   ================================================================ */
.cinema__scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.6), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 760px) {
  .pc-hotspot-layer {
    grid-template-rows: 1fr 60px 1fr;
  }
  .pc-hs-price { font-size: clamp(0.8rem, 4vw, 1.4rem); }
  .banner-contact { display: none; }
}
@media (max-width: 580px) {
  .cinema__wrapper { perspective: none; }
  .cinema__controls { flex-direction: column; gap: 8px; align-items: flex-start; }
  .cinema__legend { flex-direction: column; gap: 10px; }
  .pc-hs-cta { padding: 5px 12px; font-size: 0.55rem; }
}