/* 03 — Enchanted Diary: 2-screen carousel + light per-slide entrance.
   The Figma file's other 10 top-level frames ("Screen 01"-"Screen 10")
   sit in a dense grid below the two "Layout NN" frames, directly under
   an "ANIMATION" label, each a near-duplicate of Layout 01/02 with only
   small offsets -- the same Smart-Animate rigging signature documented
   for template 02, here spanning a multi-step diary-opening/page-flip
   transition instead of a single entrance. See README for scope. */

.canvas {
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

/* These target elements that also carry Tailwind transform utilities
   (e.g. -translate-x-1/2 for centering) -- animating the `transform`
   shorthand here would silently replace that centering transform. The
   standalone CSS `translate` property composes independently, so the
   entrance motion doesn't clobber Tailwind's own transform. */
.slide.active [data-node-id="3:3908"],
.slide.active [data-node-id="3:3930"] {
  animation: nav-in 0.6s ease both;
}

.slide.active [data-node-id="3:3864"],
.slide.active [data-node-id="3:3925"],
.slide.active [data-node-id="3:3926"] {
  animation: rise-in 0.7s ease both;
  animation-delay: 0.15s;
}

@keyframes nav-in {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.carousel-btn:active {
  transform: translateY(0);
}

.carousel-dots {
  display: flex;
  gap: 8px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.carousel-dots button.active {
  background: #fff;
  width: 20px;
}