/* ============================================================
   experience.css — and shisha OKINAWA
   3D EXPERIENCE HERO（白基調・Three.js・近未来UI）
   ============================================================ */
.exp{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#FFFFFF;
  isolation:isolate;
}
.exp-stage{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 50% 46%, #FFFFFF 0%, #FBFAF8 55%, #F2F0EC 100%);
}
.exp-stage canvas{display:block; width:100%; height:100%}
.exp-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(78% 70% at 50% 44%, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 78%, #ffffff 100%);
}
.exp-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.exp-ui{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  will-change:transform;
}
.exp-ui a, .exp-ui button{pointer-events:auto}

/* 上部：エルボー＋見出し＋ボタン */
.exp-top{
  position:absolute; top:clamp(96px,15vh,150px); left:50%; transform:translateX(-50%);
  width:min(1100px,92vw); text-align:center;
}
.exp-eyebrow{
  font-family:var(--serif-en); font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--clay-deep); margin-bottom:20px; opacity:.9;
}
.exp-title{
  font-family:var(--serif-jp); font-weight:600; color:var(--ink);
  font-size:clamp(26px,4.6vw,50px); line-height:1.32; letter-spacing:.04em;
  margin-bottom:30px;
}
.exp-title .char-wrapper{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em}
.exp-title .char-inner{
  display:inline-block; opacity:0; transform:translateY(105%); filter:blur(16px);
  animation:exp-char 1.1s cubic-bezier(0.05,0.9,0.1,1) forwards;
}
@keyframes exp-char{0%{opacity:0;transform:translateY(105%);filter:blur(16px)}30%{opacity:1}100%{opacity:1;transform:translateY(0);filter:blur(0)}}

.exp-btn{
  font-family:var(--sans-jp); font-size:15px; font-weight:500; letter-spacing:.03em;
  color:var(--ink); background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
  border:1px solid var(--line); padding:15px 30px; border-radius:9999px;
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  box-shadow:0 8px 30px rgba(110,102,90,.10); transform-style:preserve-3d;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.exp-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 12px 36px rgba(30,29,28,.24)}
.blinking-dot{
  width:9px; height:9px; border-radius:50%; background:var(--teal,#40B2A8);
  position:relative; display:inline-block; animation:pulse-glow 2s infinite ease-in-out;
}
.blinking-dot::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:rgba(64,178,168,.4); animation:wave-expand 2s infinite ease-in-out;
}
.exp-btn:hover .blinking-dot::after{background:rgba(197,168,126,.5)}
@keyframes pulse-glow{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes wave-expand{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}

/* 中央：情報バー（画面中央・立体化） */
.exp-mid{
  position:absolute; top:52%; left:clamp(20px,4vw,48px); right:clamp(20px,4vw,48px);
  transform:translateY(-50%); transform-style:preserve-3d;
}
.exp-mid-top{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.exp-mid-title{
  font-family:var(--serif-en); font-weight:500; color:var(--ink);
  font-size:clamp(15px,1.8vw,22px); letter-spacing:.02em; margin:0;
}
.exp-mid-title.quote{font-style:italic; color:var(--clay-deep)}
.exp-divider{border:none; height:1px; background:var(--line); margin:18px 0}
.exp-mid-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px}
.exp-socials{display:flex; gap:16px; align-items:center; flex:1}
.exp-social{color:var(--ink-soft); display:inline-flex; transition:color .3s var(--ease), transform .3s var(--ease)}
.exp-social:hover{color:var(--clay); transform:translateY(-2px)}
.exp-links{display:flex; gap:clamp(16px,2.4vw,40px); justify-content:center; align-items:center; flex:2}
.exp-link{
  font-family:var(--serif-en); font-size:15px; letter-spacing:.05em; color:var(--ink);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.exp-link:hover{opacity:.6; transform:translateY(-1px)}
.exp-meta{
  font-family:var(--serif-en); font-size:12.5px; letter-spacing:.1em; color:var(--muted);
  text-align:right; flex:1; white-space:nowrap;
}

/* 巨大ワードマーク（下部・一文字ずつ左からリビール） */
.exp-wordmark-wrap{
  position:absolute; bottom:clamp(14px,3vh,30px); left:0; right:0;
  display:flex; justify-content:center; pointer-events:none;
}
.exp-wordmark{
  font-family:var(--serif-en); font-style:italic; font-weight:500;
  font-size:19vw; line-height:.8; letter-spacing:-.02em; white-space:nowrap;
  color:var(--clay-deep); opacity:.16;
}
.exp-wordmark .letter-wrapper{display:inline-block; overflow:hidden; vertical-align:bottom; line-height:.8}
.exp-wordmark .letter-inner{
  display:inline-block; opacity:0; transform:translateX(-105%); filter:blur(16px);
  animation:exp-letter 1.2s cubic-bezier(0.05,0.9,0.1,1) forwards;
}
@keyframes exp-letter{0%{opacity:0;transform:translateX(-105%);filter:blur(16px)}25%{opacity:.16}100%{opacity:.16;transform:translateX(0);filter:blur(0)}}

/* スクロール誘導 */
.exp-scroll{
  position:absolute; bottom:clamp(14px,3vh,26px); right:clamp(20px,4vw,44px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--serif-en); font-size:10px; letter-spacing:.34em; color:var(--muted);
}
.exp-scroll i{position:relative; width:1px; height:42px; background:var(--line); overflow:hidden; display:block}
.exp-scroll i::after{content:''; position:absolute; top:0; left:0; width:1px; height:14px; background:var(--clay); animation:scrolldot 2s ease-in-out infinite}

/* カスタムカーソルは shared.css に集約（cursor.js / JP・EN共通） */

/* レスポンシブ */
@media (max-width:760px){
  .exp-top{top:96px; width:92vw}
  .exp-mid{top:auto; bottom:19vh; transform:none}
  .exp-mid-top{flex-direction:column; align-items:center; gap:4px; text-align:center}
  .exp-mid-bottom{flex-direction:column; gap:14px}
  .exp-meta{text-align:center}
  .exp-links{gap:18px}
  .exp-wordmark{font-size:27vw}
  .exp-scroll{display:none}
}
@media (max-width:600px){
  .exp-title{font-size:clamp(22px,6.4vw,30px)}
  .exp-btn{font-size:14px; padding:14px 24px}
}