/* ==========================================================
   COMPOSITION — art direction per breakpoint (v3 app layout)
   Every layer is addressable by class / [data-asset].
   ========================================================== */

/* placeholders (until the real asset arrives) */
div.layer { background: var(--color-surface-2); overflow: hidden; }
.ph-guide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0.9; }
.layer[data-layer="BACKGROUND"] .ph-guide, .layer[data-layer="LANDSCAPE"] .ph-guide, .layer[data-layer="TEXTURE"] .ph-guide, .act-graphic .ph-guide { object-fit: cover; object-position: 50% 50%; }
.ph-label { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 2; display: grid; gap: 1px; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-text); color: #fff; font-size: 0.625rem; line-height: 1.4; }
.ph-label i { font-style: normal; opacity: 0.75; }
.acts div.layer, .closing div.layer, .site-footer div.layer { background: #1c3b2c; }

/* real assets */
picture.layer img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
picture.layer[data-layer="ELEPHANT"] img, picture.layer[data-layer="HUMAN"] img, picture.layer[data-layer="COMMUNITY"] img { object-fit: contain; object-position: var(--focus, 50% 100%); }

/* ---------- HERO card layers ---------- */
.hero .layer { position: absolute; --d: 0; transform: translate3d(calc(var(--mx, 0) * var(--d) * 2.5px), 0, 0); transition: transform 600ms var(--ease-enter); will-change: transform; }
.hero picture.layer { max-width: none; }
.hero .layer[data-depth="2"] { --d: 2; } .hero .layer[data-depth="4"] { --d: 4; } .hero .layer[data-depth="6"] { --d: 6; }
.hero .l-bg { inset: -1rem -1.5rem 0; }
.hero picture.l-bg img { object-position: var(--focus, 62% 55%); }
/* mobile: elephant big on the right, elder on the left, copy over the bottom shade */
.hero .l-elephant { right: -16%; bottom: 18%; width: 88%; height: 66%; z-index: 2; }
.hero .l-human { left: -4%; bottom: 18%; width: 46%; height: 36%; z-index: 3; }
.hero .l-fg { left: -24px; right: -24px; bottom: 14%; width: auto; height: clamp(2.5rem, 12vw, 6rem); z-index: 4; }
.hero picture.l-fg img { object-fit: cover; object-position: 50% 0%; }
.hero .l-deco { display: none; }
@media (min-width: 768px) {
  .hero .l-elephant { right: -6%; bottom: 0; width: 56%; height: 86%; }
  .hero .l-human { left: auto; right: 42%; bottom: 0; width: 26%; height: 46%; }
  .hero .l-fg { bottom: -2px; height: clamp(3rem, 9vw, 8rem); }
}
@media (min-width: 1024px) {
  .hero .l-elephant { right: 2%; width: 40%; height: 92%; }
  .hero .l-human { right: 34%; width: 19%; height: 52%; }
}
@media (min-width: 1280px) {
  .hero .l-deco { display: block; right: 42%; top: 0; width: 6.5rem; height: auto; aspect-ratio: 561 / 942; z-index: 2; }
  .hero picture.l-deco img { object-fit: contain; object-position: 50% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero picture.l-bg img { animation: drift 30s ease-in-out infinite alternate; transform-origin: 62% 60%; }
  .hero picture.l-elephant img { animation: sway-elephant 8s ease-in-out infinite; transform-origin: 50% 100%; }
  .hero picture.l-human img { animation: breathe 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .hero picture.l-fg img { animation: wind 7s ease-in-out infinite; transform-origin: 50% 100%; }
  .hero picture.l-deco img { animation: swing 6s ease-in-out infinite; transform-origin: 50% 0; }
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.07) translateX(-1%); } }
@keyframes sway-elephant { 0%, 100% { transform: rotate(-0.5deg); } 50% { transform: rotate(0.5deg) scale(1.008); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012) rotate(-0.4deg); } }
@keyframes wind { 0%, 100% { transform: skewX(0); } 30% { transform: skewX(-2.5deg); } 60% { transform: skewX(1.2deg); } }
@keyframes swing { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }

/* ---------- STORY cards (portrait 4:5) ---------- */
.s-archive, .s-festival, .s-village { inset: 0; }
picture.s-festival img { object-position: var(--focus, 50% 60%); }
picture.s-archive img { object-position: var(--focus, 50% 60%); }
/* "Girl Offering": two layers keep their original relation (banana meets trunk) and stand on the yard (feet ~3% from the bottom).
   Portrait card 4:5 (mobile) */
.s-people   { left: 2%;     width: 22.7%;  bottom: 3%;    height: 26.8%; z-index: 3; }
.s-elephant { left: 24.93%; width: 73.07%; bottom: 3.6%;  height: 52.7%; z-index: 2; }
picture.s-village img { object-position: var(--focus, 32% 62%); }
/* landscape card 5:4 (desktop) — group = 86% of the width */
@media (min-width: 1024px) {
  .s-people   { left: 7%;     width: 20.36%; bottom: 3%;   height: 37.55%; }
  .s-elephant { left: 27.55%; width: 65.45%; bottom: 3.9%; height: 73.75%; }
  picture.s-village img { object-position: var(--focus, 40% 60%); }
}

/* ---------- closing / footer ---------- */
.closing-graphic .layer, .footer-graphic .layer { inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero .layer, .hero picture.layer img { transform: none !important; animation: none !important; will-change: auto; }
}
.act-graphic picture.layer img { object-fit: cover; object-position: var(--focus, 50% 50%); }   /* act photos fill the frame */
/* closing photo fills its half of the card; footer photo = wide banner across the card */
.closing-graphic picture.layer img { object-fit: cover; object-position: var(--focus, 50% 45%); }
.footer-graphic picture.layer img { object-fit: cover; object-position: var(--focus, 50% 60%); }

/* mobile hero: copy at the top, picture underneath (nothing covers the elephant or the elder) */
@media (max-width: 767px) {
  .hero-card { align-content: start; min-height: clamp(36rem, 88svh, 46rem); }
  .hero-shade { background: linear-gradient(to bottom, rgb(10 22 15 / 0.88) 0%, rgb(10 22 15 / 0.55) 34%, rgb(10 22 15 / 0) 58%); }
  .hero .l-elephant { right: -18%; bottom: 0; width: 92%; height: 56%; }
  .hero .l-human { left: -6%; bottom: 0; width: 46%; height: 32%; }
  .hero .l-fg { bottom: -2px; height: clamp(2.5rem, 12vw, 4.5rem); }
  .hero picture.l-bg img { object-position: var(--focus, 60% 70%); }
}