/* Hallmark · component: 홈페이지 첫 화면 위에 한 번 얹히는 봉투 움직임 (오로지 홈페이지 3차 색 체계) · genre: editorial · theme: custom (홈페이지 3차 tokens.css 값을 그대로 씀) · signature: 축의 봉투가 날아와 내려앉고 로고와 "Solely for your wedding day"가 남음
 * paper: #F7F8F9 · field: #EEF1F6 · accent: #11294F · ink: #0E1E3A · motion: transform·opacity만, 처음 방문 때 한 번, 2.16초, 누르거나 스크롤하면 바로 사라짐 · v2 (B안 확정) · 2026-11-04 */
/* Hallmark · pre-emit critique: 장면 하나(봉투와 도장) · 마지막 모양이 기본 모양 · 본문은 뒤에 이미 그려짐 · weakest: 새 손님에게 그림 로고만으로는 이름이 안 읽힘 → 로고 아래 '오로지' 글자를 더함 */
/* 글꼴: 덮개 안 글꼴은 로고 묶음 두 줄(고운바탕 '오로지', 코모란트 가라몽 영어 한 줄)뿐이고 본편 site.css 의 waive 37 이 같은 두 글꼴을 이미 다룸 */

/* =========================================================
 * 봉투 첫 화면 움직임 · B안 '봉인이 로고로' (2026-11-04 대표님 확정)
 *   이 파일 하나에 공통 부품과 B안이 다 들어 있음. 지난 A안·C안은 intro-ac.css (미리보기 기록용, 본편에는 넣지 않음)
 *
 * 원칙
 *  - 로고·문장·카드는 아무 움직임이 없을 때의 모양 = 마지막 모양. 움직임은 처음 모양을 거꾸로 채워(fill both) 보여 줌.
 *    봉투 부품은 쉴 때 보이는 모양이고, 움직임이 끝나며 사라짐(fill both). '움직임 줄이기'에서는 봉투 부품(.oj-part, .oj-front)을 빼고
 *    움직임만 끄면 로고만 남은 마지막 모양이 바로 보임.
 *  - 움직이는 값은 transform 과 opacity 뿐 (휴대폰 화면 처리 장치가 맡아서 60프레임).
 *  - <html>에 oj-intro-on 이 없으면(두 번째 방문, 글자 주소 #가 붙은 방문, 스크립트 꺼짐) 아예 그리지 않음.
 *  - 로고는 <img class="oj-mark" src="img/oj-mark.png"> (남색 480px, 5KB), 도장 속 작은 로고는 획을 조금 굵게 한 img/oj-mark-seal.png.
 * ========================================================= */

:root {
  /* 색: 본편 3차 tokens.css 의 이름이 있으면 그 값을, 없으면(시안 쪽) 같은 값을 씀 */
  --oj-ground: var(--color-field, #EEF1F6);      /* 바탕 (본편 첫 화면 바탕과 같아서 사라질 때 이어짐) */
  --oj-paper: #FCFDFE;       /* 흰 봉투 · 카드 */
  --oj-paper-2: var(--color-paper, #F7F8F9);     /* 덮개 바깥 면 */
  --oj-paper-3: #EBEEF3;     /* 덮개 안쪽 면 */
  --oj-edge: var(--color-rule, #D4D9E1);        /* 종이 가장자리 */
  --oj-crease: #B8C0CC;      /* 접힌 자리 */
  --oj-navy: var(--color-navy, #11294F);        /* 로고 · 도장 · 테두리 */
  --oj-ink: var(--color-ink, #0E1E3A);         /* '오로지' 글자 (본편 머리 로고 글자와 같은 색) */
  --oj-ink-2: var(--color-ink-2, #4C596C);       /* 로고 아래 영어 문장 */
  --oj-shadow-1: #00000014;  /* 그림자는 색 없는 검정 (남색 그림자는 빛나는 느낌이 남) */
  --oj-shadow-2: #00000040;
}

.oj-intro {
  --oj-font-logo: "Gowun Batang", "Noto Serif KR", serif;          /* '오로지' (본편 .wm-ko 와 같음) */
  --oj-font-line: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --oj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --oj-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --oj-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --oj-ease-land: cubic-bezier(0.33, 0, 0.2, 1);

  /* 크기: 휴대폰 390에서 봉투 폭 125px, 노트북에서 168px */
  --env-w: clamp(118px, 32vw, 168px);
  --env-h: calc(var(--env-w) * 1.8);          /* 축의 봉투 세로 비율 (약 95 x 171mm) */
  --flap-h: calc(var(--env-h) * 0.19);        /* 덮개 끝까지 깊이 */
  --mark: calc(var(--env-w) * 0.82);          /* 마지막 로고 크기 */
  --line-size: clamp(15px, 0.5vw + 12.5px, 19px);
  --line-h: calc(var(--line-size) * 1.25);
  --stage-y: 0px;                             /* 장면 중심을 화면 가운데에서 얼마나 내릴지 */
  --env-y: 0px;                               /* 봉투가 내려앉는 자리 (장면 중심 기준) */

  --oj-out-at: 1.78s;                         /* 바탕이 걷히기 시작하는 때 */
  --oj-out-dur: 0.38s;                        /* 걷히는 시간 → 전체 2.16초 */

  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: var(--oj-ground);
  contain: layout paint;
  pointer-events: auto;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  /* 흐려지기(opacity, 화면 처리 장치가 맡음)와 마지막 순간 숨기기(visibility, 한 번만 바뀜)를 따로 둠: 섞으면 휴대폰이 흐려지기를 본 작업 줄에서 처리함 */
  animation: oj-out var(--oj-out-dur) var(--oj-ease-io) var(--oj-out-at) both, oj-gone 0.01s linear calc(var(--oj-out-at) + var(--oj-out-dur)) both;
}
html.oj-intro-on .oj-intro { display: block !important; }   /* 기본은 style="display:none" (그림 파일이 안 와도 본문이 가려지지 않게) */
/* 넘길 때는 이름이 다른 움직임으로 새로 시작해야 0.2초 흐려지기가 지켜짐 (같은 이름이면 처음 시작한 때를 이어받아 바로 끝나 버림) */
.oj-intro.is-skip { animation: oj-skip 0.2s var(--oj-ease-out) both, oj-gone-now 0.01s linear 0.2s both !important; pointer-events: none; }

.oj-intro *, .oj-intro *::before, .oj-intro *::after { box-sizing: border-box; }
.oj-intro i { display: block; font-style: normal; }
.oj-intro svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 장면 기준점: 화면 가운데의 크기 없는 점. 모든 부품은 이 점 기준으로 놓임 */
.oj-stage { position: absolute; left: 50%; top: calc(50% + var(--stage-y)); width: 0; height: 0; }

/* ---------- 공통 부품 ---------- */
.oj-fly {
  position: absolute;
  left: calc(var(--env-w) / -2);
  top: calc(var(--env-h) / -2 + var(--env-y));
  width: var(--env-w);
  height: var(--env-h);
  /* B안: 위에서 조금 오른쪽으로 비켜 내려와 똑바로 놓임(던지지 않고 내려놓는 느낌). 도장이 닿는 순간 살짝 눌림 */
  animation: oj-fly-b 0.6s linear 0s both, oj-press 0.22s var(--oj-ease-out) 0.78s;
}
.oj-part { position: absolute; inset: 0; }
.oj-shadow > i { position: absolute; inset: 0; border-radius: 2px; box-shadow: 0 1px 2px var(--oj-shadow-1), 0 16px 30px -14px var(--oj-shadow-2); animation: oj-shadow-land 0.62s var(--oj-ease-land) 0s both; }   /* taste-skill-ignore: 날아와 내려앉는 봉투의 실제 그림자, 봉투와 함께 사라짐 */
.oj-body { background: var(--oj-paper); border: 1px solid var(--oj-edge); border-radius: 2px; }   /* taste-skill-ignore: 흰 종이 가장자리 (밝은 바탕에서 종이 윤곽) */
.oj-flap { bottom: auto; height: var(--flap-h); }
.oj-flap > i { height: 100%; transform-origin: 50% 0; }

.oj-mark {
  display: block;
  width: var(--mark);
  height: var(--mark);
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.oj-line {
  display: block;
  font-family: var(--oj-font-line);
  font-style: italic;
  font-weight: 500;
  font-size: var(--line-size);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--oj-ink-2);
  white-space: nowrap;
  font-synthesis: none;
}

/* ---------- 공통 움직임 ---------- */
/* 위에서 조금 오른쪽으로 비켜 내려옴: 1.07배 → 1배, 기울기 -7도 → 0, 가는 길이 짧고 끝이 길게 느려짐 */
@keyframes oj-fly-b {
  0%   { transform: translate3d(9vw, -60vh, 0) rotate(-7deg) scale(1.07); opacity: 0; animation-timing-function: cubic-bezier(0.22, 0.6, 0.28, 1); }
  12%  { opacity: 1; }
  78%  { transform: translate3d(0.3vw, -0.7vh, 0) rotate(0.6deg) scale(1.004); animation-timing-function: var(--oj-ease-land); }
  100% { transform: none; opacity: 1; }
}
/* 도장이 닿는 순간 봉투가 1.2% 눌렸다 돌아옴 (채우기 없음: 끝나면 원래 모양) */
@keyframes oj-press { 0% { transform: none; } 35% { transform: scale(0.988); } 100% { transform: none; } }
@keyframes oj-shadow-land {
  0%   { transform: translate3d(14px, 46px, 0) scale(1.08); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes oj-out  { to { opacity: 0; } }
@keyframes oj-skip { from { opacity: 1; } to { opacity: 0; } }
@keyframes oj-gone { to { visibility: hidden; } }   /* 스크립트가 못 돌아도 끝나면 본문 클릭을 막지 않음 */
@keyframes oj-gone-now { to { visibility: hidden; } }
@keyframes oj-fade-in { from { opacity: 0; } }
@keyframes oj-fade-out { from { opacity: 1; } to { opacity: 0; } }


/* =========================================================
 * B안 · 봉인이 로고로 (2.16초, 확정)
 *  0.00~0.60  봉투가 위에서 내려와 가운데 놓임
 *  0.62~0.83  덮개 끝에 남색 도장(로고가 든 둥근 테)이 '꾹' 찍힘, 0.78~1.00 봉투가 살짝 눌림
 *  0.98~1.40  봉투가 옅어지며 물러남
 *  1.00~1.50  도장 테가 사라지고 도장 속 로고가 커지며 가운데로 (1.10~1.32 굵은 도장 자국 → 가는 로고로 바뀜)
 *  1.22~1.56  로고 아래 '오로지'      1.32~1.66  그 아래 영어 문장
 *  1.78~2.16  바탕이 걷힘
 * ========================================================= */
.oj-intro[data-variant="b"] {
  --seal-s: 0.415;                                         /* 도장 지름 = 봉투 폭의 34% (0.34 / 0.82) */
  --ko-size: clamp(20px, 1.1vw + 15px, 26px);              /* '오로지' 크기 = 로고 높이의 약 0.2배 (휴대폰 20px, 노트북 26px) */
  --ko-h: calc(var(--ko-size) * 1.2);
  --gap-ko: 16px;                                          /* 로고와 '오로지' 사이 */
  --gap-line: 6px;                                         /* '오로지'와 영어 문장 사이: 이름과 작은 줄은 한 덩어리로 붙임 */
  --below: calc(var(--gap-ko) + var(--ko-h) + var(--gap-line) + var(--line-h));
  --seal-dy: calc(var(--env-h) * -0.5 + var(--flap-h) + var(--below) / 2);   /* 도장 자리 → 로고 자리 */
}
.oj-intro[data-variant="b"] .oj-part { animation: oj-b-recede 0.42s var(--oj-ease-in) 0.98s both; }
.oj-intro[data-variant="b"] .oj-body { z-index: 1; }
.oj-intro[data-variant="b"] .oj-flap { z-index: 2; }

.oj-lock {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}
.oj-seal { position: relative; width: var(--mark); height: var(--mark); margin-bottom: var(--gap-ko); animation: oj-b-seal 0.86s linear 0.62s both; }
.oj-seal-ring { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--mark) * 0.042) solid var(--oj-navy); opacity: 0; animation: oj-fade-out 0.2s var(--oj-ease-io) 1s both; }   /* 남색 인주 도장 테 */
.oj-seal-m { position: absolute; inset: 0; animation: oj-b-grow 0.5s var(--oj-ease-io) 1s both; }
.oj-seal-m .oj-mark { position: absolute; inset: 0; }
/* 작게 찍힌 도장 속 로고는 가는 획이 옅어지므로, 획을 굵게 한 그림으로 찍고 커지는 동안 가는 로고로 바꿈 (둘 다 남색이라 회색으로 뜨지 않음) */
.oj-seal-m .oj-mark-seal { animation: oj-fade-out 0.22s var(--oj-ease-io) 1.1s both; }   /* 도장이 찍혀 있는 0.62~1.32초에만 보이고, 움직임이 끝나면 투명(채우기). 움직임 줄이기에서는 아래에서 뺌 */
.oj-seal-m .oj-mark-fine { animation: oj-fade-in 0.22s var(--oj-ease-io) 1.1s both; }
.oj-ko {
  display: block;
  margin-bottom: var(--gap-line);
  font-family: var(--oj-font-logo);
  font-weight: 700;
  font-size: var(--ko-size);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-indent: 0.12em;                                     /* 자간 뒤 빈칸만큼 밀어 눈으로 가운데 */
  color: var(--oj-ink);
  white-space: nowrap;
  font-synthesis: none;
  animation: oj-rise-in 0.34s var(--oj-ease-out) 1.22s both;
}
.oj-intro[data-variant="b"] .oj-lock .oj-line { animation: oj-rise-in 0.34s var(--oj-ease-out) 1.32s both; }

@keyframes oj-b-seal {
  0%   { opacity: 0; transform: translate3d(0, var(--seal-dy), 0) scale(calc(var(--seal-s) * 1.5)); animation-timing-function: var(--oj-ease-out); }
  24%  { opacity: 1; transform: translate3d(0, var(--seal-dy), 0) scale(var(--seal-s)); }
  40%  { transform: translate3d(0, var(--seal-dy), 0) scale(var(--seal-s)); animation-timing-function: var(--oj-ease-io); }
  100% { opacity: 1; transform: none; }
}
@keyframes oj-b-grow { from { transform: scale(0.64); } to { transform: none; } }
@keyframes oj-b-recede { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); } }
@keyframes oj-rise-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }


/* =========================================================
 * 움직임 줄이기: 움직임은 모두 끄고, 마지막 모양(로고와 문장)만 0.7초 보였다가 0.3초에 걸쳐 걷힘.
 * (html.oj-intro-still 은 머리 스크립트가 붙임. 아래 @media 는 그 스크립트가 못 돌았을 때를 위한 이중 안전장치)
 * ========================================================= */
html.oj-intro-still .oj-intro *,
html.oj-intro-still .oj-intro *::before { animation: none !important; }
html.oj-intro-still .oj-intro .oj-part,
html.oj-intro-still .oj-intro .oj-front,
html.oj-intro-still .oj-intro .oj-mark-seal { display: none; }   /* 봉투와 도장 자국만 빼고 로고·이름·문장은 남김 */
html.oj-intro-still .oj-intro { animation: oj-out 0.3s var(--oj-ease-io) 0.7s both, oj-gone 0.01s linear 1s both !important; }
@media (prefers-reduced-motion: reduce) {
  .oj-intro *, .oj-intro *::before { animation: none !important; }
  .oj-intro .oj-part, .oj-intro .oj-front, .oj-intro .oj-mark-seal { display: none; }
  .oj-intro { animation: oj-out 0.3s var(--oj-ease-io) 0.7s both, oj-gone 0.01s linear 1s both !important; }
}