/* 15 — rose / blue light, anchored by the original navy identity. */
.variant-15{--paper:#f7f6f5;background:var(--paper)}
.variant-15 .form-hero.hero,.variant-15 .gradient-field{background:#dae3ec}
.variant-15 .gradient-wash{
 background:radial-gradient(ellipse at 22% 22%,#edb5c3 0%,#f0ced6 26%,transparent 62%),radial-gradient(ellipse at 82% 80%,#8eb4cf 0%,#bad8e4 34%,transparent 70%),linear-gradient(145deg,#f0cbd6,#dedee8 48%,#b0cddd);
 animation:rose-wash 13s ease-in-out -3s infinite alternate;
}
.variant-15 .fusion-atmosphere .gradient-fold{
 inset:-10% -25%;width:150%;height:120%;border-radius:0;
 background:radial-gradient(ellipse at 65% 65%,#96bdd6 0%,#b9dbe9aa 30%,transparent 65%),radial-gradient(ellipse at 30% 25%,#e6a8b9 0%,transparent 57%);
 opacity:.72;filter:blur(30px);animation:rose-fold 11s ease-in-out -6s infinite alternate;
}
.variant-15 .fusion-atmosphere .gradient-light{
 background:radial-gradient(ellipse,#fff7f3c0 12%,#fff5f180 40%,transparent 70%);
 opacity:.7;animation-duration:14s;animation-delay:-4s;
}
.variant-15 .gradient-hero:after{background:linear-gradient(180deg,#faf3f233,transparent 45%,#dae4ed11)}
.variant-15 .construction-art linearGradient[id$="-blue"] stop:first-child{stop-color:#355d7f}
.variant-15 .construction-art linearGradient[id$="-blue"] stop:nth-child(2){stop-color:#86abc1;animation:none}
.variant-15 .construction-art linearGradient[id$="-blue"] stop:last-child{stop-color:#bfd5e0}
.variant-15 .construction-art linearGradient[id$="-mist"] stop:first-child{stop-color:#a8718d}
.variant-15 .construction-art linearGradient[id$="-mist"] stop:nth-child(2){stop-color:#cea2b6}
.variant-15 .construction-art linearGradient[id$="-mist"] stop:last-child{stop-color:#eed7dc}
.variant-15 .construction-art linearGradient[id$="-light"] stop:first-child{stop-color:#fff7f1}
.variant-15 .construction-art linearGradient[id$="-light"] stop:nth-child(2){stop-color:#eee5e8}
.variant-15 .construction-art linearGradient[id$="-light"] stop:last-child{stop-color:#9bb9ce}
.variant-15 .form-intro,.variant-15 .form-practice{background:#e0e5ec}
.variant-15 :is(.form-intro,.form-practice):before{
 background:radial-gradient(ellipse at 20% 20%,#edb9cbbb,transparent 56%),radial-gradient(ellipse at 80% 75%,#8cb4d1aa,transparent 58%),linear-gradient(130deg,#eedbe3,#d9dfeb 50%,#b4d3e2);
}
.variant-15 .form-practice:before{
 background:radial-gradient(ellipse at 75% 25%,#eab8c9aa,transparent 55%),radial-gradient(ellipse at 18% 78%,#91bad5bb,transparent 60%),linear-gradient(145deg,#e8e5ec,#c7ddeb 55%,#ecdce5);
}
.variant-15 :is(.form-intro,.form-practice):after{background:radial-gradient(ellipse at 48% 46%,#fff8f2b0 0%,#fff6f54f 25%,transparent 53%)}
.variant-15 :is(.form-profile,.site-footer){background:#f7f6f5}
.variant-15 .form-works{background:#fbfaf9}
.variant-15 .site-header.has-surface,.variant-15 .mobile-menu{background:#f7f6f5f5}
.variant-15 .form-section-head h2 em,.variant-15 .form-profile h2 em{color:#647d94}
@keyframes rose-wash{from{transform:translate3d(-7%,-5%,0) rotate(-5deg)}to{transform:translate3d(9%,6%,0) rotate(8deg)}}
@keyframes rose-fold{from{transform:translate3d(-10%,8%,0) rotate(-10deg)}to{transform:translate3d(12%,-10%,0) rotate(14deg)}}

/* Fit the comparison pane as well as full-height desktop windows. */
@media(min-width:769px) and (max-height:660px){
 :is(.variant-15,.variant-16,.variant-17,.variant-18,.variant-19) .form-hero{--hero-height:100svh;height:100svh;min-height:560px;top:0}
 :is(.variant-15,.variant-16,.variant-17,.variant-18,.variant-19) .form-hero h1{font-size:clamp(60px,7vw,94px);margin:14px 0 20px}
 :is(.variant-15,.variant-16,.variant-17,.variant-18,.variant-19) .form-hero-tag{font-size:19px}
 :is(.variant-15,.variant-16,.variant-17,.variant-18,.variant-19) .form-japanese{margin-top:20px}
 :is(.variant-15,.variant-16,.variant-17,.variant-18,.variant-19) .form-hero-bottom{bottom:24px}
}

/* 16 — a continuous exchange: open out, trade positions, build, open out again.
   The shared phase keeps each composition intentional instead of random drift. */
.variant-16.variant-13 :is(.form-hero,.form-practice) .construction-art>svg>g{
 animation-name:var(--kinetic-motion);
 animation-duration:20s;animation-delay:-1s;
 animation-timing-function:cubic-bezier(.45,0,.25,1);
}
.variant-16.variant-13 .form-practice .construction-art>svg>g{animation-duration:24s;animation-delay:-8s}
.variant-16 .build-person{--kinetic-motion:kinetic-person}
.variant-16 .build-idea{--kinetic-motion:kinetic-idea}
.variant-16 .build-square{--kinetic-motion:kinetic-square}
.variant-16 .build-triangle{--kinetic-motion:kinetic-triangle}
.variant-16 .build-span{--kinetic-motion:kinetic-span}
.variant-16 .build-link{--kinetic-motion:kinetic-link}
.variant-16 .build-base{--kinetic-motion:kinetic-base}
.variant-16 .build-link path{fill:#638f95}
@keyframes kinetic-person{
 0%,100%{transform:translate(-6px,-38px) rotate(-3deg)}
 19%{transform:translate(-22px,-70px) rotate(-8deg)}
 40%{transform:translate(32px,-42px) rotate(6deg)}
 61%{transform:translate(10px,-31px) rotate(1deg)}
 80%{transform:translate(-15px,-58px) rotate(-5deg)}
}
@keyframes kinetic-span{
 0%,100%{transform:translate(8px,-40px) rotate(4deg)}
 19%{transform:translate(28px,-65px) rotate(9deg)}
 40%{transform:translate(-28px,-48px) rotate(-8deg)}
 61%{transform:translate(-6px,-30px) rotate(-1deg)}
 80%{transform:translate(24px,-52px) rotate(6deg)}
}
@keyframes kinetic-idea{
 0%,100%{transform:translate(-6px,-9px)}
 19%{transform:translate(34px,-25px)}
 40%{transform:translate(-83px,21px)}
 61%{transform:translate(-112px,78px)}
 80%{transform:translate(-49px,-22px)}
}
@keyframes kinetic-square{
 0%{transform:translate(-15px,-8px) rotate(-12deg)}
 19%{transform:translate(20px,28px) rotate(32deg)}
 40%{transform:translate(107px,-48px) rotate(95deg)}
 61%{transform:translate(87px,-106px) rotate(174deg)}
 80%{transform:translate(-12px,-73px) rotate(258deg)}
 100%{transform:translate(-15px,-8px) rotate(348deg)}
}
@keyframes kinetic-triangle{
 0%{transform:translate(-3px,-22px) rotate(0deg)}
 19%{transform:translate(10px,-50px) rotate(24deg)}
 40%{transform:translate(-4px,17px) rotate(88deg)}
 61%{transform:translate(-34px,4px) rotate(120deg)}
 80%{transform:translate(-50px,-65px) rotate(216deg)}
 100%{transform:translate(-3px,-22px) rotate(360deg)}
}
@keyframes kinetic-link{
 0%,100%{transform:translate(-5px,6px) rotate(-15deg)}
 19%{transform:translate(42px,4px) rotate(66deg)}
 40%{transform:translate(-20px,56px) rotate(165deg)}
 61%{transform:translate(-25px,5px) rotate(240deg)}
 80%{transform:translate(22px,33px) rotate(105deg)}
}
@keyframes kinetic-base{
 0%,100%{transform:translate(0,-5px) rotate(-1deg)}
 19%{transform:translate(4px,-8px) rotate(2.6deg)}
 40%{transform:translate(-4px,-6px) rotate(-2.6deg)}
 61%{transform:translate(2px,-3px) rotate(.3deg)}
 80%{transform:translate(-2px,-7px) rotate(1.8deg)}
}
/* Concept stays compact, but ideas exchange above the clear space over the base. */
.variant-16.variant-13 .form-intro .construction-art>svg>g{animation-duration:16s;animation-delay:-3s}
.variant-16.variant-13 .form-intro .construction-art>svg>g.build-square{animation-name:kinetic-intro-square}
.variant-16.variant-13 .form-intro .construction-art>svg>g.build-triangle{animation-name:kinetic-intro-triangle}
.variant-16.variant-13 .form-intro .construction-art>svg>g.build-idea{animation-name:kinetic-intro-idea}
@keyframes kinetic-intro-square{
 0%{transform:translate(-119px,8px) rotate(-8deg)}
 25%{transform:translate(-85px,-12px) rotate(38deg)}
 50%{transform:translate(-164px,35px) rotate(90deg)}
 75%{transform:translate(-145px,-12px) rotate(224deg)}
 100%{transform:translate(-119px,8px) rotate(352deg)}
}
@keyframes kinetic-intro-triangle{
 0%,100%{transform:translate(-147px,60px) rotate(-4deg)}
 25%{transform:translate(-152px,20px) rotate(28deg)}
 50%{transform:translate(-120px,49px) rotate(-22deg)}
 75%{transform:translate(-155px,70px) rotate(9deg)}
}
@keyframes kinetic-intro-idea{
 0%,100%{transform:translate(-10px,5px)}
 25%{transform:translate(16px,-22px)}
 50%{transform:translate(60px,-34px)}
 75%{transform:translate(25px,15px)}
}
@media(max-width:768px) and (orientation:portrait){
 .variant-16.variant-13 .geometry-hero{width:min(116vw,calc(104svh - 352px))}
}
@media(max-width:768px) and (min-height:741px) and (orientation:portrait){
 .variant-16.variant-13 .geometry-hero{bottom:-40px}
}
@media(prefers-reduced-motion:reduce){
 .variant-15 .gradient-field>span,.variant-16.variant-13 .construction-art>svg>g{animation:none!important}
}