/* ============================================================
   fonts
   ============================================================ */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-label: Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
  --font-body: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  --color-bg: #fffdfd;
  --color-ink: #000;
  --color-muted: #bab6b2;
  --color-line: #8f8b87;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  overflow: hidden;
  cursor: none;
}

button, input {
  font-family: inherit;
  color: inherit;
}

/* ---------------- custom cursor ---------------- */
#cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  background-image: url("../assets/cursor-default.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 9999;
  transition: width .16s ease, height .16s ease, margin .16s ease;
}
#cursor-dot.is-hover {
  width: 84px;
  height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  background-image: url("../assets/cursor-hover.png");
}

/* ---------------- nav ---------------- */
/* positions derived from the figma frame (1920x1080): x/width in vw, y/height in vh */
#site-nav {
  position: fixed;
  top: 5.093vh;
  right: 3.802vw;
  z-index: 500;
  display: flex;
  gap: 1.302vw;
}
.nav-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 1.042vw;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-ink);
  opacity: .28;
  cursor: none;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.nav-item.active {
  opacity: .8;
}

/* ---------------- shared vine graphic (home <-> ritual cards) ----------------
   one element, repositioned by `top` per view, so it reads as the same graphic
   sliding into place rather than two separate images. */
#decor-shared {
  position: fixed;
  left: 2.135vw;
  top: 69.907vh;
  width: 95.724vw;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, top .8s cubic-bezier(.4, 0, .2, 1);
}
#decor-shared img {
  width: 100%;
  height: auto;
  display: block;
}
body[data-view="home"] #decor-shared,
body[data-view="ritual-cards"] #decor-shared {
  opacity: 1;
}
body[data-view="ritual-cards"] #decor-shared {
  top: 12.037vh;
}

/* ---------------- view / stage switching ---------------- */
#view-root { position: relative; width: 100%; height: 100%; z-index: 1; }

.view {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
body[data-view="home"] .view[data-view-name="home"],
body[data-view="ritual-cards"] .view[data-view-name="ritual-cards"],
body[data-view="collective"] .view[data-view-name="collective"],
body[data-view="archive"] .view[data-view-name="archive"] {
  opacity: 1;
  pointer-events: auto;
}

.collective-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.view[data-view-name="collective"][data-stage="select"] .collective-stage[data-stage-name="select"],
.view[data-view-name="collective"][data-stage="question"] .collective-stage[data-stage-name="question"] {
  opacity: 1;
  pointer-events: auto;
}

/* ================= 1. home =================
   all positions/sizes below are the figma frame's px values (on a 1920x1080
   frame) converted to vw (x-axis) / vh (y-axis) so the layout scales to
   match that frame on any viewport, instead of a fixed-px canvas. */
.home-logo {
  position: absolute;
  top: 3.519vh;
  left: 2.969vw;
  width: 4.375vw;
  height: 8.148vh;
  opacity: .72;
}
.home-center {
  position: absolute;
  left: 50%;
  top: 50vh;
  transform: translateX(-50%);
}
.home-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 1.563vw;
  line-height: 1.6;
  letter-spacing: .078vw;
  white-space: nowrap;
  color: var(--color-ink);
}
.home-arrow {
  position: absolute;
  top: 58.056vh;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: none;
}
.home-arrow img {
  width: .625vw;
  height: auto;
  display: block;
}

/* ================= 2. ritual cards =================
   interaction-safe implementation. Layout coordinates remain unchanged. */
.view[data-view-name="ritual-cards"] {
  isolation: isolate;
}

.ritual-bg {
  position: absolute;
  left: 0;
  top: -17.778vh;
  width: 86.875vw;
  height: 218.426vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  /*
    web-background.svg already contains internal opacity.
    .12 here made the final graphic nearly invisible, so this value is raised
    while the visible result remains pale.
  */
  opacity: .56;
}
.ritual-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ritual-grid {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
}

.ritual-card {
  position: absolute;
  width: 10.938vw;
  height: 18.491vw;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  transform-origin: center center;
  will-change: opacity, transform;
  outline: none;
}
.ritual-card:hover,
.ritual-card:focus-visible {
  z-index: 20;
}

/* Fade-in is cosmetic only; cards remain visible and interactive by default. */
.ritual-card.is-entering {
  animation: ritual-card-in .46s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ritual-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ritual-grid .ritual-card[data-card="calm"]    { left: 11.875vw; top: 41.759vh; }
.ritual-grid .ritual-card[data-card="focus"]   { left: 24.948vw; top: 51.204vh; }
.ritual-grid .ritual-card[data-card="release"] { left: 38.021vw; top: 41.759vh; }
.ritual-grid .ritual-card[data-card="balance"] { left: 51.042vw; top: 51.204vh; }
.ritual-grid .ritual-card[data-card="open"]    { left: 64.115vw; top: 41.759vh; }
.ritual-grid .ritual-card[data-card="ground"]  { left: 77.188vw; top: 51.204vh; }

.card-scaler {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    filter .22s ease;
  will-change: transform;
}

.ritual-card:hover .card-scaler,
.ritual-card:focus-visible .card-scaler {
  transform: scale(1.065);
}

.ritual-card.is-pressed .card-scaler {
  transform: scale(.965);
  transition-duration: .09s;
}

.card-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .68s cubic-bezier(.2,.72,.25,1);
  will-change: transform;
}

.ritual-card.flipped .card-flip {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .09);
  box-shadow: 4px 4px 5px rgba(0, 0, 0, .23);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.card-face.card-front {
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
}

.card-face.card-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ================= 3 & 5. collective ================= */
.collective-prompt {
  position: absolute;
  top: 28.5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: calc(1.35rem - 6px);
  font-weight: 200;
  font-family: var(--font-body);
  white-space: nowrap;
}

.collective-row {
  position: absolute;
  inset: 0;
}
.collective-card {
  position: absolute;
  width: 10%;
  aspect-ratio: 769 / 1300;
  top: 41.5%;
  transition: transform .4s ease, opacity .4s ease, z-index 0s;
  z-index: 1;
}
.collective-row .collective-card[data-card="calm"]    { left: 16.25%; }
.collective-row .collective-card[data-card="focus"]   { left: 27.76%; }
.collective-row .collective-card[data-card="release"] { left: 39.2%;  }
.collective-row .collective-card[data-card="open"]    { left: 50.8%;  }
.collective-row .collective-card[data-card="ground"]  { left: 62.3%;  }
.collective-row .collective-card[data-card="balance"] { left: 73.85%; }

.collective-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.collective-card.selected {
  z-index: 30;
  transform: scale(1.22);
}
.collective-card.dimmed img {
  opacity: .3;
}

.collective-graphic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30vw;
  max-width: 420px;
  transform: translate(-50%, -50%);
  opacity: .4;
  pointer-events: none;
}
.collective-graphic img {
  width: 100%;
  height: auto;
  display: block;
}

.collective-card-label {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-label);
  font-style: italic;
  font-size: 1.4rem;
}

.collective-question {
  position: absolute;
  top: 44.5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.3rem;
  white-space: nowrap;
  text-align: center;
}

.collective-input-wrap {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#collective-input {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  text-align: center;
  font-size: 1rem;
  padding: 2px 4px 6px;
  width: 220px;
  outline: none;
  cursor: none;
}
#collective-input-label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-muted);
  padding: 2px 4px 6px;
  pointer-events: none;
  transition: opacity .2s ease;
}
.collective-input-wrap.hide-label #collective-input-label {
  opacity: 0;
}

/* ================= 4. archive ================= */
.archive-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.archive-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .4;
}

.archive-field {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.archive-entry {
  position: absolute;
  text-align: center;
}
.archive-name {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-label);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: none;
  white-space: nowrap;
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease;
}
.archive-entry.dimmed .archive-name {
  opacity: .4;
}
.archive-entry.open .archive-name {
  transform: scale(1.3);
}
.archive-answer {
  display: none;
  width: max-content;
  margin: 10px auto 0;
  background: #fff;
  color: #000;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: .85rem;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}
.archive-entry.open .archive-answer {
  display: block;
}

.archive-entry.just-added {
  animation: archive-float 2.4s ease-in-out infinite;
}
@keyframes archive-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}