/* Uses variables already defined in /static/css/style.css (loaded before this file) */

.concepts-topbar{
  position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--body);font-size:13px;
}
.concepts-topbar a{color:#fff;text-decoration:underline;opacity:.8;}
.concepts-topbar a:hover{opacity:1;}
.concepts-topbar .count{font-family:var(--body);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.55);}

.concept-section{padding:110px 24px;position:relative;overflow:hidden;}
.concept-section.on-dark{background:var(--ink);color:#fff;}
.concept-section.on-paper{background:var(--paper);}
.concept-head{max-width:640px;margin:0 auto 70px;text-align:center;}
.concept-head .num{
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-deep);margin-bottom:14px;display:block;
}
.on-dark .concept-head .num{color:#D8B87C;}
.concept-head h2{font-size:clamp(28px,3.6vw,42px);font-style:italic;}
.concept-head p{margin-top:16px;color:var(--ink-dim);font-size:15px;}
.on-dark .concept-head p{color:rgba(255,255,255,.6);}

/* ============ 1. APERTURE REVEAL ============ */
.aperture-stage{
  position:relative;max-width:640px;height:520px;margin:0 auto;
  border-radius:4px;overflow:hidden;background:#000;
}
.aperture-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.aperture-blades{position:absolute;inset:0;z-index:2;}
.aperture-blade{
  position:absolute;top:50%;left:50%;width:75%;height:75%;
  background:#141210;
  transform-origin:0% 0%;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
}
.aperture-stage.open .aperture-blade{transform:var(--open-transform) !important;}
.aperture-caption{
  position:absolute;bottom:28px;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.8);opacity:0;transition:opacity .8s ease .9s;
}
.aperture-stage.open .aperture-caption{opacity:1;}
.aperture-replay{
  display:block;margin:26px auto 0;font-family:var(--body);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);
  background:none;border:1px solid var(--sage-deep);border-radius:20px;
  padding:9px 20px;cursor:pointer;
}
.on-dark .aperture-replay{color:#D8B87C;border-color:#D8B87C;}

/* ============ 2. SPILLED PRINTS -> GRID ============ */
.spill-wrap{position:relative;height:280vh;}
.spill-stage{position:sticky;top:80px;height:80vh;display:flex;align-items:center;justify-content:center;}
.spill-card{
  position:absolute;width:220px;height:280px;border-radius:2px;overflow:hidden;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.4);background:#eee;
  will-change:transform;
}
.spill-card img{width:100%;height:100%;object-fit:cover;display:block;}
.spill-card .lbl{
  position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  color:#fff;font-family:var(--body);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;
}

/* ============ 3. FILM STRIP SCROLL ============ */
.filmstrip-wrap{position:relative;height:260vh;}
.filmstrip-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;perspective:1200px;}
.filmstrip-track{display:flex;gap:26px;padding:0 8vw;will-change:transform;}
.film-frame{
  position:relative;flex:0 0 auto;width:300px;height:400px;background:#141210;
  padding:26px 14px;border-radius:2px;
}
.film-frame .holes{position:absolute;left:4px;top:0;bottom:0;width:10px;display:flex;flex-direction:column;justify-content:space-between;padding:10px 0;}
.film-frame .holes.right{left:auto;right:4px;}
.film-frame .holes span{width:8px;height:8px;border-radius:2px;background:#3a352e;}
.film-frame .photo{width:100%;height:100%;overflow:hidden;border-radius:1px;}
.film-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.film-frame .cap{margin-top:12px;text-align:center;font-family:var(--body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);}

/* ============ 4. DEPTH-STACKED REVEAL ============ */
.depth-grid{
  max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  perspective:1800px;
}
.depth-card{
  position:relative;aspect-ratio:3/4.2;border-radius:2px;overflow:hidden;
  opacity:0;transform:translateZ(-600px) translateY(60px) scale(.85);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
  box-shadow:0 25px 50px -18px rgba(0,0,0,.4);
}
.depth-card.in{opacity:1;transform:translateZ(0) translateY(0) scale(1);}
.depth-card img{width:100%;height:100%;object-fit:cover;display:block;}
.depth-card .lbl{
  position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  color:#fff;font-family:var(--body);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;
}

/* ============ 5. ALBUM THAT TURNS PAGES ============ */
.album-wrap{max-width:820px;margin:0 auto;}
.album-stage{
  position:relative;height:480px;perspective:2200px;
  display:flex;align-items:center;justify-content:center;
}
.album-base{
  position:relative;width:340px;height:440px;border-radius:3px;overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.45);
}
.album-base img{width:100%;height:100%;object-fit:cover;display:block;}
.album-page{
  position:absolute;top:0;left:0;width:340px;height:440px;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform .55s cubic-bezier(.55,0,.25,1);
  transform:rotateY(0deg);
}
.album-page.flipped{transform:rotateY(-170deg);}
.album-page .face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:3px;overflow:hidden;
}
.album-page .face img{width:100%;height:100%;object-fit:cover;display:block;}
.album-page .face.back{transform:rotateY(180deg);}
.album-caption{
  position:absolute;bottom:0;left:0;right:0;padding:18px;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  color:#fff;font-family:var(--body);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;pointer-events:none;
}
.album-nav{display:flex;justify-content:center;gap:16px;margin-top:28px;}
.album-nav button{
  font-family:var(--body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--ink-faint);border-radius:20px;
  padding:10px 22px;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.album-nav button:hover{border-color:var(--sage-deep);color:var(--sage-deep);}

@media (max-width:760px){
  .concept-section{padding:70px 18px;}
  .depth-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .aperture-stage{height:380px;}
  .album-base,.album-page{width:260px;height:340px;}
}
@media (prefers-reduced-motion: reduce){
  .aperture-blade,.depth-card,.album-page{transition:none;}
}

/* Real-site integration extras */
.aperture-links{
  text-align:center;margin-top:16px;font-family:var(--body);font-size:12.5px;
  letter-spacing:.04em;color:var(--ink-dim);
}
.aperture-links a{color:var(--sage-deep);text-decoration:none;border-bottom:1px solid transparent;}
.aperture-links a:hover{border-bottom-color:var(--sage-deep);}
.album-view-link{
  display:inline-block;margin-top:14px;font-family:var(--body);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);text-decoration:underline;
}

/* ---------- Book cover (closed album) ---------- */
.book-wrap{max-width:820px;margin:0 auto;}
.book-stage{position:relative;width:100%;height:520px;}

.book-cover{
  position:absolute;inset:0;z-index:10;cursor:pointer;
  transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
  border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.45);
}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.5);}
.book-cover.open{transform:rotateY(-165deg);pointer-events:none;}
.book-cover-title{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:20px;
}
.book-cover-title .script{font-family:var(--display);font-style:italic;font-size:16px;color:#D8B87C;}
.book-cover-title h2{font-size:28px;font-style:italic;margin-top:6px;color:#fff;}
.book-cover-title .tap-hint{
  margin-top:24px;font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.45);border-radius:20px;padding:9px 18px;
}

/* ---------- Real flipbook, rendered by StPageFlip ---------- */
.flipbook-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.flipbook-container canvas,.flipbook-container .stf__parent{margin:0 auto;}
.flipbook-container .stf__wrapper{filter:drop-shadow(0 30px 55px rgba(0,0,0,.35));}
.book-html-page{background:#111;overflow:hidden;}
.book-html-page img{width:100%;height:100%;object-fit:cover;display:block;}

.album-nav button:disabled{opacity:.3;cursor:default;}
.album-nav button:disabled:hover{border-color:var(--ink-faint);color:var(--ink);}
.album-count{
  font-family:var(--body);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);
  margin:0 4px;align-self:center;
}