/* ============================================================
   gallery.css — screen 3: coverflow carousel + gear-dial jog wheel
   (lightbox lives in lightbox.css)
   ============================================================ */
#gallery{background:var(--bg)}
.gal-wrap{position:relative;height:100%;display:flex;flex-direction:column;z-index:2}
#gallery .sec-head{flex:0 0 auto;margin:23px 19px 0}
#gallery .sec-head .spark{left:84px}

/* coverflow stage */
.coverflow{
  position:relative;flex:1 1 auto;min-height:0;
  perspective:1000px;overflow:hidden;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;
}
.cf-track{position:absolute;inset:0;transform-style:preserve-3d}
.cf-card{
  position:absolute;top:50%;left:50%;
  width:58%;max-width:250px;aspect-ratio:2/3;
  margin-left:calc(-29%);margin-top:-38%;
  border-radius:4px;overflow:hidden;background:#0c0c10;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  will-change:transform,filter,opacity;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .5s ease,opacity .5s ease;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  backface-visibility:hidden;
}
.cf-card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
.cf-dragging .cf-card{transition:none}

.gal-count{
  flex:0 0 auto;text-align:center;font-family:"Gaegu",cursive;
  color:var(--cream-dim);font-size:14px;letter-spacing:.14em;padding:6px 0 2px;
}

/* gear dial at the bottom */
.gal-dial{position:relative;flex:0 0 auto;height:168px;overflow:hidden}
.dial-hint{
  position:absolute;left:0;right:0;top:2px;z-index:3;text-align:center;
  font-family:"Gaegu",cursive;color:var(--cream);font-size:14px;letter-spacing:.06em;
  text-shadow:0 2px 8px #000;pointer-events:none;
  transition:opacity .4s ease;
}
.dial-hint .arrows{color:var(--yellow);font-size:16px}
.gal-dial.used .dial-hint{opacity:0}
.gear-knob{
  position:absolute;left:50%;bottom:-186px;
  width:350px;height:350px;margin-left:-175px;
  cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;
  z-index:2;
}
.gear-knob:active{cursor:grabbing}
.gear-knob img{width:100%;height:100%;display:block;-webkit-user-drag:none;
  filter:drop-shadow(0 -6px 18px rgba(129,161,245,.28))}
.gear-knob.nudge img{animation:dialNudge 2.4s ease-in-out infinite}
@keyframes dialNudge{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}