:root {
  --paper: #f7f4ee;
  --ink: #2c2420;
  --amber: #49362e;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  animation: intro-end 1.48s linear both;
}

/* 정적인 곡선 마스크를 이동해 햇살처럼 걷습니다. */
.intro::before {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: radial-gradient(ellipse at 75% 65%, #e9e0d5, var(--paper) 65%);
  clip-path: ellipse(74% 74% at 50% 26%);
  animation: sun-away .53s cubic-bezier(.65, 0, .35, 1) .95s both;
}

.intro-mark {
  position: relative;
  width: 76px;
  height: 76px;
  color: var(--amber);
  animation: mark-away .22s ease .9s both;
}

.intro { grid-template-rows: auto; }
.intro-word {
  position: absolute;
  top: calc(50% + 56px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 600 20px/1 "Cormorant Garamond", "Times New Roman", serif;
  letter-spacing: .3em;
  color: var(--ink);
  opacity: 0;
  animation: word-in .5s ease .35s both, mark-away .22s ease .9s forwards;
}
@keyframes word-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: .8; transform: none; } }

.intro-mark .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw .52s cubic-bezier(.35, 0, .25, 1) both;
}

.intro-mark .line:nth-child(2) { animation-delay: .08s; }
.intro-mark .line:nth-child(3) { animation-delay: .16s; }
.intro-mark .solid {
  fill: currentColor;
  fill-rule: evenodd;
  animation: fill-in .18s ease .68s both;
}

/* JS가 준비된 요소만 숨깁니다. */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

[data-reveal].is-revealed {
  animation: reveal .6s cubic-bezier(.2, .65, .3, 1) var(--reveal-delay, 0ms) both;
}

[data-parallax] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.leaf-shadow {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  pointer-events: none;
  transform-origin: 90% 0;
  animation: breeze 20s ease-in-out infinite;
}

.is-paused .leaf-shadow { animation-play-state: paused; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-away { to { opacity: 0; transform: translate3d(0, -7px, 0); } }
@keyframes sun-away { to { transform: translate3d(-12%, -110%, 0); } }
@keyframes intro-end { 0%, 99% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes reveal { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes breeze {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(-12px, 8px, 0) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro, .intro::before, .intro-mark, .intro-word, .intro-mark .line, .intro-mark .solid,
  [data-reveal].is-revealed, .leaf-shadow { animation: none; }
  [data-reveal].reveal-pending { opacity: 1; transform: none; }
  [data-parallax], .leaf-shadow { transform: none; }
}