/* =========================================================
   Hunter Envelope ― 黒い封筒の開封演出（共通）
   js/hunter-envelope.js と併用。クラスは he- 接頭辞で衝突回避。
   ========================================================= */

:root {
  --he-gold-1: #f8ecc4;
  --he-gold-2: #e3c67f;
  --he-gold-3: #c9a24a;
  --he-gold-4: #8c6a26;
  --he-ink: #050403;
  --he-ease-silk: cubic-bezier(.16, 1, .3, 1);
  --he-ease-soft: cubic-bezier(.65, 0, .35, 1);
  --he-w: min(84vw, 400px);
  --he-h: calc(var(--he-w) * .66);
  --he-font: "Shippori Mincho", "Noto Serif JP", serif;
  --he-font-sub: "Noto Serif JP", "Shippori Mincho", serif;
}

/* 封筒表示中：ページ本体を隠し、アニメーションを一時停止 */
html.he-active, html.he-active body { overflow: hidden; }
html.he-active [data-he-content] { opacity: 0; visibility: hidden; }
html.he-active [data-he-content],
html.he-active [data-he-content] * { animation-play-state: paused !important; }
[data-he-content] { transition: opacity 1.2s var(--he-ease-soft), visibility 1.2s; }

/* ---------- オーバーレイ（空間） ---------- */
.he-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
  color: var(--he-gold-1);
  font-family: var(--he-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse 60% 45% at 50% 48%, rgba(201,162,74,.16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(122,92,30,.18), transparent 60%),
    radial-gradient(ellipse at center, #120f0b 0%, #070605 55%, #020201 100%);
  transition: opacity 1.1s var(--he-ease-soft), visibility 1.1s;
}
.he-overlay::before { /* 粒子ノイズ＋ビネット */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow: inset 0 0 200px 60px rgba(0,0,0,.85);
}
.he-overlay::after { /* スポットライト */
  content: ""; position: absolute; left: 50%; top: -20vh; width: 140vw; height: 120vh; pointer-events: none;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(248,236,196,.07) 180deg, transparent 192deg);
  filter: blur(8px);
  animation: he-spot 7s ease-in-out infinite;
}
@keyframes he-spot { 0%,100% { opacity: .7 } 50% { opacity: 1 } }
.he-overlay.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.he-overlay.is-behind { z-index: 0; }

.he-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 1s var(--he-ease-soft), transform 1.2s var(--he-ease-soft), filter 1s;
}
.he-overlay.is-leaving .he-stage { opacity: 0; transform: translateY(6vh) scale(.92); filter: blur(6px); }

/* 金の粒子キャンバス：封筒表示中は最前面、開封後はページ背景側へ */
.he-dust { position: fixed; inset: 0; z-index: 101; pointer-events: none; }
html:not(.he-active) .he-dust { z-index: 1; }

/* ---------- 見出し ---------- */
.he-intro { text-align: center; margin-bottom: 48px; user-select: none; }
.he-intro > * { margin: 0; opacity: 0; animation: he-fade-up 1.6s var(--he-ease-silk) forwards; }
.he-kicker { font-family: var(--he-font-sub); font-size: 11px; letter-spacing: .6em; color: rgba(201,162,74,.8); animation-delay: .1s !important; }
.he-title {
  margin-top: 12px !important;
  font-size: 22px; font-weight: 600; letter-spacing: .35em;
  animation-delay: .5s !important;
}
.he-subtitle { margin-top: 8px !important; font-family: var(--he-font-sub); font-size: 12px; letter-spacing: .4em; color: rgba(236,215,154,.6); animation-delay: .9s !important; }
@media (min-width: 640px) { .he-title { font-size: 26px; } }

.he-gold-text {
  background: linear-gradient(180deg, #fff6d8 0%, #e9cf88 40%, #b8902f 70%, #f1dc9c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes he-fade-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ---------- 封筒 ---------- */
.he-wrap { opacity: 0; animation: he-enter 2.1s var(--he-ease-silk) .35s forwards; }
@keyframes he-enter {
  0%   { opacity: 0; transform: translateY(46vh) rotate(-9deg) scale(.86); filter: blur(10px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.he-float { animation: he-float 6s ease-in-out 2.4s infinite; }
@keyframes he-float {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-8px) rotate(.4deg); }
}
.is-opening .he-float { animation-play-state: paused; }

.he-envelope {
  position: relative;
  width: var(--he-w); height: var(--he-h);
  perspective: 1400px;
  cursor: pointer; outline: none;
}
.he-envelope:focus-visible { box-shadow: 0 0 0 2px rgba(227,198,127,.6); border-radius: 6px; }

.he-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 30px; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%);
  filter: blur(6px);
}

.he-paper { /* 黒い紙の質感 */
  background-color: #0d0b09;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    linear-gradient(160deg, #1b1712 0%, #0b0907 55%, #060504 100%);
}

.he-back {
  position: absolute; inset: 0; z-index: 1; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(201,162,74,.18);
}
.he-back::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(201,162,74,.08) 0 2px, transparent 2px 9px);
}

/* 中のカード */
.he-letter, .he-sheet {
  border-radius: 4px;
  background: linear-gradient(170deg, #17130e, #0a0806);
  box-shadow: 0 0 0 1px var(--he-gold-3), inset 0 0 0 4px #0a0806, inset 0 0 0 5px rgba(201,162,74,.55), 0 10px 30px rgba(0,0,0,.6);
}
.he-letter {
  position: absolute; left: 7%; right: 7%; top: 8%; height: 86%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 10%;
  transition: transform 1.25s var(--he-ease-silk), opacity .5s;
}
.he-letter-label { font-size: clamp(10px, 2.6vw, 13px); letter-spacing: .4em; color: var(--he-gold-2); }
.he-letter-rule { width: 40%; height: 1px; margin-top: 8px; background: linear-gradient(90deg, transparent, var(--he-gold-3), transparent); }
.is-card-out .he-letter { transform: translateY(-78%); }

/* 画面いっぱいに広がる紙（expandTo 未指定時） */
.he-sheet {
  position: fixed; z-index: 102; pointer-events: none;
  transition:
    left 1.1s var(--he-ease-silk), top 1.1s var(--he-ease-silk),
    width 1.1s var(--he-ease-silk), height 1.1s var(--he-ease-silk),
    border-radius 1.1s, opacity .9s var(--he-ease-soft) .75s, filter .9s .75s;
}
.he-sheet.is-dissolving { opacity: 0; filter: blur(8px); }

.he-front {
  position: absolute; inset: 0; z-index: 3; border-radius: 6px; pointer-events: none;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.5);
}
.he-front-lines { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }

/* フラップ（3D） */
.he-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 58%;
  z-index: 4; transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1.1s var(--he-ease-soft);
}
.he-flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.he-flap-outer { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.he-flap-outer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(201,162,74,.1));
}
.he-flap-inner {
  transform: rotateX(180deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(0deg, #2a2116, #120e0a 70%);
}
.he-flap-inner::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(201,162,74,.10) 0 1px, transparent 1px 8px);
}
.he-flap-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.is-opening .he-flap { transform: rotateX(180deg); }
.he-flap.is-behind { z-index: 1; }

/* 光沢スイープ */
.he-sheen { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: 6px; }
.he-sheen::before {
  content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(248,236,196,.10), transparent);
  transform: rotate(18deg);
  animation: he-sheen 5.5s ease-in-out 2.6s infinite;
}
@keyframes he-sheen { 0% { left: -60% } 35%,100% { left: 130% } }
.is-opening .he-sheen { opacity: 0; transition: opacity .3s; }

/* ---------- シーリングワックス ---------- */
.he-seal {
  position: absolute; left: 50%; top: 58%; z-index: 5;
  width: calc(var(--he-w) * .24); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.he-seal-half { position: absolute; inset: 0; transition: transform 1s var(--he-ease-silk), opacity .9s ease; }
.he-seal-half.l { clip-path: polygon(-20% -20%, 54% -20%, 46% 30%, 55% 52%, 44% 74%, 52% 120%, -20% 120%); }
.he-seal-half.r { clip-path: polygon(54% -20%, 120% -20%, 120% 120%, 52% 120%, 44% 74%, 55% 52%, 46% 30%); }
.he-seal-body {
  position: absolute; inset: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 32% 28%, #fff4cf 0%, #f0d48a 14%, #c9a24a 38%, #8a6522 70%, #4f3810 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.65), inset 0 -4px 8px rgba(60,40,8,.7), inset 0 3px 6px rgba(255,244,207,.5);
}
.he-seal-body::before { /* 溶けた縁 */
  content: ""; position: absolute; inset: -6%; z-index: -1;
  border-radius: 55% 45% 52% 48% / 46% 56% 44% 54%;
  background: radial-gradient(circle at 35% 30%, #e7c878, #9a7429 60%, #5b4114);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.he-seal-ring {
  position: absolute; inset: 16%; border-radius: 50%;
  border: 1px solid rgba(80,55,12,.55);
  box-shadow: 0 1px 0 rgba(255,240,200,.45), inset 0 1px 0 rgba(255,240,200,.35);
  display: grid; place-items: center;
}
.he-seal-ring span {
  font-family: var(--he-font); font-weight: 800; line-height: 1;
  font-size: calc(var(--he-w) * .085);
  color: #6e5016;
  text-shadow: 0 1px 0 rgba(255,240,200,.55), 0 -1px 0 rgba(60,40,8,.6);
}
.he-seal-glow {
  position: absolute; inset: -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(227,198,127,.35), transparent 60%);
  animation: he-seal-pulse 2.6s ease-in-out infinite;
}
@keyframes he-seal-pulse { 0%,100% { opacity: .35; transform: scale(.9) } 50% { opacity: .9; transform: scale(1.05) } }
.he-crack {
  position: absolute; inset: -60%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,246,214,.95), rgba(227,198,127,.4) 25%, transparent 60%);
}
.is-opening .he-seal-glow { opacity: 0; animation: none; transition: opacity .2s; }
.is-opening .he-crack { animation: he-flash .7s ease-out forwards; }
@keyframes he-flash { 0% { opacity: 0; transform: scale(.3) } 25% { opacity: 1 } 100% { opacity: 0; transform: scale(1.4) } }
.is-opening .he-seal-half.l { transform: translate(-70%, 160%) rotate(-38deg); opacity: 0; transition-delay: .12s; }
.is-opening .he-seal-half.r { transform: translate(70%, 170%) rotate(32deg); opacity: 0; transition-delay: .12s; }

/* ---------- 開封ボタン ---------- */
.he-prompt {
  margin-top: 56px; text-align: center;
  opacity: 0; animation: he-fade-up 1.4s var(--he-ease-silk) 2.2s forwards;
  transition: opacity .5s, transform .5s;
}
.is-opening .he-prompt { opacity: 0 !important; transform: translateY(10px); pointer-events: none; }
.he-open-btn {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 14px 34px;
  font-family: var(--he-font); font-size: 15px; letter-spacing: .3em;
  color: var(--he-gold-1);
  border: 1px solid rgba(201,162,74,.55); border-radius: 999px;
  background: linear-gradient(180deg, rgba(201,162,74,.10), rgba(201,162,74,.02));
  cursor: pointer;
  animation: he-btn-glow 2.8s ease-in-out infinite;
}
.he-open-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(248,236,196,.25) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: he-btn-sweep 3.2s ease-in-out infinite;
}
@keyframes he-btn-glow {
  0%,100% { box-shadow: 0 0 18px rgba(201,162,74,.15), inset 0 0 10px rgba(201,162,74,.10); }
  50%     { box-shadow: 0 0 38px rgba(227,198,127,.45), inset 0 0 16px rgba(201,162,74,.25); }
}
@keyframes he-btn-sweep { 0% { transform: translateX(-120%) } 55%,100% { transform: translateX(120%) } }
.he-open-sub { margin: 16px 0 0; font-family: var(--he-font-sub); font-size: 10px; letter-spacing: .5em; color: rgba(201,162,74,.5); }

@media (prefers-reduced-motion: reduce) {
  .he-overlay *, .he-overlay *::before, .he-overlay *::after, .he-overlay::after, .he-sheet {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important;
  }
}