/* =================================================================
   語縁 GOEN — FV スマホ縦動画カルーセル（PC / SP 共通）
   奥行きのあるスマホフレーム群。中央 1 台のみ再生、両脇は静止・減光。
   トークンは各ページ CSS に依存しないよう fallback 付きで参照する。
   ================================================================= */
.fv {
  --fv-ink: var(--ink, #1a1813);
  --fv-ivory: var(--ivory, #f4efe4);
  --fv-gold: var(--gold, #b3935a);
  --fv-gold-soft: var(--gold-soft, #c9b083);
  --fv-muted: var(--muted, #6f685b);
  --fv-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --fv-num: "Spectral", "Shippori Mincho", serif;
  --fv-sans: "Jost", "Noto Sans JP", sans-serif;
  --fv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fv-dur: 0.9s;
  /* 端末サイズ --phone-w と並びの間隔 --fv-gap は親（ステージ）側で定義する。未定義時は fallback */
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
}
.fv:focus-visible { outline: 1px solid var(--fv-gold); outline-offset: 12px; }
.fv__track {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 45%;
}
.fv__item {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--phone-w, 280px);
  margin: 0;
  transform-style: preserve-3d;
  transition:
    transform var(--fv-dur) var(--fv-ease),
    opacity var(--fv-dur) var(--fv-ease),
    filter var(--fv-dur) var(--fv-ease);
  cursor: pointer;
  will-change: transform, opacity;
}
.fv__item[data-pos="0"] {
  z-index: 10;
  cursor: default;
  transform: translate(-50%, -50%) translateX(0) scale(1) rotateY(0deg);
  opacity: 1;
  filter: none;
}
.fv__item[data-pos="1"],
.fv__item[data-pos="-1"] {
  z-index: 8;
  opacity: 0.86;
  filter: saturate(0.35) brightness(0.92);
}
.fv__item[data-pos="1"]  { transform: translate(-50%, -50%) translateX(var(--fv-gap, 170px)) scale(0.84) rotateY(-9deg); }
.fv__item[data-pos="-1"] { transform: translate(-50%, -50%) translateX(calc(var(--fv-gap, 170px) * -1)) scale(0.84) rotateY(9deg); }
.fv__item[data-pos="2"],
.fv__item[data-pos="-2"] {
  z-index: 6;
  opacity: 0.62;
  filter: saturate(0.15) brightness(0.88);
}
.fv__item[data-pos="2"]  { transform: translate(-50%, -50%) translateX(calc(var(--fv-gap, 170px) * 1.85)) scale(0.7) rotateY(-14deg); }
.fv__item[data-pos="-2"] { transform: translate(-50%, -50%) translateX(calc(var(--fv-gap, 170px) * -1.85)) scale(0.7) rotateY(14deg); }
.fv__item[data-pos="hidden"] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}

/* ---- スマホフレーム（CSS 描画・実機の比率に合わせる） ----
   枠の太さと角丸は端末幅からの比率で決める。実機は幅に対して
   枠が約 2.8%、角丸が約 11.8%。固定 px だと縮小時に厚ぼったく見える。 */
.phone {
  --frame: calc(var(--phone-w, 280px) * 0.028);
  --radius: calc(var(--phone-w, 280px) * 0.118);
  position: relative;
  padding: var(--frame);
  border-radius: var(--radius);
  /* チタンフレーム：側面をぐるりと光が回る */
  background: linear-gradient(148deg,
    #8f887c 0%, #3c3830 6%, #201d18 17%, #2c2822 33%,
    #17150f 51%, #262218 67%, #3b362e 83%, #8a8276 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .62),
    0 30px 60px -30px rgba(26, 24, 19, .55),
    0 12px 24px -18px rgba(26, 24, 19, .45);
}
/* 外周 1px の鏡面ハイライト。金属の稜線を作る */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(148deg,
    rgba(255, 255, 255, .66), rgba(255, 255, 255, .1) 15%, rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .12) 83%, rgba(255, 255, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* フレーム内縁の面取り。ガラスの縁に沿って細い光が走る */
.phone::after {
  content: "";
  position: absolute;
  inset: var(--frame);
  z-index: 6;
  border-radius: calc(var(--radius) - var(--frame));
  padding: 1px;
  background: linear-gradient(148deg,
    rgba(255, 255, 255, .38), rgba(255, 255, 255, .06) 18%, rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .03) 64%, rgba(255, 255, 255, .09) 86%, rgba(255, 255, 255, .34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.fv__item[data-pos="0"] .phone {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .66),
    0 44px 80px -34px rgba(26, 24, 19, .62),
    0 16px 30px -18px rgba(26, 24, 19, .5);
}
/* 側面ボタン：左にアクション・音量上下、右に電源。わずかに外へ出す */
.phone__keys {
  position: absolute;
  --key-w: calc(var(--frame) * 0.46);
  inset: 0 calc(var(--frame) * -0.34);
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, #5c564b, #2a2620) left 0 top 20.5% / var(--key-w) 4.4% no-repeat,
    linear-gradient(180deg, #5c564b, #2a2620) left 0 top 29% / var(--key-w) 7.4% no-repeat,
    linear-gradient(180deg, #5c564b, #2a2620) left 0 top 39% / var(--key-w) 7.4% no-repeat,
    linear-gradient(180deg, #5c564b, #2a2620) right 0 top 30.5% / var(--key-w) 11% no-repeat,
    /* アンテナ線 */
    linear-gradient(90deg, rgba(255,255,255,.26), rgba(255,255,255,.05)) left 0 top 12.5% / var(--key-w) 1.5px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.26), rgba(255,255,255,.05)) left 0 top 87.5% / var(--key-w) 1.5px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.26), rgba(255,255,255,.05)) right 0 top 12.5% / var(--key-w) 1.5px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,.26), rgba(255,255,255,.05)) right 0 top 87.5% / var(--key-w) 1.5px no-repeat;
}
.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  /* 枠と同心円になる内側の角丸 */
  border-radius: calc(var(--radius) - var(--frame));
  background: #0b0a09;
  /* ガラスと枠の間の黒い見切り */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 0 14px rgba(0, 0, 0, .3) inset;
}
/* Dynamic Island とカメラのレンズ */
.phone__island {
  position: absolute;
  top: calc(var(--frame) * 1.2);
  left: 50%;
  z-index: 5;
  width: 26%;
  height: calc(var(--phone-w, 280px) * 0.082);
  border-radius: 999px;
  background: #04040a;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .07);
  transform: translateX(-50%);
}
.phone__island::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--frame) * -0.78);
  width: 32%;
  height: 2px;
  border-radius: 999px;
  /* 受話口のスリット。明るい映像の上でも沈んで見えるよう暗色にする */
  background: rgba(8, 9, 14, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateX(-50%);
}
/* ガラスの映り込み */
.phone__gloss {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* 細い鋭角の映り込み */
    linear-gradient(118deg,
      rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .1) 30%,
      rgba(255, 255, 255, .02) 34%, rgba(255, 255, 255, 0) 38%),
    /* 広く回る艶 */
    linear-gradient(122deg,
      rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 13%, rgba(255, 255, 255, 0) 29%,
      rgba(255, 255, 255, 0) 73%, rgba(255, 255, 255, .05) 89%, rgba(255, 255, 255, .12) 100%);
  mix-blend-mode: screen;
}
.phone__screen video,
.phone__screen img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b0a09;
}
/* 脇の端末：画面に墨の膜 + 英字ラベル */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(26,24,19,0.72) 0%, rgba(26,24,19,0.28) 45%, rgba(26,24,19,0.1) 100%);
  opacity: 0;
  transition: opacity var(--fv-dur) var(--fv-ease);
  pointer-events: none;
}
.fv__item:not([data-pos="0"]) .phone__screen::after { opacity: 1; }
.phone__label {
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  z-index: 4;
  text-align: center;
  color: rgba(244,239,228,0.92);
  font-family: var(--fv-en);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fv-dur) var(--fv-ease), transform var(--fv-dur) var(--fv-ease);
  pointer-events: none;
}
.phone__label b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fv-num);
  font-weight: 300;
  font-size: 0.5em;
  letter-spacing: 0.3em;
  color: var(--fv-gold-soft);
}
.phone__label small {
  display: block;
  margin-top: 10px;
  font-family: var(--fv-sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(244,239,228,0.55);
}
.fv__item:not([data-pos="0"]) .phone__label { opacity: 1; transform: none; }

/* ---- 操作 UI ---- */
.fv__ctrl {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(26,24,19,0.12);
  border-radius: 999px;
  background: rgba(244,239,228,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fv__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fv-ink);
  font-family: var(--fv-sans);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.4s var(--fv-ease), color 0.4s var(--fv-ease);
}
@media (hover: hover) {
  .fv__arrow:hover { background: rgba(26,24,19,0.06); color: var(--fv-gold); }
}
.fv__arrow:focus-visible { outline: 1px solid var(--fv-gold); outline-offset: 2px; }
.fv__dots { display: inline-flex; align-items: center; gap: 8px; }
.fv__dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(26,24,19,0.22);
  cursor: pointer;
  transition: width 0.5s var(--fv-ease), background 0.5s var(--fv-ease);
}
.fv__dots button[aria-current="true"] { width: 22px; background: var(--fv-gold); }
.fv__dots button:focus-visible { outline: 1px solid var(--fv-gold); outline-offset: 3px; }
.fv__counter {
  position: absolute;
  left: 50%;
  bottom: -34px;
  z-index: 12;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--fv-num);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--fv-muted);
}
.fv__counter [data-fv-current] { color: var(--fv-gold); font-size: 16px; }
.fv__counter em {
  margin-left: 16px;
  font-family: var(--fv-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--fv-muted);
}

/* ---- モーション抑制：動かさず、中央のみ表示 ---- */
@media (prefers-reduced-motion: reduce) {
  .fv__item, .phone__screen::after, .phone__label, .fv__dots button { transition: none !important; }
}