/* ============================================================
   Animation library — keyframes + scroll-reveal utilities
   ============================================================ */

/* ---------- generic reveal engine (IntersectionObserver adds .in-view) ---------- */
[data-reveal]{
  opacity:0;
  transition: opacity .9s var(--ease-silk), transform .9s var(--ease-silk), filter .9s var(--ease-silk);
  will-change:transform,opacity;
}
[data-reveal].in-view{ opacity:1; transform:none; filter:none; }

[data-reveal="up"]{ transform:translateY(38px); }
[data-reveal="down"]{ transform:translateY(-38px); }
[data-reveal="left"]{ transform:translateX(38px); }
[data-reveal="right"]{ transform:translateX(-38px); }
[data-reveal="scale"]{ transform:scale(.88); }
[data-reveal="blur"]{ filter:blur(14px); transform:scale(1.02); }
[data-reveal="clip"]{
  clip-path:inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-silk), opacity .4s;
}
[data-reveal="clip"].in-view{ clip-path:inset(0 0 0% 0); }

.stagger > [data-reveal]{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- living background ---------- */
.living-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.living-bg .glow{
  position:absolute; width:60vw; height:60vw; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.10), transparent 65%);
  top:-20%; right:-10%;
  animation: driftA 26s ease-in-out infinite alternate;
}
.living-bg .glow2{
  position:absolute; width:50vw; height:50vw; border-radius:50%;
  background:radial-gradient(circle, rgba(122,35,35,.14), transparent 65%);
  bottom:-15%; left:-10%;
  animation: driftB 32s ease-in-out infinite alternate;
}
@keyframes driftA{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-4%,3%) scale(1.08);} }
@keyframes driftB{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(3%,-4%) scale(1.1);} }
.living-bg canvas{ position:absolute; inset:0; opacity:.55; }

/* ---------- animated section circles (home) ---------- */
.circle-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:28px; position:relative; z-index:1;
}
.circle-card{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:scale(.6) rotate(-8deg);
  transition:transform .55s var(--ease-spring), box-shadow .4s var(--ease-silk);
  animation:circleIn .7s var(--ease-spring) forwards;
  animation-delay:calc(var(--i,0) * 110ms);
}
@keyframes circleIn{
  0%{ opacity:0; transform:scale(.55) rotate(-10deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.circle-card .ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--gold-700);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900));
  overflow:hidden;
  transition:border-color .4s, box-shadow .4s;
}
.circle-card .ring img{
  width:100%; height:100%; object-fit:cover; opacity:.75;
  transition:transform 1.4s var(--ease-silk), opacity .4s;
}
.circle-card .label{
  position:absolute; bottom:-2.1em; left:0; right:0; text-align:center;
  font-family:var(--font-display); font-size:1.05rem; color:var(--parchment);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s;
}
.circle-card .deco{
  position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed transparent; transition:border-color .4s;
}
.circle-card:hover{ transform:scale(1.07); }
.circle-card:hover .ring{ border-color:var(--gold-300); box-shadow:var(--shadow-gold); }
.circle-card:hover .ring img{ transform:scale(1.14); }
.circle-card:hover .label{ opacity:1; transform:translateY(0); }
.circle-card:hover .deco{ border-color:rgba(201,162,39,.35); }
.circle-card:active{ transform:scale(.98); }
.circle-card.opening{ animation:circleOpen .55s var(--ease-silk) forwards; z-index:5; }
@keyframes circleOpen{ to{ transform:scale(14); border-radius:12%; opacity:0; } }

/* ---------- image interactivity ---------- */
.zoom-frame{ overflow:hidden; border-radius:var(--radius-md); position:relative; }
.zoom-frame img{ transition:transform 1.1s var(--ease-silk); }
.zoom-frame:hover img{ transform:scale(1.09); }
.zoom-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease-silk);
}
.zoom-frame:hover::after{ transform:translateX(130%); }

/* ---------- golden light reveal ---------- */
.gold-reveal{ position:relative; }
.gold-reveal::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(232,199,102,.85) 50%, transparent 60%);
  transform:translateX(-140%);
}
.gold-reveal.play::before{ animation: sweep 1s var(--ease-silk); }
.gold-reveal.play{ animation: contentIn .7s .25s var(--ease-silk) backwards; }
@keyframes sweep{ to{ transform:translateX(140%); } }
@keyframes contentIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- page transitions ---------- */
.page-transition-fade-enter{ animation:fadeIn .45s var(--ease-silk); }
.page-transition-turn-enter{ animation:pageTurnIn .55s var(--ease-silk); transform-origin:right center; }
.page-transition-scale-enter{ animation:scaleIn .45s var(--ease-silk); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pageTurnIn{ from{ opacity:0; transform:rotateY(-18deg) translateX(24px);} to{ opacity:1; transform:none; } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none; } }

/* ---------- timeline ---------- */
.timeline{ position:relative; padding-inline-start:34px; }
.timeline::before{
  content:""; position:absolute; inset-inline-start:6px; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--gold-700), var(--gold-500));
  transform-origin:top; transform:scaleY(0);
  transition:transform 1.2s var(--ease-silk);
}
.timeline.in-view::before{ transform:scaleY(1); }
.timeline-item{ position:relative; margin-bottom:28px; opacity:0; transform:translateX(16px); transition:opacity .6s var(--ease-silk), transform .6s var(--ease-silk); }
.timeline-item.in-view{ opacity:1; transform:none; }
.timeline-item::before{
  content:""; position:absolute; inset-inline-start:-34px; top:6px;
  width:12px; height:12px; border-radius:50%;
  background:var(--gold-500); box-shadow:0 0 0 4px var(--ink-950), 0 0 14px rgba(201,162,39,.7);
}
.timeline-item .year{ color:var(--gold-500); font-family:var(--font-display); font-size:1.1rem; }

/* ---------- quiz ---------- */
.quiz-gate{ text-align:center; padding:60px 20px; }
.quiz-arch{
  width:140px; height:180px; margin:0 auto 24px; position:relative;
  border:3px solid var(--gold-500); border-radius:70px 70px 8px 8px;
  background:linear-gradient(180deg, var(--ink-800), var(--ink-900));
  transform-origin:center; transition:transform .8s var(--ease-silk), opacity .8s;
}
.quiz-arch.open{ transform:scale(1.4) rotateY(90deg); opacity:0; }
.quiz-card{ animation:scaleIn .4s var(--ease-silk); }
.quiz-option{
  display:block; width:100%; text-align:right; padding:14px 18px; margin-bottom:10px;
  border-radius:var(--radius-md); border:1px solid var(--ink-line); background:var(--ink-800);
  color:var(--parchment); cursor:pointer; transition:transform .15s var(--ease-spring), border-color .2s, background .2s;
}
.quiz-option:hover{ border-color:var(--gold-500); transform:translateX(-4px); }
.quiz-option.correct{ animation:correctPulse .5s var(--ease-spring); border-color:var(--gold-300); background:rgba(201,162,39,.18); box-shadow:var(--shadow-gold); }
.quiz-option.wrong{ animation:shake .4s; border-color:var(--oxblood-500); background:rgba(122,35,35,.22); }
@keyframes correctPulse{ 0%{ transform:scale(1);} 50%{ transform:scale(1.04);} 100%{ transform:scale(1);} }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);} }
.quiz-progress{ height:4px; border-radius:4px; background:var(--ink-800); overflow:hidden; margin-bottom:20px; }
.quiz-progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--gold-500),var(--gold-100)); transition:width .5s var(--ease-silk); }
.quiz-result{ animation:contentIn .7s var(--ease-silk); text-align:center; }

/* ---------- unlock ---------- */
.lock-scene{ text-align:center; }
.lock-icon{ width:70px; height:90px; margin:0 auto 16px; position:relative; }
.lock-icon .shackle{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38px; height:34px; border:6px solid var(--gold-500); border-bottom:none;
  border-radius:20px 20px 0 0; transition:transform .6s var(--ease-spring);
}
.lock-icon .body{ position:absolute; bottom:0; width:100%; height:56px; background:linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-radius:8px; }
.lock-icon.unlocked .shackle{ transform:translate(14px,-10px) rotate(24deg); }
.lock-burst{ position:absolute; inset:0; pointer-events:none; }

/* ---------- favorites ---------- */
.bookmark{
  width:18px; height:24px; position:relative; display:inline-block;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  background:var(--ink-line); transition:background .3s, transform .3s;
}
.bookmark.active{ background:var(--gold-500); animation:bmPop .4s var(--ease-spring); box-shadow:var(--shadow-gold); }
@keyframes bmPop{ 0%{ transform:scale(.5) translateY(-6px);} 60%{ transform:scale(1.25);} 100%{ transform:scale(1);} }
.bookmark.removing{ animation:bmOut .35s ease-in forwards; }
@keyframes bmOut{ to{ transform:translateX(20px) rotate(20deg); opacity:0; } }

/* ---------- nav sliding indicator ---------- */
.nav-indicator{
  position:absolute; bottom:6px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-100));
  transition:transform .4s var(--ease-silk), width .4s var(--ease-silk);
  box-shadow:var(--shadow-gold);
}

/* ---------- search ---------- */
.search-lens{ transition:transform .4s var(--ease-spring); }
.search-open .search-lens{ transform:scale(1.15) rotate(-8deg); }
.search-results > *{ animation:resultIn .4s var(--ease-silk) backwards; }
@keyframes resultIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ---------- misc ---------- */
.spin-slow{ animation:spinSlow 60s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.candle-flicker{ animation:flicker 3.4s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ opacity:.85;} 45%{ opacity:1;} 50%{ opacity:.6;} 55%{ opacity:.95;} }