/* =========================================================
   CAMERA COMPONENT
   Comes after the exit door. Artwork is inline in index.html (the <svg id="camera">),
   its images are in assets/camera/images. Behaviour: js/camera/main.js
   ========================================================= */

.camera-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Hidden until the exit door's square opening has finished (js/exit-door/main.js) */
.camera-section.is-waiting {
  visibility: hidden;
}

.camera-wrap {
  /* the smallest of: the screen width, --camera-max-width (css/variables.css),
     and the width that keeps the camera shorter than the screen (4096 x 2425 artwork) */
  width: min(100%, var(--camera-max-width), calc((100vh - 32px) * 4096 / 2425));
  width: min(100%, var(--camera-max-width), calc((100svh - 32px) * 4096 / 2425));
}

/* The camera fades in once its images have loaded (js/camera/main.js adds .loaded) */
.camera-wrap #camera {
  opacity: 0;
  transition: opacity .4s ease;
}
.camera-wrap.loaded #camera { opacity: 1; }

/* ---- Phones held upright: the camera stands vertical ----
   The artwork is turned 90deg clockwise (screen on top, buttons at the bottom).
   The box below is the turned shape (2425 wide x 4096 tall), so the camera is as
   tall as the screen allows and never wider than the screen. */
@media (max-width: 700px) and (orientation: portrait) {
  .camera-wrap {
    position: relative;
    aspect-ratio: 2425 / 4096;
    width: min(100%, calc((100vh - 32px) * 2425 / 4096));
    width: min(100%, calc((100svh - 32px) * 2425 / 4096));
  }

  .camera-wrap #camera {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * 4096 / 2425);   /* the camera's long side = this box's height */
    height: auto;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* ---- Camera artwork (unchanged from the standalone camera project) ---- */

#camera {
  display: block;
  width: 100%;
  height: auto;
}

/* Screen text */
.screen-text {
  font-family: "Share Tech Mono", "Courier New", monospace;
  fill: #fff;
  stroke: #12348a;
  stroke-width: 7;
  stroke-linejoin: round;
  paint-order: stroke;
  transition: opacity 0.15s ease;
}
.screen-text.info { font-size: 84px; }
.screen-text.meta { font-size: 112px; }

/* Photo fade */
#photo { transition: opacity 0.15s ease; }
.is-swapping #photo,
.is-swapping .screen-text { opacity: 0; }

/* Description: hidden until the INFO button is pressed */
#info { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }
.show-info #info { opacity: 1; visibility: visible; }
.is-swapping #info { opacity: 0; }

/* Red status light: a brief, subtle shade change, then back */
#led.flash { animation: led-shades 0.45s ease-in-out; }
@keyframes led-shades {
  0%   { filter: none; }
  35%  { filter: brightness(1.3); }
  100% { filter: none; }
}

/* Slideshow icon on the screen: 50% when off, 100% when on */
#slideshow-icon { opacity: 0.5; transition: opacity 0.2s ease; }
.slideshow-on #slideshow-icon { opacity: 1; }

/* Left / right buttons */
.cam-btn {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.08s ease;
  outline: none;
}
.cam-btn:active { transform: scale(0.95); }
.cam-btn:focus-visible { filter: drop-shadow(0 0 22px #9ec5ff); }

/* ---- BUTTON BOOM (same soft green pulse as the folder tab, css/home.css) ----
   Only the button named by the svg's .boom-info / .boom-next / .boom-prev class pulses.
   js/camera/main.js moves it along: info -> next -> prev -> done. Slideshow never pulses. */
.cam-boom { display: none; pointer-events: none; }
.boom-info .cam-boom[data-boom="info"],
.boom-next .cam-boom[data-boom="next"],
.boom-prev .cam-boom[data-boom="prev"] { display: inline; }

.cam-boom circle {
  fill: #fff;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: cam-boom 2s ease-out infinite;
}
@keyframes cam-boom {
  0%   { transform: scale(1);    opacity: .6; }
  70%  { transform: scale(1.35); opacity: 0;  }
  100% { transform: scale(1.35); opacity: 0;  }
}
@media (prefers-reduced-motion: reduce) {
  .cam-boom circle { animation: none; opacity: 0; }
}

/* Small screens: the camera shrinks, so enlarge the on-screen text to stay readable */
@media (max-width: 900px) {
  .screen-text.info { font-size: 108px; stroke-width: 9; }
  .screen-text.meta { font-size: 136px; stroke-width: 9; }
}
@media (max-width: 520px) {
  .screen-text.info { font-size: 128px; stroke-width: 10; }
  .screen-text.meta { font-size: 150px; stroke-width: 10; }
}

/* ...except when the camera stands upright on a phone: it is big again, so the normal sizes are right */
@media (max-width: 700px) and (orientation: portrait) {
  .screen-text.info { font-size: 84px; stroke-width: 7; }
  .screen-text.meta { font-size: 112px; stroke-width: 7; }
}

@media (prefers-reduced-motion: reduce) {
  #photo, .screen-text, .cam-btn { transition: none; }
}

/* Nothing on the camera should be selectable or draggable
   (only the camera: the rest of the homepage is untouched) */
.camera-section, #camera {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#camera image { -webkit-user-drag: none; }