/* =========================================================
   금섬당 특수 효과 디자인 (fx.js 와 짝)
   ========================================================= */

/* ---- 오프닝 ---- */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, #1d1810, var(--ink) 70%);
  cursor: pointer;
  transition: clip-path 1.2s cubic-bezier(.77,0,.18,1);
  clip-path: inset(0 0 0 0);
}
.intro--out { clip-path: inset(0 0 100% 0); }
/* 안전장치: 효과 파일이 어떤 이유로든 안 돌아도 4초 뒤엔 오프닝이 사라짐 */
.intro { animation: introSafety .6s 4s forwards; }
@keyframes introSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro__inner { text-align: center; transition: transform 1.2s cubic-bezier(.77,0,.18,1), opacity .8s; }
.intro--out .intro__inner { transform: translateY(-60px); opacity: 0; }
.intro__seal { width: 150px; height: 150px; overflow: visible; }
.intro__c1, .intro__c2 { fill: none; stroke: var(--gold); stroke-linecap: round; }
.intro__c1 { stroke-width: 1.2; stroke-dasharray: 580; stroke-dashoffset: 580; animation: draw 1.5s .1s cubic-bezier(.65,0,.35,1) forwards; }
.intro__c2 { stroke-width: .5; opacity: .6; stroke-dasharray: 530; stroke-dashoffset: -530; animation: draw 1.5s .3s cubic-bezier(.65,0,.35,1) forwards; }
.intro__star { fill: var(--gold-hi); transform-origin: 100px 100px; transform: scale(0) rotate(-90deg); animation: starpop 1s .9s cubic-bezier(.2,1.4,.3,1) forwards; filter: drop-shadow(0 0 12px rgba(236,217,168,.8)); }
.intro__name { margin-top: 26px; font-family: var(--serif-en); font-size: 17px; letter-spacing: .1em; color: var(--gold-hi); opacity: 0; animation: spread 1.6s .6s cubic-bezier(.2,.7,.2,1) forwards; padding-left: .5em; }
.intro__sub { margin-top: 8px; font-size: 15px; color: var(--muted); letter-spacing: .3em; opacity: 0; animation: fadein 1s 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes starpop { to { transform: scale(1) rotate(0); } }
@keyframes spread { to { opacity: 1; letter-spacing: .5em; } }
@keyframes fadein { to { opacity: 1; } }
.intro-on .hero__inner > *, .intro-on .hero__title .ch { animation-play-state: paused !important; }

/* ---- 스크롤 진행 금빛 막대 ---- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold));
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 10px rgba(236,217,168,.6);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- 금가루 캔버스 ---- */
.dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---- 첫 화면 제목 한 글자씩 ---- */
.hero__title.split { animation: none !important; perspective: 600px; }
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .ch {
  display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.35em) rotateX(60deg);
  animation: chIn 1.2s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.2s + var(--i) * 45ms);
}
@keyframes chIn { to { opacity: 1; filter: blur(0); transform: none; } }

/* ---- 인장: 스크롤하면 바깥 고리가 돌아감 ---- */
.seal__ring { rotate: calc(var(--sy, 0) * .25deg); }
.seal { transition: transform .6s; }
.seal:hover { transform: scale(1.04); }

/* ---- 제목이 붓으로 쓰듯 스르륵 ---- */
.js .ink {
  -webkit-mask-image: linear-gradient(100deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(100deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: blur(6px);
  transition: -webkit-mask-position 1.8s cubic-bezier(.3,.6,.2,1), mask-position 1.8s cubic-bezier(.3,.6,.2,1), filter 1.6s ease, opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.js .ink.on { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0); }
.js .bibo__han.ink {
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition-duration: 2.2s;
}
.js .bibo__han.ink.on { -webkit-mask-position: 0 0; mask-position: 0 0; }
.bibo__char:nth-child(2) .bibo__han.ink { transition-delay: .35s; }

/* ---- 금 글씨 반짝임 ---- */
.gold { background-size: 200% auto; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }

/* ---- 사진: 막이 걷히듯 + 스크롤 시차 ---- */
.curtain { position: relative; z-index: 1; overflow: hidden; height: 100%; }
.js .curtain { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s cubic-bezier(.77,0,.18,1); }
.js .curtain.on { clip-path: inset(0 0 0 0); }
.js .curtain img { transform: scale(1.35); transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
.js .curtain.on img { transform: scale(1.08); }
.js .card:hover .curtain.on img, .js .gallery__row figure:hover .curtain.on img { transform: scale(1.14); }
@supports (animation-timeline: view()) {
  .curtain img { animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
}
.gallery__row figure:nth-child(2) .curtain { transition-delay: .12s; }
.gallery__row figure:nth-child(3) .curtain { transition-delay: .24s; }
.gallery__row figure:nth-child(4) .curtain { transition-delay: .36s; }
.gallery__row figure:nth-child(5) .curtain { transition-delay: .48s; }
.energy__grid .card:nth-child(2) { transition-delay: .15s; }
.energy__grid .card:nth-child(3) { transition-delay: .3s; }
.way__list .way__item:nth-child(2) { transition-delay: .15s; }
.way__list .way__item:nth-child(3) { transition-delay: .3s; }

/* ---- 카드 3D 기울기 + 빛 반사 (PC) ---- */
.tilt { will-change: transform; }
.card { position: relative; }
.tilt::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,240,200,.35), transparent 45%);
  opacity: 0; transition: opacity .5s; mix-blend-mode: soft-light;
}
.way__item.tilt::after, .notice.tilt::after { mix-blend-mode: screen; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(236,217,168,.14), transparent 50%); }
.tilt:hover::after { opacity: 1; }
.stone__card.tilt::after { display: none; }

/* ---- 금빛 커서 (PC) ---- */
.cursor-glow {
  position: fixed; left: -180px; top: -180px; width: 360px; height: 360px; z-index: 1; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(201,168,98,.13), rgba(201,168,98,.04) 40%, transparent 70%);
  mix-blend-mode: screen;
}

/* ---- 버튼 빛 흐름 + 자석 ---- */
.btn { position: relative; overflow: hidden; transition: background-position .6s, transform .3s, translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: sweep 4.5s 2.5s ease-in-out infinite;
}
.btn:hover { box-shadow: 0 10px 40px -10px rgba(236,217,168,.55); }
@keyframes sweep { 0% { left: -60%; } 30%, 100% { left: 130%; } }

/* ---- 사진 크게 보기 ---- */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
  place-items: center; cursor: zoom-out;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(8,7,5,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox img { max-width: min(92vw, 900px); max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__close { position: fixed; top: 18px; right: 22px; font-family: var(--serif-en); letter-spacing: .3em; font-size: 14px; color: var(--gold-hi); }
::view-transition-group(photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

/* ---- 오늘의 행운석 ---- */
.stone { text-align: center; background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(201,168,98,.1), transparent 70%), var(--ink); border-top: 1px solid var(--line); }
.stone__lead { margin: 18px auto 44px; color: var(--muted); max-width: 520px; }
.stone__wrap { perspective: 1400px; display: flex; justify-content: center; }
.stone__card {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block;
  width: min(84vw, 340px); aspect-ratio: 5 / 7.4;
  transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.3,1.3,.4,1);
}
.stone__card:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
.stone__card.flipped { transform: rotateY(180deg); }
.stone__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 24px;
  border: 1px solid var(--line); overflow: hidden;
}
.stone__front {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(201,168,98,.05) 0 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 50% 42%, #2a2216, var(--ink-2) 70%);
}
.stone__front::before, .stone__back::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(201,168,98,.35); pointer-events: none;
}
.stone__ring { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; top: 14%; border: 1px dashed rgba(201,168,98,.4); animation: spin 40s linear infinite; }
.stone__star { width: 58px; height: 58px; color: var(--gold-hi); margin-top: -40px; filter: drop-shadow(0 0 16px rgba(236,217,168,.7)); animation: breathe 3s ease-in-out infinite; }
.stone__date { margin-top: 40px; font-family: var(--serif-en); font-size: 20px; letter-spacing: .2em; color: var(--paper); }
.stone__tap { font-family: var(--serif-en); font-size: 13px; letter-spacing: .35em; color: var(--gold); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.stone__front::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.16) 45%, transparent 60%);
  background-size: 250% 100%; animation: holo 5s ease-in-out infinite;
}
@keyframes holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.stone__back {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--stone, #c9a862) 35%, transparent), transparent 55%), var(--ink-2);
}
.stone__gem {
  width: 92px; height: 92px; border-radius: 50%; margin-bottom: 8px; flex: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 18%),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,.35), transparent 55%),
    radial-gradient(circle at 50% 50%, var(--stone, #c9a862), color-mix(in srgb, var(--stone, #c9a862) 55%, #000));
  box-shadow: 0 0 40px color-mix(in srgb, var(--stone, #c9a862) 60%, transparent), inset 0 -8px 18px rgba(0,0,0,.35);
}
.stone__en { font-family: var(--serif-en); font-style: italic; font-size: 18px; color: var(--gold); letter-spacing: .06em; }
.stone__name { font-size: 30px; color: var(--paper); font-weight: 400; line-height: 1.3; }
.stone__key { font-size: 16px; color: var(--ink); background: var(--gold); padding: 2px 14px; letter-spacing: .06em; }
.stone__msg { font-size: 17px; line-height: 1.75; color: var(--text); margin-top: 6px; }
.stone__color { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.stone__color b { font-weight: 400; color: var(--gold-hi); }
@media (min-width: 1024px) {
  .stone__lead { font-size: 22px; max-width: 760px; }
  .stone__card { width: 380px; }
  .stone__name { font-size: 34px; }
  .stone__msg { font-size: 19px; }
}

/* ---- 움직임 줄이기 설정 사용자 ---- */
@media (prefers-reduced-motion: reduce) {
  .js .ink { -webkit-mask-image: none; mask-image: none; filter: none; }
  .js .curtain { clip-path: none; }
  .js .curtain img { transform: none; }
  .intro, .cursor-glow, .dust { display: none !important; }
  .hero__title .ch { opacity: 1; filter: none; transform: none; }
}