/* Section 02 rebuild — source-image reset, static alignment first */
.comp-difference{position:relative;background:#05080c;overflow:hidden}
.s02-rebuild-pc{display:block}
.s02-rebuild-sp{display:none}
.s02-rebuild-stage{position:relative;isolation:isolate;width:100%;max-width:1200px;aspect-ratio:1672/941;margin:0 auto;overflow:hidden;background:
radial-gradient(circle at 79% 38%,rgba(0,126,255,.28) 0%,rgba(0,75,165,.12) 28%,transparent 52%),
radial-gradient(circle at 22% 64%,rgba(255,242,0,.055) 0%,transparent 36%),
linear-gradient(135deg,#02060a 0%,#07101a 48%,#03101e 100%)}
.s02-rebuild-stage:before{content:"";position:absolute;inset:0;z-index:0;background:url("./assets/section02-rebuild/02_texture.png") center/100% 100% no-repeat;opacity:.92;pointer-events:none}
.s02-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.s02-headline-layer{z-index:2}
.s02-yellow-layer{z-index:3}
.s02-dashboard-layer{z-index:4}
.s02-subcopy-layer{z-index:5}
.s02-rebuild-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.6%;z-index:6;pointer-events:none;background:linear-gradient(to bottom,rgba(5,8,12,0),rgba(5,8,12,.16) 50%,#05080c 100%)}
.s02-mobile-card{position:relative;max-width:520px;margin:0 auto;padding:28px 14px 40px;background:linear-gradient(155deg,#03070d 0%,#07111e 58%,#03070d 100%);overflow:hidden}
.s02-mobile-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 35%,rgba(0,130,255,.2),transparent 42%);pointer-events:none}
.s02-mobile-card>*{position:relative;z-index:1}
.s02-mobile-title{display:block;width:100%;height:auto;margin:0 auto 4px}
.s02-mobile-yellow{display:block;width:100%;height:auto;margin:-2px auto 12px}
.s02-mobile-ui{display:block;width:100%;height:auto;margin:8px auto 0;border-radius:16px;box-shadow:0 0 26px rgba(22,140,244,.28)}
.s02-mobile-sub{display:block;width:88%;height:auto;margin:16px auto 0}
@media(max-width:767px){.s02-rebuild-pc{display:none!important}.s02-rebuild-sp{display:block}}

/* FV -> Section02 seamless transition */
@media(min-width:768px){
  .comp-difference{
    margin-top:-64px;
    background:transparent;
    z-index:2;
  }
  .s02-rebuild-stage{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 100%);
  }
}
/* reveal motion */
@media(min-width:768px){
.s02-rebuild-stage .s02-layer{opacity:0;will-change:opacity,transform}
.s02-rebuild-stage .s02-headline-layer{transform:translateY(12px)}
.s02-rebuild-stage .s02-yellow-layer{transform:translateY(9px)}
.s02-rebuild-stage .s02-dashboard-layer{transform:translateX(12px)}
.s02-rebuild-stage .s02-subcopy-layer{transform:translateY(8px)}
.s02-rebuild-stage.in-view .s02-headline-layer{animation:reveal-up .62s .05s ease forwards}
.s02-rebuild-stage.in-view .s02-yellow-layer{animation:reveal-up .60s .14s ease forwards}
.s02-rebuild-stage.in-view .s02-dashboard-layer{animation:reveal-right .72s .20s ease forwards}
.s02-rebuild-stage.in-view .s02-subcopy-layer{animation:reveal-up .50s .34s ease forwards}
}