/* ===========================================================================
   Happy Birthday Akshara — Viewfinder toy
   Built on a fixed 1920x1080 design surface (assets are 2x / 1080p) that is
   scaled to fit the viewport by app.js. All element coordinates below are in
   1920x1080 design px and were measured from the reference state screenshots.
   =========================================================================== */
:root {
  --bg: #efba59;            /* background */
  --green: #4b9f5e;         /* title + arrow */
  --brown: #9f6d10;         /* subtitle */

  /* Reel positions (relative to the .viewer box) */
  --reel-w: 70.2%;          /* native reel:viewfinder scale */
  --reel-left: 15.2%;
  --reel-seated-top: -6%;   /* seated home (small peek above the viewfinder) */
  --reel-tray-y: -88.2%;    /* % of reel height: lifts it to rest on top of the device */

  /* Lever, anchored to the viewfinder's upper-right shoulder */
  --lever-w: 16%;
  --lever-top: -1%;
  --lever-left: 90%;
  --lever-press-deg: 52deg;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: "Quicksand", "Trebuchet MS", "Segoe UI", sans-serif;
}

/* ---- Scaled design surface --------------------------------------------- */
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;   /* JS sets translate()+scale() */
}

/* ---- Greeting ---------------------------------------------------------- */
.title, .subtitle {
  position: absolute;
  left: 0;
  width: 1920px;
  text-align: center;
  margin: 0;
  z-index: 6;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.title {
  top: 178px;
  color: var(--green);
  font-weight: 700;
  font-size: 60px;
  letter-spacing: .5px;
}
.subtitle {
  top: 298px;
  color: var(--brown);
  font-weight: 500;
  font-size: 31px;
}
.title.visible, .subtitle.visible { opacity: 1; }

/* ---- Drag-down arrow --------------------------------------------------- */
.arrow {
  position: absolute;
  left: 879px;
  top: 372px;
  width: 113px;
  height: 198px;
  z-index: 8;
  fill: var(--green);
  opacity: .92;
  transition: opacity .35s ease, transform .9s ease-in-out;
  pointer-events: none;
  animation: bob 1.4s ease-in-out infinite;
}
.arrow.hidden { opacity: 0; animation: none; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}

/* ---- Photos: emerge from behind the viewfinder, draggable, stay where dropped */
.photo {
  position: absolute;
  left: 635px;
  top: 93px;
  width: 587px;
  height: 580px;
  z-index: 2;                 /* home: behind the viewer (z-index 5) */
  background: #fff;
  padding: 14px;
  border-radius: 3px;
  box-shadow: 0 16px 34px rgba(60, 30, 0, 0.28);
  cursor: grab;
  opacity: 0;
  transform: translate(0, 26px);
  transition: opacity .45s ease, transform .45s ease;
  touch-action: none;
  user-select: none;
}
.photo.shown { opacity: 1; transform: translate(0, 0); }
.photo.dragging { transition: none; cursor: grabbing; }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #e9e4d6;
  pointer-events: none;
}
/* Translucent close button: appears once a photo has been pulled out */
.photo-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  border: none;
  border-radius: 50%;
  background: rgba(40, 28, 12, 0.32);
  color: #fff;
  font: 700 24px/1 "Quicksand", "Trebuchet MS", sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}
.photo.placed .photo-close { opacity: .6; pointer-events: auto; }
.photo.placed .photo-close:hover { opacity: 1; background: rgba(40, 28, 12, 0.6); }

/* ---- Viewer (reel + viewfinder + lever) -------------------------------- */
.viewer {
  position: absolute;
  left: 546px;
  top: 524px;
  width: 748px;
  aspect-ratio: 1505 / 1044;
  z-index: 5;                 /* whole device sits in front of the photo */
}
.viewfinder-img {
  position: relative;
  width: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
}

/* Reel: seated home is set by top/left; the resting (on-top) state is a transform */
.reel {
  position: absolute;
  width: var(--reel-w);
  left: var(--reel-left);
  top: var(--reel-seated-top);
  z-index: 6;                 /* on top of the viewfinder while resting / dragging */
  cursor: grab;
  transform: translate(0, var(--reel-tray-y));
  transition: transform .6s cubic-bezier(.34, 1.1, .5, 1);
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 8px 12px rgba(60, 30, 0, 0.28));
}
.reel.seated  { cursor: default; transform: rotate(0deg); z-index: 1; } /* drops behind the viewfinder */
.reel.dragging { transition: none; cursor: grabbing; z-index: 1; }

/* Lever, pivoting at its base */
.lever {
  position: absolute;
  width: var(--lever-w);
  top: var(--lever-top);
  left: var(--lever-left);
  z-index: 1;                 /* behind the viewfinder body */
  transform-origin: 20% 86%;
  transform: rotate(0deg);
  transition: transform .12s ease-out;
  cursor: not-allowed;
  filter: drop-shadow(0 5px 7px rgba(60, 30, 0, 0.25));
}
.viewer.armed .lever { cursor: pointer; }
.lever.press { transform: rotate(var(--lever-press-deg)); transition: transform .09s ease-in; }

.slot-target {
  position: absolute;
  left: 25%; top: 28%;
  width: 50%; height: 40%;
  z-index: 0;
}