/* ═══════════════════════════════════════════════════
   LIQUID GLASS UI v3 — 全ページ共通
   Glass Tube aesthetic:
   ・超透明サーフェス（実ガラス）
   ・上端 white lip で管の光沢表現
   ・線形グラジエントで円柱ガラスの立体感
   ・強いドロップシャドウで浮遊感
   ・saturate() は全廃 — 背景色の増幅ゼロ
═══════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────── */
:root {
  /* Glass physics — saturate は使わない */
  --lg-blur:          44px;

  /* Surface — 白濁寄りに調整（背景色が滲まない量） */
  --lg-surface:       rgba(255, 255, 255, 0.28);
  --lg-surface-hover: rgba(255, 255, 255, 0.40);

  /* Border — bright glass edge */
  --lg-border:        rgba(255, 255, 255, 0.72);
  --lg-border-hover:  rgba(255, 255, 255, 0.96);

  /* Glass tube highlights (inset box-shadow) */
  --lg-lip-top:       rgba(255, 255, 255, 1.00);
  --lg-lip-left:      rgba(255, 255, 255, 0.82);
  --lg-lip-right:     rgba(255, 255, 255, 0.35);
  --lg-lip-bottom:    rgba(0,   0,   0,   0.10);

  /* 浮遊シャドウ */
  --lg-float-sm:
    0 2px 4px   rgba(9,9,9,0.06),
    0 8px 28px  rgba(9,9,9,0.09),
    0 0 0 0.5px rgba(255,255,255,0.65);

  --lg-float-md:
    0 4px 8px   rgba(9,9,9,0.07),
    0 16px 48px rgba(9,9,9,0.11),
    0 0 0 0.5px rgba(255,255,255,0.70);

  --lg-float-lg:
    0 8px 16px  rgba(9,9,9,0.08),
    0 28px 72px rgba(9,9,9,0.13),
    0 0 0 0.5px rgba(255,255,255,0.75);

  /* Dark glass (active / filled state) */
  --lg-dark-surface:  rgba(10, 10, 18, 0.55);
  --lg-dark-border:   rgba(255, 255, 255, 0.32);

  /* Mouse position for specular */
  --mx: 30%; --my: 25%;
}


/* ══════════════════════════════════════════════════
   1. CURSOR RING
══════════════════════════════════════════════════ */
#cursor-ring {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid rgba(28,27,27,0.50);
  box-shadow: none;
  transition:
    width  0.35s cubic-bezier(0.22,1,0.36,1),
    height 0.35s cubic-bezier(0.22,1,0.36,1),
    border-color 0.25s ease,
    opacity 0.25s ease;
}

body.cursor-hover #cursor-ring {
  width: 58px; height: 58px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid rgba(28,27,27,0.30);
  box-shadow: none;
}
body.cursor-click #cursor-ring {
  width: 20px; height: 20px;
  background: transparent;
  box-shadow: none;
}


/* ══════════════════════════════════════════════════
   2. NAV PILLS — Glass tube pill
══════════════════════════════════════════════════ */
.hero-nav-pill,
.side-nav-pill {
  background: var(--lg-surface) !important;
  backdrop-filter: blur(var(--lg-blur)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 0 2.5px 0 var(--lg-lip-top),
    inset 2px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -1.5px 0 var(--lg-lip-bottom),
    var(--lg-float-sm) !important;
  transition:
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease !important;
}

/* Glass tube gradient overlay */
.hero-nav-pill::before,
.side-nav-pill::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.03) 65%,
    rgba(0,0,0,0.04) 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Mouse-tracking specular on hover */
.hero-nav-pill:hover::before,
.side-nav-pill:hover::before {
  background: radial-gradient(
    ellipse 80% 65% at var(--mx) var(--my),
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 40%,
    transparent 68%
  ), linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.14) 40%,
    transparent 70%
  );
}

/* Fill layer for active/hover dark fill */
.hero-nav-pill::after {
  background: rgba(10,10,18,0.58) !important;
  z-index: 1 !important;
}
.side-nav-pill::after {
  background: rgba(10,10,18,0.58) !important;
  z-index: 1 !important;
}

.hero-nav-pill:hover,
.side-nav-pill:hover {
  background: rgba(8,8,16,0.16) !important;
  backdrop-filter: blur(var(--lg-blur)) brightness(0.82) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) brightness(0.82) !important;
  border: 1px solid rgba(255,255,255,0.36) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.32),
    inset 2px 0 0 rgba(255,255,255,0.22),
    inset -1px 0 0 rgba(255,255,255,0.10),
    inset 0 -1.5px 0 rgba(0,0,0,0.28),
    0 10px 36px rgba(9,9,9,0.20),
    0 2px 8px rgba(9,9,9,0.12),
    0 0 0 1px rgba(255,255,255,0.28) !important;
}

.hero-nav-pill:hover { transform: translateX(6px) !important; }

.hero-nav-pill.active,
.side-nav-pill.active {
  background: var(--lg-dark-surface) !important;
  backdrop-filter: blur(var(--lg-blur)) brightness(0.72) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) brightness(0.72) !important;
  border: 1px solid var(--lg-dark-border) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.38),
    inset 2px 0 0 rgba(255,255,255,0.24),
    inset 0 -1.5px 0 rgba(0,0,0,0.28),
    0 10px 36px rgba(9,9,9,0.22),
    0 2px 8px rgba(9,9,9,0.14),
    0 0 0 1px rgba(255,255,255,0.18) !important;
}
.hero-nav-pill.active span,
.side-nav-pill.active span { color: rgba(253,248,248,0.95); }
.hero-nav-pill.active::after { transform: scaleX(1); }
.side-nav-pill.active::after { transform: scaleX(1); }


/* ══════════════════════════════════════════════════
   3. CTA BUTTONS — Glass pill with tube gloss
══════════════════════════════════════════════════ */
.btn-primary {
  background: var(--lg-surface) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 0 2.5px 0 var(--lg-lip-top),
    inset 2px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -1.5px 0 var(--lg-lip-bottom),
    var(--lg-float-md) !important;
  color: var(--ink) !important;
  position: relative !important;
  overflow: visible !important;
  transition:
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease !important;
}

/* Glass cylinder gradient */
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.58) 0%,
    rgba(255,255,255,0.20) 38%,
    rgba(255,255,255,0.04) 65%,
    rgba(0,0,0,0.03) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Floating blob shadow underneath */
.btn-primary::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  bottom: -12px;
  height: 22px;
  background: rgba(9,9,9,0.18);
  filter: blur(16px);
  border-radius: 50%;
  z-index: -1;
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.btn-primary:hover {
  transform: translateY(-5px) scale(1.04) !important;
  background: var(--lg-surface-hover) !important;
  border-color: var(--lg-border-hover) !important;
  box-shadow:
    inset 0 3px 0 var(--lg-lip-top),
    inset 2.5px 0 0 var(--lg-lip-left),
    inset -1.5px 0 0 var(--lg-lip-right),
    inset 0 -2px 0 var(--lg-lip-bottom),
    0 6px 12px rgba(9,9,9,0.07),
    0 22px 56px rgba(9,9,9,0.13),
    0 0 0 1px rgba(255,255,255,0.96) !important;
  opacity: 1 !important;
}
.btn-primary:hover::after {
  transform: translateY(5px) scaleX(0.82);
  opacity: 0.60 !important;
}
.btn-primary:active {
  transform: translateY(-1px) scale(0.99) !important;
}
.btn-primary:active::after {
  transform: translateY(1px) scaleX(0.68);
  opacity: 0.28 !important;
}

/* Ghost button */
.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 100px !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--ink-2) !important;
  background: rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.90),
    inset 1.5px 0 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 2px 4px rgba(9,9,9,0.04),
    0 6px 20px rgba(9,9,9,0.06),
    0 0 0 0.5px rgba(255,255,255,0.70) !important;
  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
    color 0.22s ease,
    border-color 0.28s ease !important;
}
.btn-ghost:hover {
  color: var(--ink) !important;
  background: rgba(255,255,255,0.44) !important;
  border-color: rgba(255,255,255,0.92) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,1.00),
    inset 2px 0 0 rgba(255,255,255,0.70),
    inset 0 -1.5px 0 rgba(0,0,0,0.08),
    0 3px 6px rgba(9,9,9,0.05),
    0 10px 32px rgba(9,9,9,0.09),
    0 0 0 1px rgba(255,255,255,0.90) !important;
  transform: translateY(-2px) !important;
}


/* ══════════════════════════════════════════════════
   4. WORK CARDS — Glass panel with tube gloss
══════════════════════════════════════════════════ */
.work-card {
  background: var(--lg-surface) !important;
  backdrop-filter: blur(var(--lg-blur)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 0 2.5px 0 var(--lg-lip-top),
    inset 2px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -1.5px 0 var(--lg-lip-bottom),
    var(--lg-float-md) !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 0.5s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.5s ease,
    border-color 0.5s ease !important;
}

/* Static glass tube gradient + dynamic specular on hover */
.work-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.02) 58%,
    rgba(0,0,0,0.03) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.work-card:hover::before {
  background: radial-gradient(
    ellipse 80% 55% at var(--mx) var(--my),
    rgba(255,255,255,0.44) 0%,
    rgba(255,255,255,0.12) 44%,
    transparent 68%
  ), linear-gradient(
    180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.10) 35%,
    transparent 65%
  );
}

.work-card:hover {
  transform: translateY(-10px) scale(1.014) !important;
  border-color: var(--lg-border-hover) !important;
  box-shadow:
    inset 0 3px 0 var(--lg-lip-top),
    inset 2.5px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -2px 0 var(--lg-lip-bottom),
    0 8px 16px rgba(9,9,9,0.08),
    0 28px 72px rgba(9,9,9,0.14),
    0 0 0 1px rgba(255,255,255,0.96) !important;
}

/* Work footer (hover label) */
.work-footer {
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.96),
    inset 1.5px 0 0 rgba(255,255,255,0.60),
    0 4px 20px rgba(9,9,9,0.10) !important;
}


/* ══════════════════════════════════════════════════
   5. SKILL CARDS — Compact glass panel
══════════════════════════════════════════════════ */
.skill-card {
  background: var(--lg-surface) !important;
  backdrop-filter: blur(var(--lg-blur)) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 0 2.5px 0 var(--lg-lip-top),
    inset 2px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -1.5px 0 var(--lg-lip-bottom),
    var(--lg-float-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease !important;
}

/* Glass cylinder gradient */
.skill-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.16) 32%,
    rgba(255,255,255,0.03) 62%,
    rgba(0,0,0,0.03) 100%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.skill-card:hover::before {
  background: radial-gradient(
    ellipse 90% 65% at var(--mx) var(--my),
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.14) 45%,
    transparent 68%
  ), linear-gradient(
    180deg,
    rgba(255,255,255,0.48) 0%,
    rgba(255,255,255,0.10) 38%,
    transparent 68%
  );
}

.skill-card:hover {
  transform: translateY(-6px) scale(1.010) !important;
  background: var(--lg-surface-hover) !important;
  border-color: var(--lg-border-hover) !important;
  box-shadow:
    inset 0 3px 0 var(--lg-lip-top),
    inset 2.5px 0 0 var(--lg-lip-left),
    inset -1px 0 0 var(--lg-lip-right),
    inset 0 -2px 0 var(--lg-lip-bottom),
    0 6px 12px rgba(9,9,9,0.06),
    0 20px 52px rgba(9,9,9,0.11),
    0 0 0 1px rgba(255,255,255,0.96) !important;
}

/* Skill icon */
.skill-icon {
  background: rgba(10,10,18,0.52) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 1px 0 0 rgba(255,255,255,0.18),
    0 2px 10px rgba(9,9,9,0.16) !important;
}


/* ══════════════════════════════════════════════════
   6. SOCIAL BUTTONS — Glass icon pill
══════════════════════════════════════════════════ */
.social-btn {
  position: relative !important;
  overflow: hidden !important;
  background: var(--lg-surface) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 0 2.5px 0 var(--lg-lip-top),
    inset 2px 0 0 var(--lg-lip-left),
    inset 0 -1.5px 0 var(--lg-lip-bottom),
    var(--lg-float-sm) !important;
  transition:
    background 0.30s ease,
    box-shadow 0.30s ease,
    border-color 0.30s ease,
    transform 0.35s cubic-bezier(0.34,1.4,0.64,1),
    color 0.22s ease !important;
}
.social-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.16) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}
.social-btn:hover {
  background: rgba(10,10,18,0.52) !important;
  backdrop-filter: blur(var(--lg-blur)) brightness(0.76) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) brightness(0.76) !important;
  border: 1px solid rgba(255,255,255,0.36) !important;
  color: rgba(253,248,248,0.95) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.36),
    inset 2px 0 0 rgba(255,255,255,0.22),
    inset 0 -1.5px 0 rgba(0,0,0,0.28),
    0 8px 28px rgba(9,9,9,0.16),
    0 0 0 1px rgba(255,255,255,0.28) !important;
  transform: translateY(-4px) !important;
}


/* ══════════════════════════════════════════════════
   7. CONTACT FORM & GLASS PANELS
   ← 大きなパネルは落ち着いた不透明度を維持
══════════════════════════════════════════════════ */
.contact-form,
.glass {
  background: rgba(253, 248, 248, 0.68) !important;
  backdrop-filter: blur(36px) !important;
  -webkit-backdrop-filter: blur(36px) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,1.00),
    inset 2px 0 0 rgba(255,255,255,0.70),
    inset -1px 0 0 rgba(255,255,255,0.35),
    inset 0 -1.5px 0 rgba(0,0,0,0.06),
    0 8px 16px rgba(9,9,9,0.07),
    0 24px 64px rgba(9,9,9,0.10),
    0 0 0 0.5px rgba(255,255,255,0.70) !important;
}

/* Form inputs */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: transparent !important;
  border-color: rgba(199,198,202,0.6) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(9,9,9,0.55) !important;
  box-shadow: 0 0 0 3px rgba(9,9,9,0.07) !important;
  outline: none !important;
}


/* ══════════════════════════════════════════════════
   8. ABOUT BADGE & GLASS CHIPS
══════════════════════════════════════════════════ */
.about-badge.glass {
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,1.00),
    inset 2px 0 0 rgba(255,255,255,0.72),
    inset 0 -1.5px 0 rgba(0,0,0,0.07),
    0 8px 28px rgba(9,9,9,0.10),
    0 0 0 0.5px rgba(255,255,255,0.75) !important;
}

/* Work label */
.work-label {
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.96),
    inset 1px 0 0 rgba(255,255,255,0.55),
    0 4px 16px rgba(9,9,9,0.07),
    0 0 0 0.5px rgba(255,255,255,0.65) !important;
}

/* Chips */
.chip {
  background: rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    0 2px 8px rgba(9,9,9,0.06) !important;
}