/* Footer Polaroid camera (normal mode only), modelled on the white Polaroid Now+.
   Coordinates come from the reference photo scaled to a 480px-wide drawing. */
.pol-wrap .label::before { display: none; }   /* no section number in the footer */

/* ── form ── */
.pol-form { display: block; margin: 18px 0 8px; }
.pol-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.pol-field span { font: 400 11px var(--px-font-head); letter-spacing: .06em; color: var(--label); }
.pol-field input, .pol-field textarea {
  font: 15px/1.4 var(--body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; resize: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.pol-field input:focus, .pol-field textarea:focus { outline: none; border-color: #4a4a50; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.pol-photo { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pol-photo small { color: var(--muted); font-size: 13px; }
.pol-photo img[hidden] { display: none; }
.pol-photo img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; filter: grayscale(1); border: 1px solid var(--line); }
.pol-photo .pixel-btn, .pol-actions .pixel-btn { font-size: 12px; }
.pol-photo.nudge .pixel-btn { animation: nudge .5s 2; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── stage ── */
.pol-stage { position: relative; display: flex; justify-content: center; padding-top: 18px; perspective: 1200px; }
.pcam-scale { --s: 1; width: calc(480px * var(--s)); height: calc(430px * var(--s)); position: relative; }
.pcam {
  position: absolute; left: 0; top: 0; width: 480px; height: 430px; transform-origin: 0 0;
  transform: scale(var(--s)); transform-style: preserve-3d;
}
.pcam-body { position: absolute; inset: 0; transition: transform .25s ease-out; transform-style: preserve-3d; }
.pc { position: absolute; }

/* floor shadow */
.pc-shadow { left: 70px; top: 404px; width: 340px; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent); filter: blur(4px); }

/* body: raised hump at the back, upper housing, logo band, film-exit base */
.pc-hump { left: 180px; top: 74px; width: 222px; height: 24px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #e3e3e3, #d6d6d6); box-shadow: inset 0 1px 0 #f2f2f2; }
.pc-upper { left: 64px; top: 85px; width: 336px; height: 166px; border-radius: 26px 26px 6px 6px;
  background: linear-gradient(180deg, #fdfdfd 0%, #f7f7f7 70%, #eeeeee 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 10px -6px rgba(0,0,0,.10), 0 1px 0 #e4e4e4; }
.pc-band { left: 61px; top: 246px; width: 342px; height: 80px; border-radius: 6px;
  background: linear-gradient(180deg, #e6e6e6 0, #f4f4f4 7px, #f8f8f8 55%, #f1f1f1 100%);
  box-shadow: inset 0 -1px 0 #e2e2e2; }
.pc-base { left: 64px; top: 326px; width: 336px; height: 96px; border-radius: 3px 3px 24px 24px;
  background: linear-gradient(180deg, #ececec 0, #f6f6f6 6px, #f4f4f4 60%, #ececec 100%);
  box-shadow: inset 0 -3px 6px -2px rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.08); }

/* flash window: dark frame, fresnel rings, clear tube */
.pc-flash { left: 82px; top: 102px; width: 78px; height: 73px; border-radius: 17px; background: #161616;
  box-shadow: inset 0 0 0 1px #2c2c2c, 0 1px 0 #fff; }
.pc-fresnel { position: absolute; inset: 5px; border-radius: 12px; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(255,255,255,.75) 50%, rgba(205,205,205,.6) 62%, rgba(255,255,255,.7) 68%, transparent 72%),
    repeating-radial-gradient(circle at 50% 22%, #f6f6f6 0 2.2px, #bdbdbd 2.2px 3.1px),
    #dcdcdc;
  box-shadow: inset 0 0 6px rgba(0,0,0,.35); }
.pcam.flashing .pc-fresnel { background: #fff; box-shadow: 0 0 40px 18px rgba(255,255,255,.95); }

/* lens + viewfinder are SVG (see markup); sizes here */
.pc-lens { left: 171px; top: 100px; width: 140px; height: 140px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.pc-vf { left: 317px; top: 102px; width: 67px; height: 64px; }
.pc-sensor { left: 330px; top: 186px; width: 39px; height: 14px; border-radius: 7px; background: #121212;
  display: flex; align-items: center; justify-content: space-evenly; padding: 0 4px; box-shadow: 0 1px 0 #fff; }
.pc-sensor i { width: 4px; height: 4px; border-radius: 50%; background: #2c2c2c; box-shadow: inset 0 0 0 1px #3d3d3d; }
.pc-sensor i:last-child { width: 6px; height: 6px; background: radial-gradient(circle at 40% 35%, #555, #0a0a0a); }

/* "+" button (adds a photo) and the red shutter button */
.pc-plus { left: 340px; top: 211px; width: 19px; height: 19px; padding: 0; border-radius: 4px;
  border: 1.5px solid #bdbdbd; background: #fbfbfb; color: #3a8de0; font: 800 15px/1 'Nunito', sans-serif;
  display: grid; place-items: center; cursor: pointer; }
.pc-shutter { left: 101px; top: 190px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 42% 35%, #ff7a68 0%, #ee4b38 45%, #d73a29 100%);
  box-shadow: 0 2px 0 #b02c1e, 0 3px 6px rgba(0,0,0,.18), inset 0 -2px 3px rgba(0,0,0,.12);
  transition: transform .08s, box-shadow .08s; }
.pc-shutter:hover { filter: brightness(1.05); }
.pc-shutter:active, .pcam.firing .pc-shutter { transform: translateY(2px); box-shadow: 0 0 0 #b02c1e, 0 1px 3px rgba(0,0,0,.2), inset 0 -1px 2px rgba(0,0,0,.15); }
.pc-plus:focus-visible, .pc-shutter:focus-visible { outline: 3px solid #3a8de0; outline-offset: 3px; }

/* rainbow stripe from under the lens to the bottom of the band */
.pc-rainbow { left: 223px; top: 236px; width: 35px; height: 92px; display: flex; }
.pc-rainbow i { flex: 1; }
.pc-rainbow i:nth-child(1) { background: #e8432e; } .pc-rainbow i:nth-child(2) { background: #f39a1f; }
.pc-rainbow i:nth-child(3) { background: #f6c912; } .pc-rainbow i:nth-child(4) { background: #7cc243; }
.pc-rainbow i:nth-child(5) { background: #3f95e5; }

/* wordmarks + embossed film label */
.pc-word { top: 280px; font: 800 19px/1 'Nunito', sans-serif; color: #8d8d8d; letter-spacing: .005em; }
.pc-word.brand { left: 94px; }
.pc-word.model { right: 103px; font-size: 16px; top: 283px; letter-spacing: .04em; }
.pc-film { left: 92px; top: 332px; font: 800 9.5px/1 'Nunito', sans-serif; color: #f0f0f0;
  text-shadow: -0.5px -0.5px 0 #fff, 0.6px 0.6px 0 #d4d4d4; }

/* film exit slot */
.pc-slot-rim { left: 89px; top: 343px; width: 302px; height: 26px; border-radius: 5px;
  background: linear-gradient(180deg, #e2e2e2, #f3f3f3); box-shadow: inset 0 2px 3px rgba(0,0,0,.12); }
.pc-slot { left: 98px; top: 349px; width: 284px; height: 11px; border-radius: 2px; background: #101010;
  box-shadow: inset 0 3px 4px #000, 0 1px 0 #fff; }

/* the card that comes out of the slot (canvas inside) */
.pc-out { left: 90px; top: 356px; width: 300px; overflow: hidden; z-index: 3; }
.pc-out.done { cursor: grab; }
.pc-out canvas { display: block; width: 300px; height: auto; transform: translateY(-100%); }
.pc-out.ejecting canvas { transition: transform 2.6s cubic-bezier(.3, .1, .3, 1); transform: translateY(0); }
.pc-out.done canvas { transform: translateY(0); }

/* 3D camera (js/polaroid3d.js): replaces the CSS camera once WebGL is up */
.pol-stage.is-3d .pcam-scale { display: none; }
.pol-3d { position: relative; width: min(560px, 100%); margin: 0 auto; }
.pol-3d.peelable { touch-action: none; }          /* let a finger pull the paper instead of scrolling */
.pol-3d.grab { cursor: grab; }
.pol-3d.grabbing { cursor: grabbing; }
.pol-hint { text-align: center; color: var(--muted); font-size: 14px; margin: 8px 0 0; animation: hint-in .4s ease-out; }
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } }
.pc-out.done { touch-action: none; }
.pol-3d.hot { cursor: pointer; }
.pol-3d canvas { display: block; width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* peeled card: flies from the camera to the centre of the screen.
   Only transform/opacity animate (see js/polaroid.js), each on its own GPU layer. */
.pol-peel { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; }
.pol-peel[hidden] { display: none; }
.pol-peel-bg { position: absolute; inset: 0; background: rgba(0,0,0,.78); will-change: opacity; }
.pol-peel-card { position: relative; display: grid; justify-items: center; gap: 18px; }
.pol-peel-photo { will-change: transform, opacity; transform-origin: 50% 50%; backface-visibility: hidden; contain: layout paint; }
.pol-peel-photo canvas { display: block; width: min(340px, 78vw); height: auto; max-height: 74vh; object-fit: contain; }
.pol-peel-actions { display: flex; gap: 12px; will-change: transform, opacity; }
.pol-peel .pixel-btn { font-size: 12px; }

/* white flash over the page */
.pol-flashfx { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; }
.pol-flashfx.on { animation: flashfx .5s ease-out; }
@keyframes flashfx { 0% { opacity: .9; } 100% { opacity: 0; } }

.pol-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.pol-actions[hidden] { display: none; }

@media (max-width: 600px) {
  .pcam-scale { --s: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .pol-flashfx.on { animation: none; }
  .pc-out.ejecting canvas { transition: none; }
  .pcam-body { transition: none; }
}