/* ===========================================================================
   AETHER Pack 05 — Cyber Slider
   ドラッグでキャラクターが切り替わる。HUDの世界観をページ全体へ。
   =========================================================================== */

.aeo-has-pack {
  --accent:  #39ff88;
  --accent2: #1f9e56;
  --ink:     #e8f6ee;
  --bg:      #050a08;
  --bg2:     #0c1512;
}

/* ===================== ヒーロー ===================== */
.cy {
  position: relative; min-height: 100svh; overflow: hidden;
  background: #050a08; color: #e8f6ee;
  display: flex; align-items: center;
  user-select: none;
}
/* 背景の方眼 */
.cy-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb,#39ff88 8%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,#39ff88 8%,transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
}
/* 四隅のかぎ括弧 */
.cy-frame i { position:absolute; width:34px; height:34px; border:1.5px solid color-mix(in srgb,#39ff88 55%,transparent); }
.cy-frame i:nth-child(1){ left:22px; top:22px; border-right:0; border-bottom:0; }
.cy-frame i:nth-child(2){ right:22px; top:22px; border-left:0; border-bottom:0; }
.cy-frame i:nth-child(3){ left:22px; bottom:22px; border-right:0; border-top:0; }
.cy-frame i:nth-child(4){ right:22px; bottom:22px; border-left:0; border-top:0; }

.cy-hud {
  position:absolute; z-index:3; font-size:.64rem; letter-spacing:.24em;
  color: color-mix(in srgb,#39ff88 80%,transparent); font-weight:700;
}
.cy-hud--tl { left:66px; top:30px; }
.cy-hud--tr { right:66px; top:30px; }

/* 背後の巨大な名前 */
.cy-name {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size: clamp(4rem, 16vw, 13rem); font-weight:900; letter-spacing:-.02em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb,#e8f6ee 18%,transparent);
  white-space:nowrap; pointer-events:none; z-index:1;
}

/* スライド */
.cy-stage { position:absolute; inset:0; z-index:2; cursor:grab; }
.cy-stage:active { cursor:grabbing; }
.cy-slide {
  position:absolute; inset:0; margin:0;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transform:scale(1.04); pointer-events:none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.cy-slide.is-on { opacity:1; transform:none; }
.cy-slide img {
  height: 88%; width:auto; max-width:60vw; object-fit:contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}

.cy-inner {
  position:relative; z-index:3;
  max-width:1180px; margin:0 auto; width:100%;
  padding: 0 clamp(20px,6vw,60px);
}
.cy-eyebrow { font-size:.7rem; letter-spacing:.32em; font-weight:700; color:#39ff88; margin:0 0 16px; }
.cy-title { font-size:clamp(2rem,5vw,3.8rem); font-weight:900; letter-spacing:-.03em; line-height:1.14; margin:0 0 14px; max-width:14em; }
.cy-sub { font-size:.86rem; letter-spacing:.16em; color:color-mix(in srgb,#e8f6ee 62%,transparent); margin:0; }
.cy-cta { margin-top:30px; }
.cy-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border:1.5px solid #39ff88; border-radius:2px;
  color:#39ff88; font-size:.9rem; font-weight:700; letter-spacing:.1em; text-decoration:none;
  transition: background .25s, color .25s;
}
.cy-btn:hover { background:#39ff88; color:#050a08; }

.cy-nav {
  position:absolute; right:clamp(20px,6vw,60px); bottom:76px; z-index:4;
  display:flex; align-items:center; gap:14px; font-size:.76rem; letter-spacing:.2em;
}
.cy-arrow {
  width:40px; height:40px; border:1px solid color-mix(in srgb,#39ff88 45%,transparent);
  background:transparent; color:#39ff88; font-size:20px; line-height:1; cursor:pointer;
  transition: background .25s;
}
.cy-arrow:hover { background: color-mix(in srgb,#39ff88 18%,transparent); }
.cy-index b { color:#39ff88; }
.cy-hint {
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  font-size:.6rem; letter-spacing:.28em; color:color-mix(in srgb,#e8f6ee 40%,transparent); margin:0;
}

/* ===================== ページ全体へ ===================== */
.aeo-has-pack .aeo-section { position: relative; }
/* 角ばったHUD調に */
.aeo-has-pack .aeo-works__card,
.aeo-has-pack .aeo-voice__card,
.aeo-has-pack .aeo-faq__item,
.aeo-has-pack .aeo-btn { border-radius: 2px; }
.aeo-has-pack .aeo-sec-head__en {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em;
}
/* セクション見出しの前に // を出す */
.aeo-has-pack .aeo-sec-head__en::before { content: "// "; opacity: .6; }
/* カードの角にかぎ括弧 */
.aeo-has-pack .aeo-works__card::after {
  content:""; position:absolute; right:0; bottom:0; width:16px; height:16px;
  border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); opacity:.6;
}
.aeo-has-pack .aeo-works__card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .cy-slide { transition: none; }
}