/* ============================================================
   Camera Loading Animation
   Usage: include this CSS, then use the HTML structure:

   <div class="cam-loader">
       <div class="cam-vf"></div>
       <div class="cam-bd"></div>
       <div class="cam-lo"></div>
       <div class="cam-ir"></div>
       <div class="cam-fl">
           <div class="cam-ln"></div>
           <div class="cam-ln"></div>
           <div class="cam-ln"></div>
       </div>
   </div>

   Variants:
   .cam-loader          — default 80px, uses --accent color or white
   .cam-loader.cam-sm   — small 44px (for inline/button spinners)
   .cam-loader.cam-dark — dark theme (white elements)
   .cam-loader.cam-light — light theme (dark elements)
   ============================================================ */

.cam-loader {
    --cam-size: 80px;
    --cam-color: var(--accent-primary, #4a90d9);
    --cam-body-bg: var(--card-bg, rgba(255,255,255,0.08));
    --cam-body-border: var(--border-color, rgba(255,255,255,0.15));
    width: var(--cam-size);
    height: var(--cam-size);
    position: relative;
    display: inline-block;
    animation: camBounce 4s ease-in-out infinite;
}

.cam-loader.cam-sm {
    --cam-size: 44px;
}

.cam-loader.cam-dark {
    --cam-color: #fff;
    --cam-body-bg: rgba(255,255,255,0.1);
    --cam-body-border: rgba(255,255,255,0.25);
}

.cam-loader.cam-light {
    --cam-color: #333;
    --cam-body-bg: rgba(0,0,0,0.04);
    --cam-body-border: rgba(0,0,0,0.12);
}

@keyframes camBounce {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(0); }
}

/* Viewfinder bump */
.cam-loader .cam-vf {
    position: absolute;
    width: calc(var(--cam-size) * 0.225);
    height: calc(var(--cam-size) * 0.125);
    background: var(--cam-color);
    opacity: 0.6;
    border-radius: 3px 3px 0 0;
    top: calc(var(--cam-size) * 0.05);
    left: calc(var(--cam-size) * 0.275);
    transform-origin: bottom center;
    animation: camVfShow 4s ease-in-out infinite;
}

@keyframes camVfShow {
    0%, 10% { transform: scaleY(0); opacity: 0; }
    20%, 80% { transform: scaleY(1); opacity: 0.6; }
    90%, 100% { transform: scaleY(0); opacity: 0; }
}

/* Camera body */
.cam-loader .cam-bd {
    position: absolute;
    width: calc(var(--cam-size) * 0.775);
    height: calc(var(--cam-size) * 0.575);
    background: var(--cam-body-bg);
    border: 2px solid var(--cam-body-border);
    border-radius: calc(var(--cam-size) * 0.125);
    top: calc(var(--cam-size) * 0.175);
    left: calc(var(--cam-size) * 0.1125);
    animation: camMorph 4s ease-in-out infinite;
}

@keyframes camMorph {
    0%, 5% { border-radius: 50%; transform: scale(0.7); opacity: 0.6; }
    15%, 85% { border-radius: calc(var(--cam-size, 80px) * 0.125); transform: scale(1); opacity: 1; }
    95%, 100% { border-radius: 50%; transform: scale(0.7); opacity: 0.6; }
}

/* Lens outer */
.cam-loader .cam-lo {
    position: absolute;
    width: calc(var(--cam-size) * 0.35);
    height: calc(var(--cam-size) * 0.35);
    border-radius: 50%;
    background: var(--cam-color);
    opacity: 0.2;
    top: calc(var(--cam-size) * 0.29);
    left: calc(var(--cam-size) * 0.325);
}

/* Lens iris */
.cam-loader .cam-ir {
    position: absolute;
    width: calc(var(--cam-size) * 0.175);
    height: calc(var(--cam-size) * 0.175);
    border-radius: 50%;
    background: var(--cam-color);
    top: calc(var(--cam-size) * 0.375);
    left: calc(var(--cam-size) * 0.4125);
    animation: camShutter 4s ease-in-out infinite;
}

@keyframes camShutter {
    0%, 40% { transform: scale(1); opacity: 1; }
    48% { transform: scale(0); opacity: 0; }
    56% { transform: scale(1.3); opacity: 1; }
    65%, 100% { transform: scale(1); opacity: 1; }
}

/* Flash container */
.cam-loader .cam-fl {
    position: absolute;
    top: calc(var(--cam-size) * 0.25);
    left: calc(var(--cam-size) * 0.5);
    opacity: 0;
    animation: camFlashShow 4s ease-in-out infinite;
}

@keyframes camFlashShow {
    0%, 46% { opacity: 0; }
    50% { opacity: 1; }
    65% { opacity: 0; }
}

/* Flash lines */
.cam-loader .cam-ln {
    position: absolute;
    width: 2.5px;
    height: 0;
    background: var(--cam-color);
    border-radius: 2px;
    transform-origin: bottom center;
    animation: camFlashLine 4s ease-out infinite;
}

.cam-loader .cam-ln:nth-child(1) { transform: rotate(-30deg); left: -4px; }
.cam-loader .cam-ln:nth-child(2) { transform: rotate(0deg); left: 0; animation-delay: 0.05s; }
.cam-loader .cam-ln:nth-child(3) { transform: rotate(30deg); left: 4px; animation-delay: 0.1s; }

@keyframes camFlashLine {
    0%, 46% { height: 0; opacity: 0; top: 0; }
    50% { height: calc(var(--cam-size, 80px) * 0.225); opacity: 1; top: calc(var(--cam-size, 80px) * -0.275); }
    60% { height: calc(var(--cam-size, 80px) * 0.225); opacity: 0; top: calc(var(--cam-size, 80px) * -0.35); }
    61%, 100% { height: 0; opacity: 0; }
}