/*
Theme Name: connect 2026 子テーマ
Template: connect
Version: 1.0.0
Description: connect 2026年版 Fluid Mesh / Aurora Gradient (whatamesh) テーマ
*/

/* ---------------------------------
   Whatamesh ご指定4色カラーパレット
   --------------------------------- */
:root {
  --gradient-color-1: #c3e4ff;
  /* スカイブルー */
  --gradient-color-2: #b9beff;
  /* バイオレット */
  --gradient-color-3: #ffffff;
  /* ピュアホワイト */
  --gradient-color-4: #ffd9fb;
  /* ソフトピンク */
}

/* main-section 内への領域限定絶対配置 */
main .main-section {
  position: relative;
  background-color: transparent !important;
}

#bg-canvas-container,
#particles-js,
#gradient-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

#gradient-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(25px) saturate(100%);
  transform: scale(1.03);
  opacity: 0.3;
}

/* テキスト・コンテンツのZ-Indexを全面最優先表示 */
.main-section>*:not(#bg-canvas-container):not(#particles-js):not(#gradient-canvas) {
  position: relative;
  z-index: 1;
}

/* 左上 三角黒ベタ トレードマークバッジ */
.hamburger .trademark-triangle {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  background: #000000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 5;
  transform-origin: top left;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

/* トレードマーク内 白文字 */
.hamburger .trademark-triangle i {
  font-style: normal;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sub);
  line-height: 1;
  margin-top: 2px;
  margin-left: 3px;
  display: block;
  transition: transform 0.3s ease;
}

.hamburger .trademark-triangle i {
  color: #000;
}

.hamburger span:nth-child(1) {
  transform: scale(1.0) rotate(0deg);
}

.hamburger span:nth-child(1) {
  top: -2px;
}

.hamburger .trademark-triangle {
  left: 3px;
  width: 20px;
  height: 20px;
}

.hamburger span:nth-child(2) {
  top: 0px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(60deg);
  top: 17px;
}

.hamburger.active .trademark-triangle {
  left: 20px;
  width: 16px;
  height: 16px;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-19deg);
  top: 19px;
}

.hamburger.active span:last-child {
  transition: all 0.3s ease;
  top: 9px;
}

#bg-canvas-container {
  background-color: #ffffff !important;
}

/* connectを象徴する2本の背景交差黄色ハイライト帯 */
.bg-cross-ribbons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -100;
  overflow: hidden;
}

.bg-cross-ribbons .ribbon-band {
  position: absolute;
  top: 48vh;
  left: 67vw;
  /* PC画面の右から1/3近辺 */
  width: 260vw;
  height: 36px;
  background: linear-gradient(90deg, transparent 0%, rgba(233, 255, 80, 1) 15%, rgba(233, 255, 80, 0.9) 50%, rgba(233, 255, 80, 1) 85%, transparent 100%);
  box-shadow: 0 0 24px rgba(233, 255, 80, 0.2);
  mix-blend-mode: multiply;
  opacity: 1;
  transition: transform 0.8s ease, opacity 0.5s ease;
}

/* 1本目: 左上から右下へ交差斜線 */
.bg-cross-ribbons .ribbon-1 {
  transform: translate(-50%, -50%) rotate(-92deg);
  animation: ribbonPulse1 14s ease-in-out infinite alternate;
  height: 420px;
}

/* 2本目: 右上から左下へ交差斜線 */
.bg-cross-ribbons .ribbon-2 {
  transform: translate(-50%, -50%) rotate(15deg);
  animation: ribbonPulse2 16s ease-in-out infinite alternate;
  height: 240px;
}