*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{font-family:"Helvetica Neue",Arial,"Hiragino Sans",Meiryo,sans-serif;overflow-x:hidden;background:#e8e8e8}

.scene{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden}
.layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

.bg-content{text-align:center;user-select:none;pointer-events:none}
.bg-content h1{font-size:clamp(2.2rem,7vw,5.5rem);font-weight:800;letter-spacing:.03em;margin-bottom:.3em}
.bg-content p{font-size:clamp(.85rem,2vw,1.3rem);opacity:.65;font-weight:300}

.bg-b{
  z-index:1;
  background:url('../assets/images/tokyo-day.jpg') center/cover no-repeat;
}
.final-text{z-index:2;pointer-events:none;will-change:transform}
.final-text .bg-content{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.bg-b{will-change:transform}

.paper{background:none}
.paper::before{
  content:"";position:absolute;inset:-4px;
  background:url('../assets/images/tokyo-day.jpg') center/cover no-repeat;
  filter:grayscale(1) blur(3px);
  pointer-events:none;
}
.paper::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.paper .bg-content{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);position:relative;z-index:1;opacity:0;transition:opacity .9s ease}
.paper .bg-content h1,
.final-text .bg-content h1{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  font-size:clamp(2rem,4.5vw,3.6rem);letter-spacing:normal;
  text-transform:none;
}

#pieceTop{z-index:3;will-change:transform}
#pieceBot{z-index:4;will-change:transform}
#intact{z-index:5}

.fade-overlay{z-index:6;background:#000;opacity:0;pointer-events:none}
.intro-overlay{z-index:50;background:#000;opacity:1;pointer-events:none;transition:opacity 1.1s ease}

.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6);
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  animation:bounce 2.2s ease-in-out infinite;opacity:0;transition:opacity .6s ease;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

.scroll-runway{height:500vh;pointer-events:none}
