/* =========================================================
   SendPics Loader (Light/Dark) — Full CSS
   - Camera centered on screen
   - Flavor text + progress bar below camera
   - Light/Dark themes via data-theme on #wrap (.camera-wrap)
   - Fullscreen shutter “blades” close on redirect (no seam stripe)
   ========================================================= */

/* ===== Base ===== */
html, body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.screen{
  position:absolute;
  inset:0;
  display:block;
}

/* ===== Theme variables ===== */
.camera-wrap[data-theme="light"]{
  --bg: #f7f8fc;
  --bg2:#eef1ff;
  --fg: #0b0b10;

  --border-gray: #dcdcdc;
  --border-dark: #a3a3a3;

  --panelA: #e2e2e2;
  --panelB: #f5f5f5;

  --metalA: #b0b0b0;
  --metalB: #e2e2e2;

  --sideA: #828181;
  --sideB: #4f4d4d;

  --glassA: #1e1e1e;
  --glassB: #696767;

  --barTrack: rgba(0,0,0,.10);
  --barBorder: rgba(0,0,0,.18);

  --barFill1: rgba(23,192,253,.95);
  --barFill2: rgba(23,192,253,.35);

  --shadow: 0px 30px 50px -20px rgba(0,0,0,.35);
}

.camera-wrap[data-theme="dark"]{
  --bg: #000000;
  --bg2:#0b0b12;
  --fg: #ffffff;

  --border-gray: #2a2a2a;
  --border-dark: #141414;

  --panelA: #0d0d0e;
  --panelB: #1a1a1c;

  --metalA: #1b1b1b;
  --metalB: #343434;

  --sideA: #191919;
  --sideB: #0f0f0f;

  --glassA: #050505;
  --glassB: #2b2b2b;

  --barTrack: rgba(255,255,255,.10);
  --barBorder: rgba(255,255,255,.14);

  --barFill1: rgba(23,192,253,.95);
  --barFill2: rgba(23,192,253,.35);

  --shadow: 0px 30px 50px -20px rgba(0,0,0,.75);
}

/* background follows theme vars */
body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(23,192,253,.10), transparent 60%),
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--fg);
}

/* ===== Layout: camera centered, loader below ===== */
.camera-wrap{
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Center the camera itself */
.camera{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: var(--shadow);
  animation: 5s angle infinite;
}

/* Optional: extra grounding shadow in light mode */
.camera-wrap[data-theme="light"] .camera{
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.18));
}

.camera-top, .camera-mid, .camera-bottom{
  width: 360px;
}

/* Put flavor + bar below the camera */
.load{
  position: absolute;
  left: 50%;
  top: calc(50% + 200px); /* distance below camera; tweak if desired */
  transform: translateX(-50%);
  width: min(860px, 92vw);
  display: grid;
  gap: 12px;
}

/* Flavor text */
.flavor{
  font-size: 15px;
  letter-spacing: .2px;
  opacity: .9;
  text-align: left;
  color: var(--fg);
  min-height: 20px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.camera-wrap[data-theme="light"] .flavor{
  text-shadow: none;
}

/* Progress bar */
.load-track{
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--barTrack);
  border: 1px solid var(--barBorder);
  overflow: hidden;
}
.load-bar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--barFill1), var(--barFill2));
}

/* ===== Camera TOP ===== */
.camera-top{
  position: relative;
  height: 60px;
  background: linear-gradient(to right, var(--panelA) 0%, var(--panelB) 10%, var(--panelB) 90%, var(--panelA) 100%);
  border: 1px solid var(--border-gray);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: inset 0 12px 12px -12px rgba(255,255,255,.25);
}
.camera-top:before{
  display: block;
  content: '';
  position: absolute;
  top: -20px;
  right: 0;
  width: 210px;
  height: 20px;
  background: linear-gradient(to right, var(--panelB) 0%, var(--panelB) 174px, var(--panelA) 100%);
  border: 1px solid var(--border-gray);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  box-shadow: inset 0 12px 12px -12px rgba(255,255,255,.22);
}

/* Zoom */
.camera-top .zoom{
  position: absolute;
  top: -15px;
  left: 30px;
  width: 42px;
  height: 9px;
  background: linear-gradient(to right, var(--metalA) 0%, var(--metalB) 30%, var(--metalB) 70%, var(--metalA) 100%);
  border: 1px solid var(--border-dark);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: inset 0 10px 10px -10px rgba(255,255,255,.25);
}
.camera-top .zoom:before{
  display: block;
  content: '';
  position: relative;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 4px;
  background: linear-gradient(to right, var(--metalA) 0%, var(--metalB) 50%, var(--metalA) 100%);
  border: 1px solid var(--border-dark);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.camera-top .zoom:after{
  display: block;
  content: '';
  position: relative;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 4px;
  background: linear-gradient(to right, var(--metalA) 0%, var(--metalB) 30%, var(--metalB) 70%, var(--metalA) 100%);
  border: 1px solid var(--border-dark);
  border-bottom: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

/* Mode changer */
.camera-top .mode-changer{
  position: absolute;
  top: -20px;
  left: 82px;
  width: 60px;
  height: 16px;
  background: linear-gradient(to right, var(--metalA) 0%, var(--metalB) 30%, var(--metalB) 70%, var(--metalA) 100%);
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  box-shadow: inset 0 10px 10px -10px rgba(255,255,255,.25);
}
.camera-top .mode-changer:after{
  display: block;
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, var(--metalA) 0%, var(--metalB) 50%, var(--metalA) 100%);
  border: 1px solid var(--border-dark);
  border-bottom: none;
}

/* Sides */
.camera-top .sides{
  width: 100%;
  position: relative;
}
.camera-top .sides:before,
.camera-top .sides:after{
  display: block;
  content: '';
  position: absolute;
  top: 24px;
  width: 8px;
  height: 30px;
  background: linear-gradient(to bottom, var(--sideA) 0%, var(--sideB) 100%);
  border: 1px solid #3E3C3D;
  border-radius: 2px;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,.5);
}
.camera-top .sides:before{
  left: -4px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.camera-top .sides:after{
  right: -4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* Range finder */
.camera-top .range-finder{
  position: absolute;
  top: 10px;
  left: 105px;
  width: 30px;
  height: 20px;
  background: var(--glassA);
  border-radius: 3px;
  box-shadow: inset 0 0 5px 3px rgba(0,0,0,.35);
}
.camera-top .range-finder:before{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--glassB);
  border-radius: 100%;
}

/* Focus knob */
.camera-top .focus{
  position: absolute;
  top: -14px;
  left: 156px;
  width: 15px;
  height: 15px;
  background: #3F3D3E;
  border-radius: 100%;
  box-shadow: inset 0 0 4px 3px rgba(0,0,0,.35), inset 0 4px 5px 0 rgba(255,255,255,.12);
}

/* Red button */
.camera-top .red{
  position: absolute;
  top: 5px;
  left: 165px;
  width: 30px;
  height: 30px;
  background: #DC2839;
  border-radius: 100%;
}

/* View finder */
.camera-top .view-finder{
  position: absolute;
  left: 210px;
  width: 48px;
  height: 30px;
  background: radial-gradient(ellipse at center, var(--glassB) 0%, var(--glassA) 85%, var(--glassA) 100%);
  border: 3px solid #312F2F;
  border-radius: 4px;
  box-shadow: inset 0 8px 8px -8px rgba(255,255,255,.20);
}

/* Flash */
.camera-top .flash{
  position: absolute;
  top: -6px;
  right: 20px;
  width: 58px;
  height: 46px;
  background: radial-gradient(ellipse at center, var(--glassB) 0%, var(--glassA) 70%, var(--glassA) 100%);
  border: 2px solid #312F2F;
  border-radius: 3px;
  box-shadow: inset 0 8px 8px -8px rgba(255,255,255,.20);
}
.camera-top .flash:before,
.camera-top .flash:after{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.camera-top .flash:before{
  width: 90%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(105,103,103,1) 0%, rgba(30,30,30,1) 50%, rgba(30,30,30,1) 100%);
}
.camera-top .flash:after{
  width: 16px;
  height: 14px;
  background: #797979;
  border-top-left-radius: 8px 2px;
  border-top-right-radius: 8px 2px;
  border-bottom-left-radius: 8px 2px;
  border-bottom-right-radius: 8px 2px;
}
.camera-top .flash .light{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 100%;
  z-index: 2;
  animation: 1s flash infinite;
}

/* ===== Camera MID ===== */
.camera-mid{
  position: relative;
  height: 130px;
  background: linear-gradient(to right, var(--panelA) 0%, var(--panelB) 10%, var(--panelB) 90%, var(--panelA) 100%);
  border: 1px solid var(--border-gray);
  border-top: none;
  border-bottom: none;
  box-shadow: inset 0 12px 12px -12px rgba(255,255,255,.22);
}

.camera-mid .sensor{
  position: absolute;
  top: 40px;
  left: 105px;
  width: 30px;
  height: 30px;
  background: #545252;
  border: 2px solid #545252;
  border-radius: 100%;
  box-shadow: inset 0 12px 12px -10px rgba(255,255,255,.25), 0 2px 5px 1px rgba(0,0,0,.3);
}
.camera-mid .sensor:before,
.camera-mid .sensor:after{
  display:block;
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.camera-mid .sensor:before{
  width:20px;
  height:20px;
  background: linear-gradient(to bottom, #E9E9E9 0%, #BDBDBD 100%);
  border-radius:100%;
}
.camera-mid .sensor:after{
  width:12px;
  height:12px;
  background:#FAFAFA;
  border-radius:100%;
  box-shadow: 0 2px 3px 0 #747474;
}

.camera-mid .lens{
  position: absolute;
  top: -20px;
  left: 130px;
  width: 155px;
  height: 155px;
  background: radial-gradient(ellipse at center, rgb(0,0,0) 0%, rgb(0,0,0) 15%,rgb(39,37,37) 30%,rgb(64,62,63) 30%,rgb(64,62,63) 31%,rgb(64,62,63) 40%,rgb(233,235,236) 41%,rgb(233,235,236) 44%,rgb(176,177,178) 48%,rgb(232,233,234) 50%,rgb(232,233,234) 60%,rgb(247,248,248) 60%,rgb(120,121,121) 65%,rgb(255,255,255) 66%,rgb(255,255,255) 100%);
  border: 1px solid #B6B7B8;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 7px 15px -2px rgba(0,0,0,.4), inset 0 -2px 15px -2px rgba(0,0,0,.2), inset 0 7px 15px -2px #FFF;
}
.camera-mid .lens:before{
  display:block;
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:25px;
  height:25px;
  background: rgba(0,0,0,.7);
  border-radius: 100%;
  box-shadow: inset 0 5px 3px -2px rgba(255,255,255,.5), inset 0 -5px 20px -8px rgba(255,255,255,.5);
}

/* ===== Camera BOTTOM ===== */
.camera-bottom{
  height: 16px;
  background: linear-gradient(to right, var(--panelA) 0%, var(--panelB) 10%, var(--panelB) 90%, var(--panelA) 100%);
  border: 1px solid var(--border-gray);
  border-bottom: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 12px 12px -12px rgba(255,255,255,.22);
}

/* ===== Shutter overlay (flaps) — no seam stripe ===== */
.shutter{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms linear;
  z-index: 9999;
  background: transparent;
}
.shutter.is-closing{
  opacity: 1;
}

.flap{
  width: 150vmax;
  height: 150vmax;
  position: absolute;
  bottom: 50%;
  right: 50%;
  will-change: transform;
  transform-origin: bottom right;

  border: none;

  background:
    linear-gradient(35deg, #1a1a1a, #000 60%),
    radial-gradient(closest-side at 70% 40%, rgba(255,255,255,.06), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);

  --p: calc(var(--i) / var(--flaps));
  transform:
    rotate(-0.5turn)
    rotate(calc(1turn * var(--p)))
    skewX(30deg)
    translateX(-100%)
    translateY(90%);

  filter: brightness(0.98);
}

.shutter.is-closing .flap{
  animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.03s forwards;
}

/* cover the join point */
.shutter::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.20), rgba(0,0,0,.95));
  box-shadow: 0 0 18px rgba(0,0,0,.6);
  opacity: 0;
}
.shutter.is-closing::after{
  opacity: 1;
  transition: opacity 120ms linear;
}

@keyframes click{
  0%{
    transform:
      rotate(-0.5turn)
      rotate(calc(1turn * var(--p)))
      skewX(30deg)
      translateX(-100%)
      translateY(90%);
  }
  48%, 52%{
    transform:
      rotate(-0.25turn)
      rotate(calc(1turn * var(--p)))
      skewX(30deg)
      translateX(0%)
      translateY(0%);
  }
  100%{
    transform:
      rotate(-0.25turn)
      rotate(calc(1turn * var(--p)))
      skewX(30deg)
      translateX(0%)
      translateY(0%);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .camera{ animation: none; }
  .camera-top .flash .light{ animation: none; }
  .shutter.is-closing .flap{ animation-duration: 0.25s; }
}

/* ===== Keyframes ===== */
@keyframes flash{
  0%   { width: 0;   height: 0; }
  20%  { width: 200px; height: 200px; }
  25%  { width: 0;   height: 0; }
  45%  { width: 200px; height: 200px; }
  50%  { width: 0;   height: 0; }
  100% { width: 0;   height: 0; }
}

@keyframes angle{
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) rotate(2deg); }
  75%  { transform: translate(-50%, -50%) rotate(-2deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}