/* ===========================================================================
   AETHER Pack 03 — Kinetic 3D
   巨大タイポ＋切り抜き主役の奥行き。エディトリアルな世界観をページ全体へ。
   =========================================================================== */

.aeo-has-pack {
  --accent:  #e8e8e8;
  --accent2: #9a9a9a;
  --ink:     #f2f2f2;
  --bg:      #0a0a0a;
  --bg2:     #151515;
}

/* ===================== ヒーロー ===================== */
.kn {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #0a0a0a;
  color: #f2f2f2;
}

/* 背後を流れる巨大文字 */
.kn-marquee {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  overflow: hidden; white-space: nowrap; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kn-marquee__track {
  display: inline-flex; gap: .4em;
  animation: kn-flow 26s linear infinite;
}
.kn-marquee__track span {
  font-size: clamp(6rem, 19vw, 17rem);
  font-weight: 900; letter-spacing: -.05em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, #f2f2f2 16%, transparent);
}
@keyframes kn-flow { to { transform: translateX(-33.33%); } }

/* 主役（切り抜き画像） */
.kn-subject {
  position: absolute; right: 2vw; bottom: 0;
  width: min(52vw, 620px); height: min(88vh, 780px);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.kn-subject img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.45));
}
@media (max-width: 860px) {
  .kn-subject { right: -8vw; width: 78vw; height: 52vh; opacity: .38; }
}

.kn-inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 0 clamp(20px, 6vw, 60px);
}
.kn-eyebrow {
  font-size: .76rem; letter-spacing: .34em; font-weight: 700;
  color: #e8e8e8; margin: 0 0 20px;
}
.kn-title {
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900; letter-spacing: -.055em; line-height: .94;
  margin: 0 0 18px; text-transform: uppercase;
}
.kn-word { display: inline-block; white-space: nowrap; }
.kn-char {
  display: inline-block;
  animation: kn-up .9s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes kn-up { from { opacity: 0; transform: translateY(.42em) rotate(4deg); } to { opacity: 1; transform: none; } }

.kn-ja {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 16px;
  animation: kn-fade .9s .5s both;
}
.kn-lead {
  font-size: clamp(.92rem, 1.4vw, 1rem); line-height: 2;
  max-width: 30em; margin: 0; color: color-mix(in srgb, #f2f2f2 66%, transparent);
  animation: kn-fade .9s .62s both;
}
.kn-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; animation: kn-fade .9s .74s both; }
@keyframes kn-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.kn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 34px; border-radius: 999px;
  background: #e8e8e8; color: #0a0a0a;
  font-size: .95rem; font-weight: 700; text-decoration: none;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), background .25s;
}
.kn-btn--ghost { background: transparent; color: #f2f2f2; border: 1.5px solid color-mix(in srgb, #f2f2f2 28%, transparent); }

.kn-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .62rem; letter-spacing: .3em;
  color: color-mix(in srgb, #f2f2f2 45%, transparent);
}
.kn-scroll span {
  width: 1px; height: 40px;
  background: linear-gradient(color-mix(in srgb, #f2f2f2 45%, transparent), transparent);
  animation: kn-drop 2s ease-in-out infinite;
}
@keyframes kn-drop { 0%,100%{opacity:.25;transform:scaleY(.5)} 50%{opacity:1;transform:scaleY(1)} }

/* ===================== ページ全体へ世界観を広げる ===================== */

/* 見出しをエディトリアルに（英字を大きく、日本語は詰める） */
.aeo-has-pack .aeo-sec-head__en {
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900;
  letter-spacing: -.04em; opacity: .12; display: block; margin-bottom: -.5em;
}
.aeo-has-pack .aeo-sec-head__ja { letter-spacing: -.03em; font-weight: 900; }

/* カードは角を落として紙面のように */
.aeo-has-pack .aeo-works__card,
.aeo-has-pack .aeo-voice__card { border-radius: 4px; }
.aeo-has-pack .aeo-works__thumb img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.aeo-has-pack .aeo-works__card:hover .aeo-works__thumb img { transform: scale(1.06); }

/* 番号を主役級に */
.aeo-has-pack .aeo-strength__no,
.aeo-has-pack .aeo-flow__no {
  font-size: 2.6rem; font-weight: 900; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
}
.aeo-has-pack .aeo-flow__no { font-size: 1.6rem; }

/* 取引先は罫で区切る */
.aeo-has-pack .aeo-clients__item { border-left: 1px solid var(--line); padding-left: 1.4em; }
.aeo-has-pack .aeo-clients__item:first-child { border-left: 0; padding-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .kn-marquee__track { animation: none; }
  .kn-char, .kn-ja, .kn-lead, .kn-cta { animation: none; opacity: 1; transform: none; }
  .kn-subject { transition: none; }
  .kn-scroll span { animation: none; }
}