/* =========================================================
   StudioArte — 探索レイヤー（Explore / Discover / Archive）
   既存デザインの上に重ねる独立モジュール。
   通常閲覧では「ほぼ見えない」ことが正しい状態。
   ========================================================= */

/* ---------- Discovery point v3 ----------
   4頂点の星型（辺は中心へ凹むカーブ）・ほんのり黄色・自然なにじみ・強めの明滅。
   カーソルが近づくと激しく明滅（.excite）。発見済みは完全に消える（2026-08-26 本人指示）。 */
.dp{
  position:absolute;
  width:44px; height:44px;              /* hit area（SP基準44px） */
  margin:-22px 0 0 -22px;               /* 中心座標指定 */
  padding:0; border:0; background:none;
  cursor:pointer;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
}
.dp::before{                            /* にじみ（月光のようにふわっと・多段フォールオフ） */
  content:""; position:absolute; inset:50%;
  width:32px; height:32px; margin:-16px 0 0 -16px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,246,214,.75) 0%,
    rgba(255,240,196,.32) 22%,
    rgba(255,236,186,.14) 44%,
    rgba(255,232,180,0) 72%);
  animation:dpGlow 3.6s ease-in-out infinite;
}
.dp::after{                             /* 星の芯 */
  content:""; position:absolute; inset:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13.2 8.4 15.6 10.8 24 12 C15.6 13.2 13.2 15.6 12 24 C10.8 15.6 8.4 13.2 0 12 C8.4 10.8 10.8 8.4 12 0 Z' fill='%23FFF3C9'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,244,200,.95)) drop-shadow(0 0 14px rgba(255,236,180,.55));
  animation:dpStar 3.6s ease-in-out infinite;
}
@keyframes dpGlow{
  0%,100%{ opacity:.35; transform:scale(.8); }
  50%    { opacity:.95; transform:scale(1.06); }
}
@keyframes dpStar{
  0%,100%{ opacity:.55; transform:scale(.82); }
  50%    { opacity:1;   transform:scale(1); }
}
.dp:nth-of-type(odd)::before,
.dp:nth-of-type(odd)::after{ animation-delay:-1.8s; }

/* カーソル接近: 激しく明滅 */
.dp.excite::before{ animation:dpGlowFast .7s ease-in-out infinite; }
.dp.excite::after{  animation:dpStarFast .7s ease-in-out infinite; }
@keyframes dpGlowFast{
  0%,100%{ opacity:.5;  transform:scale(.9); }
  50%    { opacity:1;   transform:scale(1.35); }
}
@keyframes dpStarFast{
  0%,100%{ opacity:.7; transform:scale(.9) rotate(0deg); }
  50%    { opacity:1;  transform:scale(1.3) rotate(8deg); }
}

/* 特殊点（Studio円環中心）: 一回り大きく、にじみに淡シアンが混ざる */
.dp--special::before{
  width:42px; height:42px; margin:-21px 0 0 -21px;
  background:radial-gradient(circle,
    rgba(255,250,228,.8) 0%,
    rgba(230,246,250,.35) 26%,
    rgba(57,189,235,.12) 48%,
    rgba(57,189,235,0) 74%);
  animation-duration:4.8s;
}
.dp--special::after{
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  filter:drop-shadow(0 0 6px rgba(255,248,214,.95)) drop-shadow(0 0 18px rgba(57,189,235,.4));
}

/* 発見済み: 完全に消える（灰色の点は残さない） */
.dp.found{ visibility:hidden; pointer-events:none; }

.dp:focus-visible{ outline:none; }
.dp:focus-visible::before{ animation:dpGlowFast .7s ease-in-out infinite; }

/* ---------- ARCHIVE カウンター（右下・極小） ---------- */
.arch-chip{
  position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(14px,2vh,24px);
  z-index:60;
  border:0; background:none; padding:8px 2px;
  font-family:var(--latin);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-soft);
  cursor:pointer;
  opacity:0; translate:0 6px;
  transition:opacity .9s ease, translate .9s ease, color .4s ease;
  pointer-events:none;
}
.arch-chip.is-in{ opacity:1; translate:0 0; pointer-events:auto; }
.arch-chip:hover{ color:var(--structure); }
.arch-chip b{ font-weight:500; color:var(--structure); }

/* ---------- パネル共通（Discovery / Archive） ---------- */
.xpanel{
  position:fixed; z-index:70;
  background:rgba(250,252,252,.96);
  backdrop-filter:blur(10px);
  border-left:1px solid rgba(37,61,75,.12);
  box-shadow:-8px 0 40px rgba(16,25,30,.05);
  display:flex; flex-direction:column;
  visibility:hidden; opacity:0;
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.xpanel.is-open{ visibility:visible; opacity:1; transition:opacity .5s ease, transform .5s ease; }

/* Discovery panel：右下から静かに */
.xpanel--disc{
  right:clamp(16px,2vw,28px); bottom:clamp(52px,7vh,72px);
  width:min(352px, calc(100vw - 40px));
  border:1px solid rgba(37,61,75,.12);
  padding:26px 26px 22px;
  transform:translateY(16px);
}
.xpanel--disc.is-open{ transform:translateY(0); }

/* Archive drawer：右側全高 */
.xpanel--arch{
  top:0; right:0; height:100vh; height:100svh;
  width:min(400px, 92vw);
  padding:88px 34px 30px;
  transform:translateX(24px);
  overflow-y:auto;
}
.xpanel--arch.is-open{ transform:translateX(0); }

/* ---------- パネル内部 ---------- */
.x-label{
  font-family:var(--latin);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-soft);
}
.x-close{
  position:absolute; top:14px; right:14px;
  border:0; background:none; padding:10px;
  font-family:var(--latin); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-soft); cursor:pointer;
}
.x-close:hover{ color:var(--structure); }

.disc__media{
  margin-top:16px;
  aspect-ratio:16/10;
  background:var(--mist);
  border:1px solid rgba(37,61,75,.08);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--latin); font-size:9.5px; letter-spacing:.24em;
  color:var(--pale); text-transform:uppercase;
}
.disc__text{
  margin-top:16px;
  font-size:12.5px; line-height:2;
  color:var(--text-soft);
}
.disc__tag{
  margin-top:14px;
  font-family:var(--latin);
  font-size:9.5px; letter-spacing:.26em;
  color:var(--cyan);
}

/* Archive list：収蔵目録 */
.arch__count{
  margin-top:10px;
  font-family:var(--latin);
  font-size:13px; letter-spacing:.22em;
  color:var(--structure);
}
.arch__list{ margin-top:26px; }
.arch__row{
  display:flex; align-items:center; gap:16px;
  padding:13px 2px;
  border-bottom:1px solid rgba(37,61,75,.10);
  border-radius:0;
  width:100%; text-align:left;
  background:none; border-top:0; border-left:0; border-right:0;
  font-family:var(--latin); font-size:11px; letter-spacing:.18em;
  color:var(--text-soft);
  cursor:default;
}
.arch__row .no{ color:var(--pale); width:22px; flex:none; }
.arch__row.found{ color:var(--structure); cursor:pointer; }
.arch__row.found:hover .st{ color:var(--cyan); }
.arch__row .st{ margin-left:auto; letter-spacing:.24em; }
.arch__row:not(.found) .st{ color:rgba(170,189,199,.8); }

/* 2/8: 薄い線が1本つながる */
.arch__m2{
  height:1px; margin:26px 0 0;
  background:linear-gradient(to right, rgba(57,189,235,.45), rgba(57,189,235,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s ease .2s;
}
.xpanel--arch.m2 .arch__m2{ transform:scaleX(1); }

/* 4/8: 背景に小さな構造（薄い座標） */
.xpanel--arch.m4{
  background-image:
    radial-gradient(circle at 82% 88%, rgba(57,189,235,.05) 0%, rgba(57,189,235,0) 42%),
    linear-gradient(rgba(37,61,75,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,61,75,.035) 1px, transparent 1px);
  background-size:100% 100%, 56px 56px, 56px 56px;
}

/* 下部アクション行: 左=起動（8/8で出現）/ 右=リセット（常時） */
.arch__actions{
  margin-top:34px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.arch__reset{
  margin-left:auto;
  border:0; background:none; padding:10px 2px;
  font-family:var(--latin); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--pale); cursor:pointer;
  transition:color .4s ease;
}
.arch__reset:hover{ color:var(--text-soft); }
.arch__ignite{
  border:1px solid rgba(57,189,235,.45);
  border-radius:2px;
  background:transparent; padding:12px 30px;
  flex:none;
  font-family:var(--sans); font-size:12px;
  letter-spacing:.3em;
  color:var(--structure); cursor:pointer;
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.arch__ignite:hover{
  background:var(--structure); color:#fff; border-color:var(--structure);
  box-shadow:0 0 24px rgba(57,189,235,.25);
}

/* ---------- 6/8: Heroの光路が奥へ伸びる ---------- */
.hero__pathExt{
  position:absolute; left:34%; bottom:21%;
  width:0; height:1px; z-index:0;
  background:linear-gradient(to right, rgba(57,189,235,0), rgba(57,189,235,.5) 40%, rgba(57,189,235,0));
  transition:width 2.4s ease;
  pointer-events:none;
}
.hero__pathExt.is-on{ width:38%; }

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .xpanel--disc{
    right:0; left:0; bottom:0; width:100%;
    border-left:0; border-right:0; border-bottom:0;
    border-radius:10px 10px 0 0;
    padding:24px 22px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(24px);
  }
  .xpanel--arch{
    top:auto; bottom:0; height:82svh; width:100%;
    border-left:0; border-top:1px solid rgba(37,61,75,.12);
    border-radius:12px 12px 0 0;
    padding:56px 24px 30px;
    transform:translateY(24px);
  }
  .xpanel--arch.is-open{ transform:translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .dp::before,.dp::after{ animation:none !important; opacity:.8; }
  .dp::before,.dp::after,.xpanel,.arch-chip,.arch__m2,
  .hero__pathExt,.x-toast{ transition-duration:.001ms !important; }
}

/* ---------- 裏モード（起動後・演出は仮） ----------
   Hero画像は変えない。文字と空気だけが変わる。 */
html.ura body{ background:#E9EDEE; }
html.ura .hero__glow{
  background:
    linear-gradient(to right, rgba(226,233,235,.6) 0%, rgba(226,233,235,0) 56%),
    linear-gradient(to top, rgba(222,230,232,.4) 0%, rgba(222,230,232,0) 32%);
}
html.ura .hero__copy,
html.ura .studio__lead,
html.ura .contact__lead{ color:#182A35; }
html.ura .label{ color:#7E96A2; }
html.ura .works{ background:#EFF3F3; }
html.ura .contact{ background:#ECF1F1; }
html.ura .arch-chip b{ color:var(--cyan); }
html.ura .studio__lead{ white-space:normal; }