/* C'est La Vie Photography — the opening album.
   The visit starts on a closed album cover: Caitlynn's typeset wordmark
   (the same lettering her Wix site uses) over her white-rose bouquet
   photo in a white border. The album WAITS closed — nothing moves until
   the visitor taps/clicks, then the cover flips open on its left edge
   like a real album and the whole overlay lifts away. */

#album-intro {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(760px 480px at 50% 32%, #4A3121 0%, #2C1D13 64%, #1E130B 100%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
#album-intro.lift { opacity: 0; visibility: hidden; transform: translateY(-2.5%); pointer-events: none; }
#album-intro.intro-done { display: none; }
.album-book {
  position: relative; width: min(400px, 86vw, 70vh); aspect-ratio: 3/3.9;
  perspective: 1600px;
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(.5,.05,.3,1);
  animation: album-in .7s ease-out backwards;
}
/* When the cover opens, the spread is twice the book's width. On narrow
   screens the book shifts so its spine sits at the screen's center and
   scales down until BOTH pages fit — otherwise the inside cover (with
   Caitlynn's photo) slides off the left edge. Steps sized per range. */
@media (max-width: 560px) {
  #album-intro.opening .album-book { transform: translateX(50%) scale(.53); }
}
@media (min-width: 561px) and (max-width: 700px) {
  #album-intro.opening .album-book { transform: translateX(50%) scale(.69); }
}
@media (min-width: 701px) and (max-width: 880px) {
  #album-intro.opening .album-book { transform: translateX(50%) scale(.84); }
}
.album-page-under {
  position: absolute; inset: 0; border-radius: 6px 14px 14px 6px;
  background: linear-gradient(160deg, #FFFDF8, #F3EAD9);
  box-shadow: 0 34px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(176,81,43,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.album-cover {
  position: absolute; inset: 0; z-index: 2;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.5,.05,.3,1);
}
#album-intro.opening .album-cover { transform: rotateY(-160deg); }
.cover-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cover-front {
  border-radius: 6px 14px 14px 6px;
  background:
    radial-gradient(rgba(255,247,236,.06) 1px, transparent 1.2px),
    linear-gradient(155deg, #5A3A26, #3E2718 58%, #33200F);
  background-size: 9px 9px, auto;
  box-shadow: 0 34px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(233,213,195,.22), inset 6px 0 14px rgba(0,0,0,.45);
}
/* The inside of the cover, revealed by the flip: Caitlynn's own photo
   tucked in like the first print in the album. */
.cover-back {
  transform: rotateY(180deg);
  border-radius: 14px 6px 6px 14px;
  background: linear-gradient(205deg, #FFFDF8, #F3EAD9);
  box-shadow: inset 0 0 0 1px rgba(176,81,43,.25), inset -8px 0 18px rgba(62,44,34,.12);
}
.cover-back-photo {
  margin: 0; width: 72%; background: #FFFDF8; padding: 9px 9px 6px;
  border-radius: 2px; box-shadow: 0 16px 34px rgba(30,19,11,.4);
  transform: rotate(1.6deg);
}
.cover-back-photo img { display: block; width: 100%; aspect-ratio: 4/4.6; object-fit: cover; filter: sepia(.14) saturate(1.02); }
.cover-back-photo figcaption {
  font-family: 'Caveat', cursive; font-size: 24px; color: #3E2C22;
  text-align: center; padding: 7px 4px 5px;
}
.cover-frame {
  width: 84%; height: 88%; border: 1.5px solid rgba(212,175,55,.55); border-radius: 4px 10px 10px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 16px;
}
.cover-sprig { color: #D4AF37; font-size: 20px; line-height: 1; margin-bottom: 6px; }
.cover-title {
  font-family: 'Great Vibes', cursive; font-size: 52px; line-height: 1.05; color: #F5E7CE;
  text-shadow: 0 1px 0 rgba(212,175,55,.35);
}
.cover-title.dark { color: #3E2C22; text-shadow: none; }
.cover-sub { font-size: 12px; font-weight: 800; letter-spacing: .42em; color: #D9B98A; margin: 2px 0 16px; text-indent: .42em; }
.cover-sub.dark { color: #B0512B; }
.cover-photo {
  width: 72%; aspect-ratio: 4/3; object-fit: cover; background: #FFFDF8;
  padding: 7px 7px 20px; border-radius: 2px; box-shadow: 0 12px 26px rgba(0,0,0,.45);
  transform: rotate(-2deg);
}
.cover-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; color: #F5E7CE; margin-top: 16px; }
.cover-place { font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,231,206,.65); margin-top: 3px; text-indent: .3em; }
.cover-open {
  font-family: 'Caveat', cursive; font-size: 19px; color: rgba(245,231,206,.8); margin-top: 14px;
  animation: cover-pulse 1.6s ease-in-out infinite;
}
@keyframes cover-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes album-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Scroll reveals — album photos settle in like pages being turned:
   a soft rise with the last bit of tilt easing out. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }
.photo[data-reveal] { transform: translateY(24px) rotate(var(--tilt, 0deg)); }
.photo[data-reveal].revealed { transform: rotate(var(--tilt, 0deg)); }
.photo[data-reveal].revealed:hover { transform: rotate(0deg) translateY(-5px) scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .photo[data-reveal] { transform: rotate(var(--tilt, 0deg)); }
  #album-intro { transition-duration: .1s; }
  .album-cover { transition-duration: .1s; transition-delay: 0s; }
  .cover-open { animation: none; }
  .marquee-track { animation: none; }
}