/* Vision Section */
.vision { 
  position: relative; 
  /* background-image: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.85)), url('../assets/images/jpg/bg-hero-black8.jpg'); */
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../assets/images/png/vision-bg12.png");
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-attachment: fixed;
  color: var(--color-white); 
  /* Safari optimization */
}

/* Safari (Mac & iOS/iPadOS) fallback */
@supports (-webkit-backdrop-filter: none) and (not (backdrop-filter: none)) {
  .vision {
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }
}

/* iOS/iPadOS specific fallback */
@supports (-webkit-touch-callout: none) {
  .vision {
    background: none;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
    min-height: 100vh;
    /* Prevent zoom issues on iOS */
    -webkit-background-size: cover;
    /* Create a pseudo-element for stable background on iOS */
    position: relative;
  }
  
  .vision::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../assets/images/png/vision-bg12.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    -webkit-background-size: cover;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    backface-visibility: hidden;
  }
  
  .vision.is-inview::before {
    opacity: 1;
  }
  
  .vision-pin {
    position: relative;
    z-index: 1;
    background: transparent;
  }
}

/* Global fixed background pseudo-element for Safari fallback */
.vision::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../assets/images/png/vision-bg12.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  -webkit-background-size: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  backface-visibility: hidden;
}

.vision.is-inview::before {
  opacity: 1;
}

.vision__container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-md); }
.vision__header { 
  text-align: center; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  padding-top: 120px; 
  background: transparent; 
  z-index: 10; 
  /* backdrop-filter: blur(10px);  */
}
.vision__header .section-title { font-size: 3.5rem; color: var(--color-white); text-shadow: 0 0 20px rgba(246,191,0,0.3); }
.vision__header .section-subtitle { font-size: 1.2rem; color: var(--color-gray); margin-top: var(--spacing-sm); }

/* Horizontal Scroll */
.vision-pin { 
  height: 400vh; 
  overflow: visible; 
  view-timeline-name: --vision-pin; 
  view-timeline-axis: block;
  /* スワイプ機能のためのタッチ設定 */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.vision-sticky { 
  height: 100vh; 
  width: 100vw; 
  position: sticky; 
  top: 0; 
  overflow-x: hidden; 
  overscroll-behavior: contain;
  contain: paint; /* isolate painting to reduce background invalidations */
}
.vision-pin {
  overscroll-behavior: contain;
}
.vision-horizontal { padding-top: 200px; padding-bottom: 100px; height: 100%; width: 500vw; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0; animation: visionHorizontalScroll linear both; animation-timeline: --vision-pin; animation-range: contain 0% contain 100%; color: var(--color-white); will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
@keyframes visionHorizontalScroll { from { transform: translateX(0);} to { transform: translateX(-400vw);} }

/* JavaScript Fallback for iOS/iPadOS */
.js-scroll-active .vision-horizontal {
  animation: none !important;
  transform: translate3d(var(--scroll-progress, 0), 0, 0);
  transition: none; /* avoid stutter on scroll */
  will-change: transform;
}

/* During JS fallback (Safari), use fixed ::before layer globally */
.vision.js-scroll-active {
  background: none !important;
}
.vision.js-scroll-active::before {
  opacity: 1;
}

/* Ensure progress bar works with JS fallback */
.js-scroll-active .vision-progress__fill {
  transition: none;
  width: 100%;
  transform-origin: left center;
  will-change: transform;
}

/* Reduce heavy effects during JS fallback to avoid stutter */
.js-scroll-active .vision-progress__container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,0.6);
}

.vision-slide { width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 var(--spacing-lg); box-sizing: border-box; }
.vision-slide__content { 
  display: flex; 
  flex-direction: column; 
  gap: 2rem; 
  align-items: center; 
  max-width: 1200px; 
  width: 100%; 
  margin: 0 auto;
}

/* Top row with text and visual */
.vision-slide__top { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 4rem; 
  align-items: center; 
  width: 100%;
}

.vision-slide__text h3 { font-size: 4rem; color: var(--color-accent); margin-bottom: 1rem; text-shadow: 0 0 30px rgba(246,191,0,0.4); letter-spacing: 0.1em; }
.vision-slide__text h4 { font-size: 2rem; color: var(--color-white); margin-bottom: 2rem; border-bottom: 2px solid var(--color-accent); padding-bottom: 0.5rem; display: inline-block; }
.vision-slide__text p { font-size: 1.1rem; line-height: 2; color: var(--color-gray); opacity: 0.9; }
.vision-slide__visual { display: flex; justify-content: center; align-items: center; height: auto; width: 100%; }

.vision-slide__visual picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
}

/* CTA section at bottom */
.vision-slide__cta { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  margin-top: 1rem;
}

/* Geometrics */
.vision__geometric { width: 300px; height: 300px; position: relative; filter: drop-shadow(0 0 30px rgba(246,191,0,0.3)); }
.vision__geometric--today { background: linear-gradient(45deg, var(--color-accent), #ff6b35); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.vision__geometric--2030 { background: linear-gradient(135deg, var(--color-accent), #00d4aa); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.vision__geometric--2040 { background: linear-gradient(90deg, var(--color-accent), #667eea); border-radius: 50%; }
.vision__geometric--2050 { background: linear-gradient(180deg, var(--color-accent), #f093fb); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Progress */
.vision-progress { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 800px; z-index: 10; }
.vision-progress__container { background: rgba(0,0,0,0.8); border-radius: 20px; padding: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(246,191,0,0.2); }
.vision-progress__bar { height: 6px; background: rgba(100,100,100,0.3); border-radius: 3px; overflow: hidden; margin-bottom: 16px; position: relative; }
.vision-progress__fill { height: 100%; background: linear-gradient(90deg, #4a90e2, #8b5cf6, #ec4899, #f59e0b, #f6bf00); border-radius: 3px; width: 0%; box-shadow: 0 0 10px rgba(74,144,226,0.5); }
.vision-progress__timeline { display: flex; justify-content: space-between; position: relative; }
.vision-progress__marker { font-size: 0.9rem; color: var(--color-gray); font-family: var(--font-english); font-weight: 600; position: relative; transition: all 0.3s ease; opacity: 0.6; }
.vision-progress__marker::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: rgba(100,100,100,0.5); border-radius: 50%; transition: all 0.3s ease; }

/* Responsive */
@media (max-width: 1024px) { 
  .vision-slide__top { grid-template-columns: 1fr; gap: 3rem; }
}

/* iPad specific optimizations */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .vision {
    background-size: 150% auto;
    background-position: center center;
  }
  
  .vision::before {
    background-size: 150% auto !important;
    background-position: center center !important;
  }
}
@media (max-width: 768px) {
  .vision-pin { height: 300vh; }
  .vision-horizontal { padding: 150px 10px 50px; }
  .vision__header { padding: var(--spacing-lg) 0 var(--spacing-md); }
  .vision-slide__content { gap: 2rem; text-align: center; padding: 0 2rem; }
  .vision-slide__top { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .vision-slide__text h3 { font-size: 2.5rem; }
  .vision-slide__text h4 { font-size: 1.5rem; }
  .vision-slide__text p { font-size: 1rem; line-height: 1.8; }
  .vision__geometric { width: 200px; height: 200px; }
  .vision__header .section-title { font-size: 2.5rem; }
  .vision-progress { width: 90%; bottom: 20px; }
  .vision-progress__container { padding: 15px; }
  .vision-progress__bar { height: 4px; margin-bottom: 12px; }
  .vision-progress__marker { font-size: 0.8rem; }
  .vision-progress__marker::before { width: 6px; height: 6px; top: -16px; }
} 

.vision-slide__image {
	width: 100%;
	height: auto;
	display: block;
}