*{box-sizing:border-box}
.czt-mie{position:relative;width:100%;min-height:300px;overflow:hidden;background:#d1d1d1}
.czt-mie > #app{position:relative;width:100%;min-height:inherit}
.czt-mie .background-wrapper{position:relative;width:100%;min-height:inherit;transition:filter .5s ease}
.czt-mie .background-wrapper.blur{filter:blur(var(--blur-amount,8px))}

.czt-mie .tile{
  box-shadow: 20px 20px 30px rgba(0,0,0,.4), -18px -18px 25px rgba(255,255,255, var(--tile-glow-alpha, .95)), inset 5px 5px 8px rgba(255,255,255, var(--tile-glow-alpha-inner, .85)), inset -5px -5px 8px rgba(0,0,0,.15);
  filter:drop-shadow(8px 8px 8px rgba(0,0,0,.2));
position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;cursor:pointer;background:linear-gradient(145deg,#fafafa,#c1c1c1),linear-gradient(315deg,#e0e0e0,#fff);background-blend-mode:multiply;animation:floatTile 5s ease-in-out infinite alternate;transform-style:preserve-3d;will-change:transform,opacity}
@keyframes floatTile{0%{transform:translate(0,0) scale(1.03)}50%{transform:translate(3px,-3px) scale(1.035)}100%{transform:translate(-2px,2px) scale(1.03)}}
.czt-mie .tile img{width:100%;height:100%;object-fit:cover;user-select:none;backface-visibility:hidden;pointer-events:none;display:block}

.czt-mie .dark-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,var(--overlay-opacity,0.35));opacity:0;pointer-events:none;transition:opacity .5s ease}
.czt-mie .dark-overlay.active{opacity:1;pointer-events:auto}

#app { position: relative; width: 100%; min-height: inherit; overflow: hidden; }
.background-wrapper { width: 100%; min-height: inherit; position: relative; z-index: 1; transition: filter 0.5s ease; }
.background-wrapper.blur { filter: blur(var(--blur-amount,8px)); }

.overlay-container { position: absolute; border-radius: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 1.2s ease, box-shadow 0.5s ease, transform 1.2s ease-in-out; max-width: none; max-height: none; will-change: transform, opacity, box-shadow; overflow: hidden; z-index: 20; background: #000; transform-origin: center center; user-select: none; }
.overlay-container.active { opacity: 1; pointer-events: auto; }
.overlay-container.roundless { border-radius: 0 !important; box-shadow: 0 0 15px 6px rgba(255,255,255,0.6), 0 0 30px 12px rgba(255,255,255,0.3); animation: glowPulse 1.8s ease-in-out infinite alternate; }
@keyframes glowPulse { 0% { box-shadow: 0 0 10px 4px rgba(255,255,255,0.4), 0 0 20px 8px rgba(0,0,0,0.2); } 100% { box-shadow: 0 0 20px 6px rgba(255,255,255,0.7), 0 0 40px 12px rgba(255,255,255,0.4); } }
.overlay-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; backface-visibility: hidden; display: block; transform-origin: center center; }
@keyframes kenBurnsZoom { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(var(--kb-scale,1.08)) translate(-2%, -2%); } }

/* Caption starts hidden; shown only by JS after transform end */
.caption {
  position: absolute; bottom: 0; left: 0; width: 100%; max-width: 100%;
  padding: 14px 20px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: #fff;
  font: 600 1.2rem/1.45 'Malgun Gothic','Apple SD Gothic Neo',system-ui,Arial;
  white-space: nowrap; overflow: hidden;
  border-right: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  user-select: none;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
.caption.cap-show { opacity: 1; visibility: visible; }
.caption.typing { animation: none; }
@keyframes blink-caret { 50% { border-color: transparent; } }

/* Dim tiles too when dark overlay is active */
.czt-mie.tiles-dim .tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0, var(--overlay-opacity, 0.35));
  pointer-events:none;
  transition: opacity .3s ease;
}


/* When overlay is active, scale tile glow down with overlay opacity */