/* =====================================================================
   Galleria — Frutiger Aero photo gallery (grid, viewer, slideshow)
   ===================================================================== */
.gallery-win .win-body { overflow: hidden; }
.app.gallery { position: relative; overflow: hidden; }
.app.gallery .app-toolbar .aqua-btn.small { padding: 0.32em 1.1em; font-size: 0.85rem; }
.app.gallery .gal-sizes { display: inline-flex; gap: 4px; }
.app.gallery .gal-sizes .app-btn { width: 34px; padding: 0; justify-content: center; }
.app.gallery .gal-sizes i { display: block; background: currentColor; border-radius: 2px; opacity: 0.85; }
.app.gallery .gal-sizes [data-size="s"] i { width: 8px; height: 8px; }
.app.gallery .gal-sizes [data-size="m"] i { width: 12px; height: 12px; }
.app.gallery .gal-sizes [data-size="l"] i { width: 16px; height: 16px; }

/* ---------- grid ---------- */
.app.gallery .app-content {
  padding: 14px 16px 24px;
  background:
    url("../../assets/ui/bubble.png") right -60px bottom -70px / 260px 260px no-repeat,
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(222,243,255,0.75), rgba(180,224,255,0.6));
}
.app.gallery .gal-group { margin-bottom: 20px; }
.app.gallery .gal-group-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(225,242,255,0.78) 48%, rgba(190,228,255,0.7) 52%, rgba(225,243,255,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 16px rgba(0,40,120,0.2), 0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(0,60,150,0.12);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.app.gallery .gal-group-head img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,20,80,0.3)); }
.app.gallery .gal-group-head h3 { margin: 0; font: 700 1.02rem var(--font-display); text-shadow: 0 1px 0 rgba(255,255,255,0.9); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app.gallery .gal-count {
  font: 600 0.75rem var(--font); color: #fff; padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #a9ecff, #3aa8ff 48%, #0f7de8 52%, #0b5fd6); border: 1px solid #0b4ea8;
  text-shadow: 0 -1px 0 rgba(0,40,120,0.6); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 2px 4px rgba(0,40,120,0.3);
}
.app.gallery .gal-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.app.gallery .gal-tiles.size-s { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.app.gallery .gal-tiles.size-l { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.app.gallery .gal-tile { cursor: pointer; padding: 6px 6px 0; outline: none; user-select: none; }
.app.gallery .gal-tile:focus-visible { box-shadow: 0 0 0 3px rgba(120,210,255,0.85), 0 6px 16px rgba(0,40,120,0.2); }
.app.gallery .gal-thumb {
  position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.95); background: #bcdcf7;
  box-shadow: 0 1px 4px rgba(0,40,120,0.35);
}
.app.gallery .gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.app.gallery .gal-tile:hover .gal-thumb img { transform: scale(1.07); }
.app.gallery .gal-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 48%, rgba(255,255,255,0) 52%, rgba(0,30,90,0.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset;
}
.app.gallery .gal-cap { padding: 7px 4px 8px; font-size: 0.78rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(255,255,255,0.8); }
.app.gallery .gal-tiles.size-s .gal-cap { font-size: 0.7rem; padding: 5px 2px 6px; }

/* empty state */
.app.gallery .gal-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 30px; }
.app.gallery .gal-empty img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,20,80,0.35)); margin-bottom: 6px; }
.app.gallery .gal-empty h3 { margin: 0; font: 700 1.5rem var(--font-display); text-shadow: 0 1px 0 rgba(255,255,255,0.9); }
.app.gallery .gal-empty p { margin: 0 0 10px; opacity: 0.8; max-width: 380px; }

/* ---------- viewer (dark-blue glass) ---------- */
@keyframes gal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gal-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.app.gallery .gal-viewer {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; color: #fff;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(80,160,255,0.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0f4aa8 0%, #082f7a 40%, #041a52 100%);
  animation: gal-in 0.25s ease both;
}
.app.gallery .gal-viewer::before { /* subtle gloss band on the backdrop */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
}
.app.gallery .gal-vbar {
  position: relative; z-index: 2; flex: none; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06));
  border-bottom: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0,20,80,0.7);
}
.app.gallery .gal-vname { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.app.gallery .gal-vcount {
  flex: none; font: 700 0.9rem var(--font-display); padding: 2px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.12)); border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(0,20,80,0.35);
}
.app.gallery .gal-vclose {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,40,120,0.45); cursor: pointer; padding: 0;
  color: #fff; font-size: 0.75rem; line-height: 1; text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #ffb3a3, #e0432a); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 4px rgba(0,0,0,0.25);
}
.app.gallery .gal-vclose:hover { filter: brightness(1.15); }
.app.gallery .gal-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 74px; }
.app.gallery .gal-vimg {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 34px rgba(120,210,255,0.35);
  background: #fff;
}
.app.gallery .gal-vimg.in { animation: gal-pop 0.35s cubic-bezier(.2,1,.3,1) both; }
.app.gallery .gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; overflow: hidden;
  border: 1px solid #0b4ea8; color: #fff; padding: 0 0 6px;
  font: 700 2.2rem/1 var(--font-display); text-shadow: 0 -1px 0 rgba(0,40,120,0.7);
  background: linear-gradient(180deg, #a9ecff 0%, #3aa8ff 45%, #0f7de8 50%, #0b5fd6 100%);
  box-shadow: 0 6px 16px rgba(0,10,60,0.55), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.app.gallery .gal-arrow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 5%; height: 44%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.15)); pointer-events: none; }
.app.gallery .gal-arrow.prev { left: 14px; }
.app.gallery .gal-arrow.next { right: 14px; }
.app.gallery .gal-arrow:hover { filter: brightness(1.12) saturate(1.15); box-shadow: 0 6px 18px rgba(20,120,255,0.7), 0 0 16px rgba(140,220,255,0.7), 0 1px 0 rgba(255,255,255,0.9) inset; }
.app.gallery .gal-arrow:active { transform: translateY(-50%) scale(0.95); }
.app.gallery .gal-strip {
  flex: none; display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; overflow-y: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border-top: 1px solid rgba(255,255,255,0.3);
}
.app.gallery .gal-strip img {
  flex: none; height: 56px; width: 76px; object-fit: cover; border-radius: 6px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.45); opacity: 0.7; transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.app.gallery .gal-strip img:hover { opacity: 1; }
.app.gallery .gal-strip img.on { opacity: 1; border-color: #7ddc2b; box-shadow: 0 0 12px rgba(125,220,43,0.85); transform: scale(1.06); }

/* ---------- slideshow ---------- */
.app.gallery .gal-show { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: #02133a; color: #fff; container-type: inline-size; animation: gal-in 0.4s ease both; }
.app.gallery .ss-stage { position: absolute; inset: 0; }
.app.gallery .ss-slide { position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity, clip-path; }
.app.gallery .ss-pic { position: absolute; inset: 0; }
.app.gallery .ss-bg { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(22px) brightness(0.55) saturate(1.35); }
.app.gallery .ss-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 26px 40px 112px; box-sizing: border-box; filter: drop-shadow(0 16px 36px rgba(0,0,0,0.6)); }
.app.gallery .ss-cap {
  position: absolute; left: 18px; bottom: 96px; padding: 4px 12px; border-radius: 999px; font: 600 0.8rem var(--font);
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.12)); border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-shadow: 0 1px 2px rgba(0,20,80,0.7);
  animation: gal-fade 0.8s 0.6s ease both;
}
.app.gallery .ss-title { position: absolute; inset: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.app.gallery .ss-title .aero-text { font-size: clamp(2rem, 8cqw, 4.6rem); line-height: 1.1; animation: gal-title 1.2s cubic-bezier(.2,1.2,.3,1) both; }
.app.gallery .ss-title .ss-sub { font: 500 1.1rem var(--font); letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0,20,80,0.8); opacity: 0.95; animation: gal-fade 1s 0.5s ease both; }
.app.gallery .kind-end .aero-text { font-size: clamp(2.6rem, 11cqw, 6rem); }
.app.gallery .kind-end .aero-text, .app.gallery .kind-title .aero-text { padding: 0 0.15em; }

.app.gallery .ss-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }
.app.gallery .ss-loadbox {
  display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(180,225,255,0.3)); border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,20,80,0.5); text-shadow: 0 1px 2px rgba(0,20,80,0.6);
}
.app.gallery .ss-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); border-top-color: #7ddc2b; animation: gal-spin 0.9s linear infinite; }
@keyframes gal-spin { to { transform: rotate(360deg); } }

.app.gallery .ss-ui { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.app.gallery .ss-ui > * { pointer-events: auto; }
.app.gallery .ss-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 80%; }
.app.gallery .ss-dot {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.28);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.app.gallery .ss-dot.special { border-radius: 3px; }
.app.gallery .ss-dot:hover { background: rgba(255,255,255,0.6); }
.app.gallery .ss-dot.on { background: linear-gradient(180deg, #e2ffb0, #7ddc2b); box-shadow: 0 0 10px rgba(125,220,43,0.9); transform: scale(1.35); }
.app.gallery .ss-bar {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(190,230,255,0.4) 50%, rgba(160,215,255,0.35));
  border: 1px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 10px 30px rgba(0,20,80,0.5), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: opacity 0.3s ease;
}
.app.gallery .ss-bar .app-btn { min-width: 38px; padding: 0 10px; justify-content: center; }
.app.gallery .ss-bar .app-btn.speed { font-size: 0.75rem; min-width: 34px; padding: 0 8px; }
.app.gallery .ss-bar .sep { width: 1px; height: 22px; background: rgba(0,60,150,0.3); margin: 0 2px; }
.app.gallery .ss-bar .aqua-btn.small { padding: 0.3em 1em; font-size: 0.82rem; margin-left: 2px; }
.app.gallery .gal-show.paused .ss-bar { box-shadow: 0 10px 30px rgba(0,20,80,0.5), 0 0 0 2px rgba(125,220,43,0.7), 0 1px 0 rgba(255,255,255,0.9) inset; }

/* Movie-Maker transitions */
@keyframes gal-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gal-title  { from { opacity: 0; transform: translateY(24px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes gal-kb     { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.18) translate(var(--kbx, -3%), var(--kby, 2%)); } }
@keyframes gal-wipe   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gal-slide  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes gal-zoom   { from { transform: scale(1.15); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes gal-rot    { from { transform: rotate(-6deg) scale(1.16); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes gal-circle { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
.app.gallery .ss-slide.fx-fade { animation: gal-fade 1s ease both; }
.app.gallery .ss-slide.fx-kenburns { animation: gal-fade 0.7s ease both; }
.app.gallery .ss-slide.fx-kenburns .ss-pic { animation: gal-kb var(--dur, 5.5s) linear both; }
.app.gallery .ss-slide.fx-wipe { animation: gal-wipe 0.9s ease-in-out both; }
.app.gallery .ss-slide.fx-slide { animation: gal-slide 0.9s cubic-bezier(.2,.8,.2,1) both; box-shadow: -20px 0 40px rgba(0,0,0,0.5); }
.app.gallery .ss-slide.fx-zoom { animation: gal-zoom 1.1s ease-out both; }
.app.gallery .ss-slide.fx-rotate { animation: gal-rot 1.1s cubic-bezier(.2,.9,.3,1) both; }
.app.gallery .ss-slide.fx-circle { animation: gal-circle 1.1s ease-in-out both; }