/* Motion study: staged blocks, opposing type strips, letter shuffle, logo settle. */
.logo-sequence{position:absolute;z-index:4;pointer-events:none;overflow:hidden;isolation:isolate;contain:layout paint;--strip-size:60px}
.intro-bars,.intro-strips,.intro-field,.intro-type{position:absolute;inset:0}
.intro-bars>i{position:absolute;left:0;right:0;height:10.1%;background:var(--ink);transform-origin:left center;will-change:transform}
.intro-strip{position:absolute;left:-100%;width:300%;height:33.5%;overflow:hidden;white-space:nowrap;line-height:1;font-size:var(--strip-size);letter-spacing:-.06em;font-weight:900;color:var(--paper);will-change:transform}
.intro-strip:nth-child(2){top:33.333%}.intro-strip:nth-child(3){top:66.666%}
.intro-field{background:var(--gradient);transform-origin:left}
.intro-type{display:flex;align-items:baseline;justify-content:center;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:900;letter-spacing:-.06em;line-height:.95;padding-right:.09em;white-space:nowrap}
.intro-type>span{display:inline-block}.intro-echo{opacity:.22;pointer-events:none}
.intro-playing .wordmark{opacity:0}
.intro-playing .hero-intro,.intro-playing .kinetic-symbol,.intro-playing .hero-index{opacity:var(--intro-ui,0);transform:translateY(calc((1 - var(--intro-ui,0))*15px))}
.intro-playing .kinetic-symbol{transform:translate(-50%,calc((1 - var(--intro-ui,0))*15px))}
.motion-ready .wordmark{transform-origin:center center}
#motion-replay>span:first-child{font-size:17px;font-weight:400}
.section-top{position:relative}.section-top::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gradient);transform:scaleX(var(--section-progress,0));transform-origin:left}
.motion-ready .manifesto>span::before{transition:none;transform:scaleX(var(--line-progress,0))}
.motion-ready .manifesto>span{transform:translateY(calc((1 - var(--line-progress,0))*24px));opacity:calc(.3 + var(--line-progress,0)*.7)}
.roll-line{display:block;overflow:hidden;line-height:1.03;padding-bottom:.06em;margin-bottom:-.06em}
.roll-letter{display:inline-block;transform:translateY(calc((1 - var(--letter-progress,1))*110%)) rotate(calc((1 - var(--letter-progress,1))*7deg));transform-origin:0 100%;will-change:transform}
.preview-heading h2>.roll-line{padding-left:0}.preview-heading h2>.roll-line:nth-child(2){padding-left:15vw}
.rhythm-stack{transform:none;perspective:800px}
.rhythm-stack>span{will-change:transform;transform-origin:center center}
.menu-opening{animation:menu-enter .6s cubic-bezier(.14,1,.34,1) both}
.menu-opening nav a{animation:menu-line .6s cubic-bezier(.14,1,.34,1) both;animation-delay:calc(var(--menu-index,0)*.08s + .08s)}
@keyframes menu-enter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-line{from{transform:translateY(35px);opacity:0}to{transform:translateY(0);opacity:1}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:900px){.preview-heading h2>.roll-line:nth-child(2){padding-left:8vw}}
@media(max-width:600px){.replay-label{font-size:0}.replay-label::after{content:"もう一度";font-size:8px}.hero-footer{gap:8px}.hero-footer a{gap:8px}#motion-replay{gap:4px}.preview-heading h2>.roll-line:nth-child(2){padding-left:20vw}}
@media(prefers-reduced-motion:reduce){.logo-sequence{display:none!important}.intro-playing .wordmark{opacity:1}.intro-playing .hero-intro,.intro-playing .kinetic-symbol,.intro-playing .hero-index{opacity:1}.motion-ready .manifesto>span{opacity:1;transform:none}.motion-ready .manifesto>span::before{transform:scaleX(1)}.roll-letter{transform:none}.rhythm-stack>span{transform:none!important}.section-top::after{transform:scaleX(1)}}

/* Official brand artwork remains intact throughout the reveal. */
.wordmark{display:block;padding:0;line-height:1;margin-bottom:36px;height:auto;aspect-ratio:860/120}
.wordmark>img{display:block;width:100%;height:100%;object-fit:contain;will-change:transform}
.kinetic-symbol{left:76%;top:22%;width:150px}
.app-symbol{display:block;width:100%;height:auto;border-radius:23%;transform-origin:center}
.mini-symbol{width:42px;height:42px;object-fit:contain;border-radius:23%}
.hero-intro{max-width:75%}.hero-tagline{display:inline-block;font-size:.64em;letter-spacing:-.025em;margin-top:12px}
.intro-strip{display:flex;align-items:center;gap:3%;font-size:0}
.intro-strip>img{width:16%;height:85%;object-fit:contain;flex-shrink:0;filter:invert(1)}
.intro-type{padding:0;align-items:center;position:absolute}
.intro-type>span{position:absolute;top:0;bottom:0;left:calc(var(--slice)*10%);width:10%;background-image:url('logo-text.png');background-size:1000% auto;background-position:calc(var(--slice)*100% / 9) center;background-repeat:no-repeat;will-change:transform}
@media(max-width:900px){.kinetic-symbol{left:81%;top:35%;width:130px}.hero-intro{max-width:100%}}
@media(max-width:600px){.hero-statement{font-size:clamp(23px,6.8vw,29px)}.hero-tagline{font-size:.68em}.kinetic-symbol{left:73%;top:51%;width:110px}.wordmark{margin-bottom:30px;aspect-ratio:860/150}.mini-symbol{width:32px;height:32px}.preview-heading p{font-size:13px}}

.rhythm-stack>.rhythm-logo{height:.93em;position:relative;background:none}
.rhythm-logo img{display:block;width:100%;height:100%;object-fit:contain;opacity:0}
.rhythm-logo::after{content:"";position:absolute;inset:0;background:var(--gradient);-webkit-mask:url('logo-text.png') center / contain no-repeat;mask:url('logo-text.png') center / contain no-repeat}

/* Transparent download banner; only the original icon follows the pointer. */
.hero .download-button{left:75%;top:22%;width:min(43vw,540px);display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding:18px 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:left;box-shadow:none;-webkit-tap-highlight-color:transparent}
.download-button .app-symbol{flex:0 0 auto;width:clamp(70px,8vw,108px);height:auto;will-change:transform}
.download-button>.download-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:18px;margin:0;font-size:14px;line-height:1.4}
.download-wordmark{display:block;width:100%;height:auto;object-fit:contain}
.download-label{font-size:clamp(12px,1.3vw,16px);font-weight:700;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:5px}
.download-label>span{display:inline-block;margin-left:8px;transition:transform .2s}
.download-button:hover .download-label>span{transform:translate(3px,-3px)}
.download-button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.download-notice{width:min(440px,calc(100% - 32px));padding:32px;border:1px solid #121116;border-radius:16px;background:#faf7ff;color:#121116;box-shadow:0 16px 70px #12111630}
.download-notice::backdrop{background:#12111666;backdrop-filter:blur(4px)}
.download-notice h2{font-size:22px;letter-spacing:0;margin:0 0 16px}
.download-notice p{font-size:14px;line-height:1.9;margin:0 0 24px}
.download-notice form{margin:0;text-align:right}
.download-notice button{border:0;border-radius:8px;background:#121116;color:#fff;padding:12px 24px;font-size:14px}
@media(max-width:900px){.hero .download-button{left:73%;top:42%;width:46vw}.download-button .app-symbol{width:72px}.download-button>.download-copy{gap:12px}}
@media(max-width:600px){.hero .download-button{left:50%;top:48%;width:min(88%,400px);padding:14px 4px;gap:18px}.download-button .app-symbol{width:76px}.download-button>.download-copy{gap:13px}.download-label{font-size:12px}.download-notice{padding:24px}.download-notice h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.download-button .app-symbol{will-change:auto}}