/* Ascended Grace — Shared Artwork Experience
   Subtle motion, breathing room, and collection navigation.
   Used with /js/experience.js
*/

/* 1. Give the main artwork more presence and breathing room */
.hero{
  padding-top:92px;
  padding-bottom:118px;
  gap:96px;
}

.art-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:560px;
}

/* 2. Main artwork gently settles into view */
.art-frame img{
  width:min(100%,680px);
  opacity:0;
  transform:translateY(16px) scale(.975);
  transition:
    opacity 1.35s cubic-bezier(.22,.61,.36,1) .18s,
    transform 1.5s cubic-bezier(.22,.61,.36,1) .18s;
  will-change:opacity,transform;
}

body.experience-ready .art-frame img{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* 3. An Invitation to Remember — discovered gently on scroll */
.remember{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 1.05s ease,
    transform 1.15s cubic-bezier(.22,.61,.36,1);

  /* Additional breathing room */
  margin-top:18px;
  margin-bottom:108px;
  padding:54px 54px;
}

.remember.experience-visible{
  opacity:1;
  transform:translateY(0);
}

.remember .question{
  margin-top:28px;
  color:#9A4F12 !important;
}

/* 4. Previous / Collection / Next — quiet continuation */
.artwork-pagination{
  padding-top:42px;
  padding-bottom:6px;
  gap:36px;
}

.artwork-pagination a{
  padding:12px 0;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.artwork-pagination a:hover{
  opacity:.72;
}

.artwork-pagination .prev:hover{
  transform:translateX(-3px);
}

.artwork-pagination .next:hover{
  transform:translateX(3px);
}

.artwork-pagination .collection:hover{
  transform:translateY(-2px);
}

.nav-title{
  font-size:18px;
}

/* Tablet */
@media(max-width:850px){
  .hero{
    padding-top:58px;
    padding-bottom:88px;
    gap:62px;
  }

  .art-frame{
    min-height:0;
    padding:18px 0 12px;
  }
}

/* Mobile */
@media(max-width:700px){
  .remember{
    margin:8px 20px 78px;
    padding:40px 26px;
  }
}

/* Accessibility: honor the visitor's motion preference */
@media(prefers-reduced-motion:reduce){
  .art-frame img,
  .remember,
  .artwork-pagination a{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}