*,*::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-title, not h1: the stage copy is display type, and the page's one
   heading is the H1 on the white panel. Declarations unchanged from when
   these rules were typed on h1. */
.bg-content .bg-title{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}

/* The z-index ladder of the stage has gaps: 1 (.bg-b), 3-5 (#pieceTop,
   #pieceBot, .tear-overlay) belonged to the CSS-mask tear this site does not
   use -- the hero here is the WebGL one. The rules and their mask images were
   dropped when the page was pulled out on its own; the numbering is left as it
   was so it still lines up with the renderers in packages/tear-reveal. */
.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)}

.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 .bg-title,
.final-text .bg-content .bg-title{
  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;
}

#intact{z-index:6}

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

/* The overlay now holds until the hero's WebGL stage has a first frame, so
   on a slow load it is a wait rather than a beat. js/hero2-tear.js appends
   this mark if that wait passes 600ms and removes it when the frame lands —
   a warm cache never sees it. Deliberately faint: it is a hero opening, and
   the visitor should notice the photo, not the ring that preceded it. */
.intro-loading{
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.66);
  opacity:0;
  animation:intro-loading-spin .9s linear infinite,
            intro-loading-in .45s ease .05s forwards;
}
@keyframes intro-loading-spin{to{transform:rotate(360deg)}}
@keyframes intro-loading-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .intro-loading{animation:intro-loading-in .45s ease forwards}
}

.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}