@charset "UTF-8";

/* =====================================================
   MV SLIDER - MYTHOS（VIP質感統一版）
===================================================== */

:root{
  --mv-gold: #b8923c;
  --mv-gold-dim: rgba(184,146,60,.62);
  --mv-gold-line: rgba(184,146,60,.42);

  /* ★暗くする空気を撤廃（透明ハイライト） */
  --mv-air-1: rgba(255,255,255,.06);
  --mv-air-2: rgba(255,255,255,0);

  --mv-kenburns-dur: 9000ms;
  --mv-kenburns-ease: cubic-bezier(.22,1,.36,1);
  --mv-fade-dur: 1400ms;

  /* ★暗くしない（元画像に寄せる） */
  --mv-filter: brightness(1) contrast(1.02) saturate(1.02);
}

/* =====================================================
   MV ROOT
===================================================== */

#mvGallery.mv-slider{
  position: relative;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  width: 100%;
}

/* ロードフェード */
#mvGallery.mv-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  z-index: 6;
  opacity: 1;
  transition: opacity var(--mv-fade-dur) cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

html.is-mv-ready #mvGallery.mv-slider::after{
  opacity: 0;
}

/* =====================================================
   Swiper Stage
===================================================== */

#mvGallery .swiper{
  position: relative;
  width: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
  height: clamp(520px, 78vh, 920px);
}

@supports (height:1svh){
  #mvGallery .swiper{ height: clamp(520px, 78svh, 920px); }
}
@supports (height:1dvh){
  #mvGallery .swiper{ height: clamp(520px, 78dvh, 920px); }
}

/* ★透明ハイライト幕（VIPと同じ方向） */
#mvGallery .swiper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;

  /* まず通常合成で成立させる（安全） */
  background: linear-gradient(
    to bottom,
    var(--mv-air-1),
    var(--mv-air-2)
  );
  opacity: .9;
}

/* ブレンドが使える環境のみ “screen” に上書き（リッチ化） */
@supports (mix-blend-mode: screen){
  #mvGallery .swiper::before{
    mix-blend-mode: screen;
  }
}

#mvGallery .swiper,
#mvGallery .swiper-wrapper,
#mvGallery .swiper-slide{
  background:#000;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* =====================================================
   Slides
===================================================== */

#mvGallery .swiper-slide{
  position: relative;
  overflow: hidden;
}

#mvGallery .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  transform: translateZ(0) scale(1.02);
  will-change: transform;

  /* ★暗くしない */
  filter: var(--mv-filter);

  transition:
    transform var(--mv-kenburns-dur) var(--mv-kenburns-ease);
}

#mvGallery .swiper-slide-active img{
  transform: translateZ(0) scale(1.08);
  filter: var(--mv-filter);
}

/* =====================================================
   UI Overlay
===================================================== */

#mvGallery .mv-ui{
  position:absolute;
  left:0;
  right:0;
  bottom:22px;
  z-index: 7;

  opacity:0;
  transform: translateY(12px);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1),
              transform 900ms cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

html.is-mv-ready #mvGallery .mv-ui{
  opacity:1;
  transform: translateY(0);
}

#mvGallery .mv-ui__inner{
  position:relative;
  width:100%;
  padding:0 40px;
}

/* =====================================================
   Prev / Next
===================================================== */

#mvGallery .mv-prev,
#mvGallery .mv-next{
  pointer-events:auto;
  appearance:none;
  background:transparent;
  border:0;
  color:var(--mv-gold);
  font-family: var(--font-en, "Cinzel", serif);
  font-weight:500;
  font-size:14px;
  letter-spacing:.14em;
  cursor:pointer;
  padding:10px 6px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;

  text-shadow: 0 18px 42px rgba(0,0,0,.55);
  transition: opacity .25s ease;
}

#mvGallery .mv-prev:hover,
#mvGallery .mv-next:hover{
  opacity:.78;
}

#mvGallery .mv-prev{
  position:absolute;
  left:40px;
  top:50%;
  transform:translateY(-50%);
}

#mvGallery .mv-next{
  position:absolute;
  right:40px;
  top:50%;
  transform:translateY(-50%);
}

/* =====================================================
   Middle UI
===================================================== */

#mvGallery .mv-mid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:var(--mv-gold);

  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(720px, calc(100% - 220px));
}

#mvGallery .mv-line{
  flex:1;
  border-top:1px solid var(--mv-gold-line);
  min-width: 80px;
}

#mvGallery .mv-dot{
  width:24px;
  height:8px;
  border:1px solid var(--mv-gold-line);
  background: rgba(184,146,60,.06);
}

#mvGallery .mv-fraction{
  font-family: var(--font-en, "Cinzel", serif);
  letter-spacing:.20em;
  font-variant-numeric: tabular-nums;
  color: rgba(184,146,60,.88);
}

#mvGallery .mv-fraction .slash,
#mvGallery .mv-fraction .total{
  color: rgba(184,146,60,.58);
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:1024px){
  #mvGallery .mv-ui__inner{ padding: 0 24px; }
  #mvGallery .mv-prev{ left:24px; }
  #mvGallery .mv-next{ right:24px; }
  #mvGallery .mv-mid{ width:min(640px, calc(100% - 180px)); }
}

@media (max-width:768px){

  #mvGallery .swiper{
    height:72vh;
    min-height:520px;
  }

  @supports (height:1svh){
    #mvGallery .swiper{ height:72svh; }
  }
  @supports (height:1dvh){
    #mvGallery .swiper{ height:72dvh; }
  }

  #mvGallery .mv-ui{ bottom:14px; }
  #mvGallery .mv-ui__inner{ padding:0 16px; }

  #mvGallery .mv-prev,
  #mvGallery .mv-next{
    font-size:12px;
    letter-spacing:.10em;
    padding:8px 4px;
    gap:8px;
  }

  #mvGallery .mv-prev{ left:16px; }
  #mvGallery .mv-next{ right:16px; }

  #mvGallery .mv-mid{
    width:min(520px, calc(100% - 150px));
    gap:12px;
  }

  #mvGallery .mv-line{ min-width:50px; }
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce){
  #mvGallery.mv-slider::after,
  #mvGallery .mv-ui,
  #mvGallery .swiper-slide img{
    transition:none !important;
  }

  /* ★質感は維持しつつ、動きだけ止める */
  #mvGallery .swiper-slide img,
  #mvGallery .swiper-slide-active img{
    transform: translateZ(0) scale(1.02) !important;
    filter: var(--mv-filter) !important;
  }
}