/* ============================================================
   애니메이션 레이어 — 이 파일과 anim.js 를 빼면 기존 디자인 그대로
   ============================================================ */

/* ---------- 오프닝 ---------- */
.intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper);transition:opacity .9s ease, transform 1.1s cubic-bezier(.7,0,.2,1);
  animation:introFailsafe 0s linear 6s forwards}
.intro.done{opacity:0;transform:translateY(-6%);pointer-events:none}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}
.intro svg{width:min(78vw,340px);height:auto;overflow:visible}
.intro text{font-family:var(--latin);font-style:italic;font-size:46px;fill:transparent;stroke:var(--ink);stroke-width:.6;
  stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.2s ease forwards, fillIn .8s ease 1.6s forwards}
.intro text.amp{font-size:30px;stroke:var(--accent);animation-delay:.5s,1.8s}
.intro text.l2{animation-delay:.9s,2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillIn{to{fill:var(--ink)}}
.intro .amp{fill:transparent}
.intro .date{margin-top:14px;font-family:var(--latin);letter-spacing:.4em;font-size:13px;color:var(--muted);opacity:0;animation:rise .9s ease 2.1s forwards}
.intro .skip{position:absolute;bottom:34px;font-size:11px;letter-spacing:.2em;color:#b9ada2;opacity:0;animation:rise .6s ease 1s forwards}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 커버 ---------- */
.cover{overflow:hidden}
.anim .cover-img{transform:scale(1.14);transition:transform 9s cubic-bezier(.2,.6,.2,1)}
.anim.go .cover-img{transform:scale(1)}
.anim .cover-text > *{opacity:0;transform:translateY(16px);transition:opacity 1s ease, transform 1s ease}
.anim.go .cover-text > *{opacity:1;transform:none}
.anim.go .cover-text > *:nth-child(1){transition-delay:.5s}
.anim.go .cover-text > *:nth-child(2){transition-delay:.8s}
.anim.go .cover-text > *:nth-child(3){transition-delay:1.15s}
.anim.go .cover-text > *:nth-child(4){transition-delay:1.35s}
.cover h1 i{display:inline-block}
.anim.go .cover h1 i{animation:amp 2.4s ease-in-out 2.2s infinite}
@keyframes amp{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-6deg)}}
.scroll-hint{position:absolute;left:50%;bottom:16px;z-index:2;width:22px;height:34px;margin-left:-11px;border:1.5px solid rgba(255,255,255,.75);border-radius:12px;opacity:0;transition:opacity 1s 2s}
.anim.go .scroll-hint{opacity:1}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.cover-text{bottom:66px}

/* ---------- 꽃잎/눈 ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40}

/* ---------- 스크롤 등장 ---------- */
.anim .fade{opacity:1;transform:none} /* 기존 섹션 페이드 대신 아래 세부 효과 사용 */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.greeting{white-space:normal}
.greeting .gl{display:block}
.greeting .gap{display:block;height:1.1em}
.prow.rv{transform:translateX(-14px)}
.prow.rv:nth-child(2){transform:translateX(14px)}
.prow.rv.in{transform:none}

/* 사진 펼침 + 시차 */
.wipe{overflow:hidden;clip-path:inset(18% 0 18% 0);transition:clip-path 1.3s cubic-bezier(.6,0,.2,1)}
.wipe.in{clip-path:inset(0 0 0 0)}
.wipe img{will-change:transform;transform:translateY(var(--py,0)) scale(1.12)}

/* 라벨 밑줄 */
.label{position:relative;display:inline-block}
.label::after{content:"";position:absolute;left:50%;bottom:-3px;height:1px;width:0;background:var(--accent);transition:width 1s ease .3s, left 1s ease .3s}
.label.in::after{width:100%;left:0}

/* 달력 */
.cal-grid .on{position:relative}
.cal-grid .on::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0}
.calendar.in .cal-grid .on::before{animation:ring 2.2s ease-out .4s infinite}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.cal-grid .on::after{content:"♥";position:absolute;top:-13px;right:-4px;font-size:11px;color:var(--sun);opacity:0;transform:scale(.3)}
.calendar.in .cal-grid .on::after{animation:heart .7s cubic-bezier(.3,1.6,.5,1) .3s forwards, beat 1.6s ease-in-out 1.2s infinite}
@keyframes heart{to{opacity:1;transform:scale(1)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.countdown div{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s ease, transform .6s ease}
.countdown.in div{opacity:1;transform:none}
.countdown.in div:nth-child(2){transition-delay:.1s}
.countdown.in div:nth-child(3){transition-delay:.2s}
.countdown.in div:nth-child(4){transition-delay:.3s}
.countdown b.tick{animation:tick .45s ease}
@keyframes tick{from{opacity:.2;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 갤러리 */
.gallery button{opacity:0;transform:scale(.94);transition:opacity .7s ease, transform .7s ease}
.gallery button.in{opacity:1;transform:none}
.lightbox img{transition:transform .35s ease, opacity .35s ease}
.lightbox.show img{animation:zoomIn .4s ease}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* 축하 하트 */
.cheer{border:1px solid #ecc9c4 !important;background:#fff5f3 !important;color:var(--sun) !important}
.cheer:active{transform:scale(.97)}
.heart-fly{position:fixed;z-index:90;pointer-events:none;font-size:20px;color:var(--sun);
  animation:fly 1.8s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fly{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-260px) scale(var(--s)) rotate(var(--r))}}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .rv,.wipe,.gallery button,.countdown div{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .anim .cover-img,.anim .cover-text>*{transform:none!important;opacity:1!important;transition:none!important}
  .fx{display:none}
}